Additional new page summaries (#7952)

packages/page-alliance/src/Members/index.tsx

@@ -3,14 +3,14 @@
 
 import type { Member as MemberType, Rule, Unscrupulous } from '../types';
 
-import React from 'react';
+import React, { useRef } from 'react';
 
-import { Button } from '@polkadot/react-components';
+import { Button, Table } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Join from './Join';
-import Members from './Members';
+import Member from './Member';
 import Summary from './Summary';
 
 interface Props {
@@ -27,6 +27,13 @@ function Overview ({ className, members, prime, rule, unscrupulous, voters }: Pr
   const { t } = useTranslation();
   const [isJoinOpen, toggleJoin] = useToggle();
 
+  const hdrRef = useRef([
+    [t<string>('members'), 'start', 2],
+    [t<string>('deposit'), 'number'],
+    [t<string>('role'), 'number'],
+    []
+  ]);
+
   return (
     <div className={className}>
       <Summary
@@ -48,11 +55,19 @@ function Overview ({ className, members, prime, rule, unscrupulous, voters }: Pr
           />
         )}
       </Button.Group>
-      <Members
-        members={members}
-        prime={prime}
-        voters={voters}
-      />
+      <Table
+        empty={members && t<string>('No members')}
+        header={hdrRef.current}
+      >
+        {members && members.map((m) => (
+          <Member
+            info={m}
+            isPrime={prime === m.accountId}
+            isVoter={!!voters && voters.includes(m.accountId)}
+            key={m.accountId}
+          />
+        ))}
+      </Table>
     </div>
   );
 }

packages/page-alliance/src/Overview/Members.tsx

@@ -1,49 +0,0 @@
-// Copyright 2017-2022 @polkadot/app-alliance authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { Member as MemberType } from '../types';
-
-import React, { useRef } from 'react';
-
-import { Table } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-import Member from './Member';
-
-interface Props {
-  className?: string;
-  members?: MemberType[];
-  prime?: string | null;
-  voters?: string[];
-}
-
-function Members ({ className, members, prime, voters }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  const hdrRef = useRef([
-    [t<string>('members'), 'start', 2],
-    [t<string>('deposit'), 'number'],
-    [t<string>('role'), 'number'],
-    []
-  ]);
-
-  return (
-    <div className={className}>
-      <Table
-        empty={members && t<string>('No members')}
-        header={hdrRef.current}
-      >
-        {members && members.map((m) => (
-          <Member
-            info={m}
-            isPrime={prime === m.accountId}
-            isVoter={!!voters && voters.includes(m.accountId)}
-            key={m.accountId}
-          />
-        ))}
-      </Table>
-    </div>
-  );
-}
-
-export default React.memo(Members);

packages/page-alliance/src/index.tsx

@@ -11,7 +11,7 @@ import { Tabs } from '@polkadot/react-components';
 import { useApi, useCall, useCollectiveMembers } from '@polkadot/react-hooks';
 
 import Announcements from './Announcements';
-import Overview from './Overview';
+import Members from './Members';
 import { useTranslation } from './translate';
 import Unscrupulous from './Unscrupulous';
 import useAnnoucements from './useAnnoucements';
@@ -88,7 +88,7 @@ function AllianceApp ({ basePath, className }: Props): React.ReactElement<Props>
           <Unscrupulous unscrupulous={unscrupulous} />
         </Route>
         <Route>
-          <Overview
+          <Members
             isVoter={isVoter}
             members={members}
             prime={prime}

packages/page-preimages/src/Preimages/Summary.tsx

@@ -0,0 +1,31 @@
+// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
+import { formatNumber } from '@polkadot/util';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  className?: string;
+  hashes?: string[];
+}
+
+function Summary ({ className, hashes }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <SummaryBox className={className}>
+      <CardSummary label={t<string>('images')}>
+        {hashes === undefined
+          ? <Spinner noLabel />
+          : formatNumber(hashes.length)
+        }
+      </CardSummary>
+    </SummaryBox>
+  );
+}
+
+export default React.memo(Summary);

packages/page-preimages/src/Preimages/index.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from '../translate';
 import usePreimages from '../usePreimages';
 import Add from './Add';
 import Preimage from './Preimage';
