Split democracy dispatch into tab (#3486)

packages/page-democracy/src/Execute/DispatchEntry.tsx

@@ -11,8 +11,8 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
-import ProposalCell from './ProposalCell';
-import PreImageButton from './PreImageButton';
+import ProposalCell from '../Overview/ProposalCell';
+import PreImageButton from '../Overview/PreImageButton';
 
 interface Props {
   value: DeriveDispatch;

packages/page-democracy/src/Execute/index.tsx

@@ -0,0 +1,28 @@
+// Copyright 2017-2020 @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.
+
+import React from 'react';
+import { useApi } from '@polkadot/react-hooks';
+
+import DispatchQueue from './DispatchQueue';
+import Scheduler from './Scheduler';
+
+interface Props {
+  className?: string;
+}
+
+function Execute ({ className }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+
+  return (
+    <div className={className}>
+      <DispatchQueue />
+      {api.query.scheduler && (
+        <Scheduler />
+      )}
+    </div>
+  );
+}
+
+export default React.memo(Execute);

packages/page-democracy/src/Execute/useCounter.ts

@@ -0,0 +1,12 @@
+// Copyright 2017-2020 @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.
+
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+export default function useCounter (): number {
+  const { api } = useApi();
+  const queued = useCall<unknown[]>(api.derive.democracy.dispatchQueue);
+
+  return queued?.length || 0;
+}

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

@@ -5,16 +5,13 @@
 import { DeriveReferendumExt } from '@polkadot/api-derive/types';
 
 import React from 'react';
-import styled from 'styled-components';
 import { Button } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
-import DispatchQueue from './DispatchQueue';
 import Externals from './Externals';
 import Proposals from './Proposals';
 import Referendums from './Referendums';
-import Scheduler from './Scheduler';
 import Summary from './Summary';
 import PreImage from './PreImage';
 import Propose from './Propose';
@@ -53,17 +50,9 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
       )}
       <Referendums referendums={referendums} />
       <Proposals />
-      <DispatchQueue />
       <Externals />
-      {api.query.scheduler && (
-        <Scheduler />
-      )}
     </div>
   );
 }
 
-export default React.memo(styled(Overview)`
-  .proposalSection {
-    margin-bottom: 1.5rem;
-  }
-`);
+export default React.memo(Overview);

packages/page-democracy/src/index.tsx

@@ -2,11 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useRef } from 'react';
+import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
 
 import basicMd from './md/basic.md';
+import Execute from './Execute';
+import useDispatchCounter from './Execute/useCounter';
 import Overview from './Overview';
 import { useTranslation } from './translate';
 
@@ -18,14 +20,20 @@ interface Props {
 
 function DemocracyApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const dispatchCount = useDispatchCounter();
 
-  const itemsRef = useRef([
+  const items = useMemo(() => [
     {
       isRoot: true,
       name: 'overview',
       text: t<string>('Democracy overview')
+    },
+    {
+      count: dispatchCount,
+      name: 'dispatch',
+      text: t<string>('Dispatch')
     }
-  ]);
+  ], [dispatchCount, t]);
 
   return (
     <main className='democracy--App'>
@@ -33,11 +41,14 @@ function DemocracyApp ({ basePath }: Props): React.ReactElement<Props> {
       <header>
         <Tabs
           basePath={basePath}
-          items={itemsRef.current}
+          items={items}
         />
       </header>
       <Switch>
-        <Route component={Overview} />
+        <Route path={`${basePath}/dispatch`}>
+          <Execute />
+        </Route>
+        <Route><Overview /></Route>
       </Switch>
     </main>
   );

packages/react-query/src/BlockToTime.tsx

@@ -24,14 +24,11 @@ function BlockToTime ({ blocks, children, className = '', isInline, label }: Pro
 
   return (
     <div className={`${className}${isInline ? ' isInline' : ''}`}>
-      {label || ''}{text.split(' ').map((v, index) => index % 2 === 0
-        ? <span key={index}>{` ${v} `}</span>
-        : (
-          <span
-            className='timeUnits'
-            key={index}
-          >{v}</span>
-        )
+      {label || ''}{text.split(' ').map((v, index) =>
+        <span
+          className={index % 2 ? 'timeUnits' : undefined}
+          key={index}
+        >{v}</span>
       )}{children}
     </div>
   );
@@ -42,6 +39,10 @@ export default React.memo(styled(BlockToTime)`
     display: inline-block;
   }
 
+  span+span {
+    padding-left: 0.25em;
+  }
+
   span.timeUnits {
     font-size: 0.85em;
   }