Hide council voting when not a member (#2071)

* Hide council voting when not a member

* Disable instead of hide

packages/app-council/src/Motions/Motion.tsx

@@ -6,7 +6,6 @@ import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-
 import { AddressMini, Voting } from '@polkadot/react-components';
 import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
 import { formatNumber } from '@polkadot/util';
@@ -14,10 +13,11 @@ import { formatNumber } from '@polkadot/util';
 import translate from '../translate';
 
 interface Props extends I18nProps {
+  isMember: boolean;
   motion: DerivedCollectiveProposal;
 }
 
-function Motion ({ className, motion: { hash, proposal, votes }, t }: Props): React.ReactElement<Props> | null {
+function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }: Props): React.ReactElement<Props> | null {
   if (!votes) {
     return null;
   }
@@ -60,6 +60,7 @@ function Motion ({ className, motion: { hash, proposal, votes }, t }: Props): Re
         <Voting
           hash={hash}
           isCouncil
+          isDisabled={!isMember}
           idNumber={index}
           proposal={proposal}
         />

packages/app-council/src/Motions/Propose.tsx

@@ -16,6 +16,7 @@ import { createType } from '@polkadot/types';
 import translate from '../translate';
 
 interface Props extends TxModalProps, ApiProps {
+  isMember: boolean;
   memberCount: number;
 }
 
@@ -70,11 +71,12 @@ class Propose extends TxModal<Props, State> {
   }
 
   protected renderTrigger = (): React.ReactNode => {
-    const { t } = this.props;
+    const { isMember, t } = this.props;
 
     return (
       <Button.Group>
         <Button
+          isDisabled={!isMember}
           isPrimary
           label={t('Propose a council motion')}
           icon='add'

packages/app-council/src/Motions/index.tsx

@@ -4,9 +4,11 @@
 
 import { DerivedCollectiveProposals, DerivedCollectiveProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
+import { AccountId, Balance } from '@polkadot/types/interfaces';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Table } from '@polkadot/react-components';
+import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
 
 import Motion from './Motion';
 import Propose from './Propose';
@@ -17,15 +19,31 @@ interface Props extends I18nProps {
 }
 
 function Proposals ({ className, motions, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const members = useCall<[AccountId, Balance][]>(api.query.electionsPhragmen?.members || api.query.elections.members, []);
+  const [isMember, setIsMember] = useState(false);
+
+  useEffect((): void => {
+    if (allAccounts && members) {
+      setIsMember(
+        members
+          .map(([accountId]): string => accountId.toString())
+          .some((accountId): boolean => allAccounts.includes(accountId))
+      );
+    }
+  }, [allAccounts, members]);
+
   return (
     <div className={className}>
-      <Propose />
+      <Propose isMember={isMember} />
       {motions?.length
         ? (
           <Table>
             <Table.Body>
               {motions?.map((motion: DerivedCollectiveProposal): React.ReactNode => (
                 <Motion
+                  isMember={isMember}
                   key={motion.hash.toHex()}
                   motion={motion}
                 />

packages/app-treasury/src/Overview/Proposal.tsx

@@ -14,12 +14,12 @@ import translate from '../translate';
 import Voting from './Voting';
 
 interface Props extends I18nProps {
-  isApproved?: boolean;
+  isMember: boolean;
   proposal: DerivedTreasuryProposal;
   onRespond: () => void;
 }
 
-function ProposalDisplay ({ className, proposal: { council, id, proposal }, t }: Props): React.ReactElement<Props> | null {
+function ProposalDisplay ({ className, isMember, proposal: { council, id, proposal }, t }: Props): React.ReactElement<Props> | null {
   return (
     <tr className={className}>
       <td className='number top'>
@@ -47,7 +47,10 @@ function ProposalDisplay ({ className, proposal: { council, id, proposal }, t }:
         />
       </td>
       <td className='top number together'>
-        <Voting proposals={council} />
+        <Voting
+          isDisabled={!isMember}
+          proposals={council}
+        />
       </td>
     </tr>
   );

packages/app-treasury/src/Overview/Proposals.tsx

@@ -5,10 +5,12 @@
 
 import { DerivedTreasuryProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
+import { AccountId, Balance } from '@polkadot/types/interfaces';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Table } from '@polkadot/react-components';
+import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
 
 import Proposal from './Proposal';
 import translate from '../translate';
@@ -19,7 +21,22 @@ interface Props extends I18nProps {
 }
 
 function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const members = useCall<[AccountId, Balance][]>(api.query.electionsPhragmen?.members || api.query.elections.members, []);
+  const [isMember, setIsMember] = useState(false);
   const history = useHistory();
+
+  useEffect((): void => {
+    if (allAccounts && members) {
+      setIsMember(
+        members
+          .map(([accountId]): string => accountId.toString())
+          .some((accountId): boolean => allAccounts.includes(accountId))
+      );
+    }
+  }, [allAccounts, members]);
+
   const _onRespond = (): void => {
     history.push('/council/motions');
   };
@@ -34,7 +51,7 @@ function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.
         <Table.Body>
           {proposals?.map((proposal): React.ReactNode => (
             <Proposal
-              isApproved={isApprovals}
+              isMember={isMember}
               onRespond={_onRespond}
               proposal={proposal}
               key={proposal.id.toString()}

packages/app-treasury/src/Overview/Voting.tsx

@@ -14,6 +14,7 @@ import { isBoolean } from '@polkadot/util';
 import translate from '../translate';
 
 interface Props extends I18nProps {
+  isDisabled?: boolean;
   proposals: DerivedCollectiveProposal[];
 }
 
@@ -22,7 +23,7 @@ interface Option {
   value: number;
 }
 
-function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
+function Voting ({ isDisabled, proposals, t }: Props): React.ReactElement<Props> | null {
   const { hasAccounts } = useAccounts();
   const [councilOpts, setCouncilOpts] = useState<Option[]>([]);
   const [councilOptId, setCouncilOptId] = useState<number>(0);
@@ -99,6 +100,7 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
       )}
       <Button
         icon='check'
+        isDisabled={isDisabled}
         isPrimary
         label={t('Vote')}
         onClick={_toggleVoting}

packages/react-components/src/Voting.tsx

@@ -23,6 +23,7 @@ interface Props extends I18nProps, TxModalProps {
   hash?: string;
   idNumber: BN | number;
   isCouncil: boolean;
+  isDisabled?: boolean;
   proposal?: Proposal | null;
   preContent?: React.ReactNode;
 }
@@ -97,11 +98,12 @@ class Voting extends TxModal<Props, State> {
   }
 
   protected renderTrigger = (): React.ReactNode => {
-    const { t } = this.props;
+    const { isDisabled, t } = this.props;
 
     return (
       <div className='ui--Row-buttons'>
         <Button
+          isDisabled={isDisabled}
           isPrimary
           label={t('Vote')}
           icon='check'