+import Summary from './Summary';
 
 interface Props {
   className?: string;
@@ -31,6 +32,7 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
 
   return (
     <div className={className}>
+      <Summary hashes={hashes} />
       <Button.Group>
         <Add />
       </Button.Group>

packages/page-ranked/src/Members/Summary.tsx

@@ -20,7 +20,7 @@ function Summary ({ className, members }: Props): React.ReactElement<Props> {
 
   return (
     <SummaryBox className={className}>
-      <CardSummary label={t<string>('total')}>
+      <CardSummary label={t<string>('members')}>
         {members === undefined
           ? <Spinner noLabel />
           : formatNumber(members.length)

packages/page-referenda/src/Referenda/Summary.tsx

@@ -15,17 +15,25 @@ interface Props {
   summary: SummaryType;
 }
 
-function Summary ({ className, summary: { refCount } }: Props): React.ReactElement<Props> {
+function Summary ({ className, summary: { refActive, refCount } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <SummaryBox className={className}>
-      <CardSummary label={t<string>('total')}>
-        {refCount === undefined
-          ? <Spinner noLabel />
-          : formatNumber(refCount)
-        }
-      </CardSummary>
+      <section>
+        <CardSummary label={t<string>('active')}>
+          {refActive === undefined
+            ? <Spinner noLabel />
+            : formatNumber(refActive)
+          }
+        </CardSummary>
+        <CardSummary label={t<string>('total')}>
+          {refCount === undefined
+            ? <Spinner noLabel />
+            : formatNumber(refCount)
+          }
+        </CardSummary>
+      </section>
     </SummaryBox>
   );
 }

packages/page-referenda/src/Referenda/index.tsx

@@ -25,7 +25,7 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props):
   const { t } = useTranslation();
   const { allAccounts } = useAccounts();
   const referenda = useReferenda(palletReferenda);
-  const summary = useSummary(palletReferenda);
+  const summary = useSummary(palletReferenda, referenda);
 
   const isMember = useMemo(
     () => !members || allAccounts.some((a) => members.includes(a)),

packages/page-referenda/src/types.ts

@@ -25,5 +25,6 @@ export interface ReferendumProps {
 
 export interface Summary {
   deciding?: BN;
+  refActive?: number;
   refCount?: BN;
 }

packages/page-referenda/src/useSummary.ts

@@ -2,20 +2,24 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { u32 } from '@polkadot/types';
-import type { PalletReferenda, Summary } from './types';
+import type { PalletReferenda, Referendum, Summary } from './types';
 
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 // TODO keep track of all tracks to get the number of deciding
-function useSummaryImpl (palletReferenda: PalletReferenda): Summary {
+function useSummaryImpl (palletReferenda: PalletReferenda, referenda?: Referendum[] | undefined): Summary {
   const { api } = useApi();
   const refCount = useCall<u32>(api.query[palletReferenda].referendumCount);
+  const refActive = useMemo(
+    () => referenda && referenda.length,
+    [referenda]
+  );
 
   return useMemo(
-    () => ({ refCount }),
-    [refCount]
+    () => ({ refActive, refCount }),
+    [refActive, refCount]
   );
 }
 

packages/page-whitelist/src/Hashes/Summary.tsx

@@ -0,0 +1,31 @@
+// Copyright 2017-2022 @polkadot/app-whitelist authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
+import { formatNumber } from '@polkadot/util';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  className?: string;
+  hashes?: string[];
+}
+
+function Summary ({ className, hashes }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <SummaryBox className={className}>
+      <CardSummary label={t<string>('hashes')}>
+        {hashes === undefined
+          ? <Spinner noLabel />
+          : formatNumber(hashes.length)
+        }
+      </CardSummary>
+    </SummaryBox>
+  );
+}
+
+export default React.memo(Summary);

packages/page-whitelist/src/Hashes/index.tsx

@@ -10,6 +10,7 @@ import { Table } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import useHashes from '../useHashes';
 import Hash from './Hash';
+import Summary from './Summary';
 
 interface Props {
   className?: string;
@@ -27,6 +28,7 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
 
   return (
     <div className={className}>
+      <Summary hashes={hashes} />
       <Table
         className={className}
         empty={hashes && t<string>('No call hashes found')}