Add referenda counters (#7947)

packages/apps-routing/src/referenda.ts

@@ -5,6 +5,7 @@ import type { TFunction } from 'i18next';
 import type { Route } from './types';
 
 import Component from '@polkadot/app-referenda';
+import useCounter from '@polkadot/app-referenda/useCounter';
 
 export default function create (t: TFunction): Route {
   return {
@@ -18,6 +19,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'person-booth',
     name: 'referenda',
-    text: t('nav.referenda', 'Referenda', { ns: 'apps-routing' })
+    text: t('nav.referenda', 'Referenda', { ns: 'apps-routing' }),
+    useCounter
   };
 }

packages/page-ranked/src/App.tsx

@@ -3,7 +3,7 @@
 
 import type { PalletColl, PalletPoll } from './types';
 
-import React, { useRef } from 'react';
+import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 
 import Referenda from '@polkadot/app-referenda/Referenda';
@@ -12,6 +12,7 @@ import { Tabs } from '@polkadot/react-components';
 import Members from './Members';
 import { useTranslation } from './translate';
 import useMembers from './useMembers';
+import useRefCounter from './useRefCounter';
 
 interface Props {
   basePath: string;
@@ -23,24 +24,28 @@ interface Props {
 function App ({ basePath, className, palletColl, palletPoll }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const members = useMembers(palletColl);
+  const refCount = useRefCounter(palletPoll);
 
-  const tabsRef = useRef([
-    {
-      isRoot: true,
-      name: 'overview',
-      text: t<string>('Overview')
-    },
-    {
-      name: 'referenda',
-      text: t<string>('Referenda')
-    }
-  ]);
+  const tabs = useMemo(
+    () => [
+      {
+        isRoot: true,
+        name: 'overview',
+        text: t<string>('Overview')
+      },
+      {
+        name: 'referenda',
+        text: t<string>('Referenda ({{count}})', { replace: { count: refCount || 0 } })
+      }
+    ],
+    [refCount, t]
+  );
 
   return (
     <main className={className}>
       <Tabs
         basePath={basePath}
-        items={tabsRef.current}
+        items={tabs}
       />
       <Switch>
         <Route path={`${basePath}/referenda`}>

packages/page-ranked/src/useRefCounter.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2022 @polkadot/app-ranked authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PalletPoll } from './types';
+
+import { useCounterNamed } from '@polkadot/app-referenda/useCounter';
+import { createNamedHook } from '@polkadot/react-hooks';
+
+function useRefCounterImpl (collective: PalletPoll): number {
+  return useCounterNamed(collective);
+}
+
+export default createNamedHook('useRefCounter', useRefCounterImpl);

packages/page-referenda/src/useCounter.ts

@@ -0,0 +1,27 @@
+// Copyright 2017-2022 @polkadot/app-referenda authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PalletReferenda } from './types';
+
+import { useMemo } from 'react';
+
+import { createNamedHook } from '@polkadot/react-hooks';
+
+import useReferenda from './useReferenda';
+
+export function useCounterNamed (palletReferenda: PalletReferenda): number {
+  const refs = useReferenda(palletReferenda);
+
+  return useMemo(
+    () => refs
+      ? refs.filter(({ info }) => info.isOngoing).length
+      : 0,
+    [refs]
+  );
+}
+
+function useCounterImpl (): number {
+  return useCounterNamed('referenda');
+}
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-referenda/src/useReferenda.ts

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-import useIds from './useIds';
+import useReferendaIds from './useReferendaIds';
 
 const ORDER = <const> ['Ongoing', 'Approved', 'Rejected', 'Cancelled', 'Killed', 'TimedOut'];
 
@@ -64,7 +64,7 @@ const OPT_MULTI = {
 
 function useReferendaImpl (palletReferenda: PalletReferenda): Referendum[] | undefined {
   const { api } = useApi();
-  const ids = useIds(palletReferenda);
+  const ids = useReferendaIds(palletReferenda);
   const referenda = useCall(ids && ids.length !== 0 && api.query[palletReferenda].referendumInfoFor.multi, [ids], OPT_MULTI);
 
   return useMemo(

packages/page-referenda/src/useReferendaIds.ts

@@ -29,7 +29,7 @@ function filter (records: EventRecord[]): Changes<u32> {
   return { added, removed };
 }
 
-function useIdsImpl (palletReferenda: PalletReferenda): BN[] | undefined {
+function useReferendaIdsImpl (palletReferenda: PalletReferenda): BN[] | undefined {
   const { api } = useApi();
   const startValue = useMapKeys(api.query[palletReferenda].referendumInfoFor, OPT_ID);
 
@@ -38,4 +38,4 @@ function useIdsImpl (palletReferenda: PalletReferenda): BN[] | undefined {
   ], filter, startValue);
 }
 
-export default createNamedHook('useIds', useIdsImpl);
+export default createNamedHook('useReferendaIds', useReferendaIdsImpl);