Add motion count

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-democracy authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -7,7 +6,6 @@ import { Hash } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
 import { CardGrid } from '@polkadot/react-components';
 
 import Motion from './Motion';
@@ -15,10 +13,10 @@ import Propose from './Propose';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  council_proposals?: Hash[];
+  motions?: Hash[];
 }
 
-function Proposals ({ council_proposals, t }: Props): React.ReactElement<Props> {
+function Proposals ({ motions, t }: Props): React.ReactElement<Props> {
   return (
     <CardGrid
       emptyText={t('No council motions')}
@@ -27,7 +25,7 @@ function Proposals ({ council_proposals, t }: Props): React.ReactElement<Props>
         <Propose />
       }
     >
-      {council_proposals && council_proposals.map((hash: Hash): React.ReactNode => (
+      {motions?.map((hash: Hash): React.ReactNode => (
         <Motion
           hash={hash.toHex()}
           key={hash.toHex()}
@@ -37,8 +35,4 @@ function Proposals ({ council_proposals, t }: Props): React.ReactElement<Props>
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    'query.council.proposals'
-  )(Proposals)
-);
+export default translate(Proposals);

packages/app-council/src/index.tsx

@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { Hash } from '@polkadot/types/interfaces';
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -9,6 +10,7 @@ import { Route, Switch } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { Tabs } from '@polkadot/react-components';
+import { useApi, trackStream } from '@polkadot/react-hooks';
 
 import Overview from './Overview';
 import Motions from './Motions';
@@ -17,7 +19,9 @@ import translate from './translate';
 interface Props extends AppProps, BareProps, I18nProps {}
 
 function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
   const { pathname } = useLocation();
+  const motions = trackStream<Hash[]>(api.query.council.proposals, []);
 
   return (
     <main className={className}>
@@ -36,13 +40,15 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
             },
             {
               name: 'motions',
-              text: t('Motions')
+              text: t('Motions ({{count}})', { replace: { count: motions?.length || 0 } })
             }
           ]}
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/motions`} component={Motions} />
+        <Route path={`${basePath}/motions`}>
+          <Motions motions={motions} />
+        </Route>
       </Switch>
       <Overview className={[basePath, `${basePath}/candidates`].includes(pathname) ? '' : 'council--hidden'} />
     </main>