Show society suspended info (#4862)

packages/page-society/src/Candidates/index.tsx

@@ -18,7 +18,7 @@ interface Props {
   ownMembers: string[];
 }
 
-function Candidates ({ allMembers, className = '', isMember, ownMembers }: Props): React.ReactElement<Props> {
+function Candidates ({ allMembers, className, isMember, ownMembers }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isBidOpen, toggleBidOpen] = useToggle();
 

packages/page-society/src/Overview/Member.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveSocietyMember } from '@polkadot/api-derive/types';
+import type { bool } from '@polkadot/types';
 
 import React, { useEffect, useRef, useState } from 'react';
 
 import { AddressSmall, Icon, Modal, Tag } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
+import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import drawCanary from '../draw/canary';
 import { useTranslation } from '../translate';
@@ -25,6 +26,7 @@ const CANVAS_STYLE = {
 function Member ({ className = '', isHead, value: { accountId, strikes } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+  const suspended = useCall<bool>(api.query.society.suspendedMembers, [accountId]);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [canInk] = useState(() => api.genesisHash.eq('0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe'));
   const [isInkShowing, toggleInk] = useToggle();
@@ -52,6 +54,12 @@ function Member ({ className = '', isHead, value: { accountId, strikes } }: Prop
             label={t<string>('society head')}
           />
         )}
+        {suspended?.isTrue && (
+          <Tag
+            color='yellow'
+            label={t<string>('suspended')}
+          />
+        )}
       </td>
       <td className='all'>&nbsp;</td>
       <td className='number'>

packages/page-society/src/Overview/index.tsx

@@ -6,22 +6,18 @@ import type { DeriveSociety } from '@polkadot/api-derive/types';
 import React from 'react';
 import styled from 'styled-components';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
-
 import Defender from './Defender';
 import Members from './Members';
 import Summary from './Summary';
 
 interface Props {
   className?: string;
+  info?: DeriveSociety;
   isMember: boolean;
   ownMembers: string[];
 }
 
-function Overview ({ className, isMember, ownMembers }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const info = useCall<DeriveSociety>(api.derive.society.info);
-
+function Overview ({ className, info, isMember, ownMembers }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Summary info={info} />

packages/page-society/src/Suspended/Suspension.tsx

@@ -0,0 +1,24 @@
+// Copyright 2017-2021 @polkadot/app-society authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { AccountId } from '@polkadot/types/interfaces';
+
+import React from 'react';
+
+import { AddressSmall } from '@polkadot/react-components';
+
+interface Props {
+  value: AccountId;
+}
+
+function Suspension ({ value }: Props): React.ReactElement<Props> {
+  return (
+    <tr>
+      <td className='address all'>
+        <AddressSmall value={value} />
+      </td>
+    </tr>
+  );
+}
+
+export default React.memo(Suspension);

packages/page-society/src/Suspended/index.tsx

@@ -0,0 +1,72 @@
+// Copyright 2017-2021 @polkadot/app-society authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StorageKey } from '@polkadot/types';
+import type { AccountId } from '@polkadot/types/interfaces';
+
+import React, { useRef } from 'react';
+
+import { Table } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import Suspension from './Suspension';
+
+interface Props {
+  className?: string;
+}
+
+const optExtract = {
+  transform: (keys: StorageKey<[AccountId]>[]): AccountId[] =>
+    keys
+      .map(({ args: [accountId] }) => accountId)
+      .filter((a) => !!a)
+};
+
+function Suspended ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const candidates = useCall<AccountId[]>(api.query.society.suspendedCandidates.keys, undefined, optExtract);
+  const members = useCall<AccountId[]>(api.query.society.suspendedMembers.keys, undefined, optExtract);
+
+  const headerRefC = useRef([
+    [t('candidates'), 'start']
+  ]);
+
+  const headerRefM = useRef([
+    [t('members'), 'start']
+  ]);
+
+  console.log(JSON.stringify({ candidates, members }, null, 2));
+
+  return (
+    <div className={className}>
+      <Table
+        className={className}
+        empty={members && t<string>('No suspended members')}
+        header={headerRefM.current}
+      >
+        {members && members.map((accountId): React.ReactNode => (
+          <Suspension
+            key={accountId.toString()}
+            value={accountId}
+          />
+        ))}
+      </Table>
+      <Table
+        className={className}
+        empty={candidates && t<string>('No suspended candidates')}
+        header={headerRefC.current}
+      >
+        {candidates && candidates.map((accountId): React.ReactNode => (
+          <Suspension
+            key={accountId.toString()}
+            value={accountId}
+          />
+        ))}
+      </Table>
+    </div>
+  );
+}
+
+export default React.memo(Suspended);

packages/page-society/src/index.tsx

@@ -1,13 +1,17 @@
 // Copyright 2017-2021 @polkadot/app-society authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { DeriveSociety } from '@polkadot/api-derive/types';
+
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 
 import { Tabs } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Candidates from './Candidates';
 import Overview from './Overview';
+import Suspended from './Suspended';
 import { useTranslation } from './translate';
 import useCounter from './useCounter';
 import useMembers from './useMembers';
@@ -21,8 +25,10 @@ export { useCounter };
 
 function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
   const candidateCount = useCounter();
   const { allMembers, isMember, ownMembers } = useMembers();
+  const info = useCall<DeriveSociety>(api.derive.society.info);
 
   const items = useMemo(() => [
     {
@@ -34,6 +40,10 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
       count: candidateCount,
       name: 'candidates',
       text: t<string>('Candidates')
+    },
+    {
+      name: 'suspended',
+      text: t<string>('Suspended')
     }
   ], [candidateCount, t]);
 
@@ -53,8 +63,12 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
             ownMembers={ownMembers}
           />
         </Route>
+        <Route path={`${basePath}/suspended`}>
+          <Suspended />
+        </Route>
         <Route>
           <Overview
+            info={info}
             isMember={isMember}
             ownMembers={ownMembers}
           />