From ccfee50c2f2602a63682a0aa23aa2692c0ea04e8 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sun, 23 Aug 2020 15:08:29 +0200 Subject: [PATCH] Split democracy dispatch into tab (#3486) --- .../{Overview => Execute}/DispatchEntry.tsx | 4 +-- .../{Overview => Execute}/DispatchQueue.tsx | 0 .../src/{Overview => Execute}/Scheduled.tsx | 0 .../src/{Overview => Execute}/Scheduler.tsx | 0 packages/page-democracy/src/Execute/index.tsx | 28 +++++++++++++++++++ .../src/{Overview => Execute}/types.ts | 0 .../page-democracy/src/Execute/useCounter.ts | 12 ++++++++ .../page-democracy/src/Overview/index.tsx | 13 +-------- packages/page-democracy/src/index.tsx | 21 ++++++++++---- packages/react-query/src/BlockToTime.tsx | 17 +++++------ 10 files changed, 68 insertions(+), 27 deletions(-) rename packages/page-democracy/src/{Overview => Execute}/DispatchEntry.tsx (93%) rename packages/page-democracy/src/{Overview => Execute}/DispatchQueue.tsx (100%) rename packages/page-democracy/src/{Overview => Execute}/Scheduled.tsx (100%) rename packages/page-democracy/src/{Overview => Execute}/Scheduler.tsx (100%) create mode 100644 packages/page-democracy/src/Execute/index.tsx rename packages/page-democracy/src/{Overview => Execute}/types.ts (100%) create mode 100644 packages/page-democracy/src/Execute/useCounter.ts diff --git a/packages/page-democracy/src/Overview/DispatchEntry.tsx b/packages/page-democracy/src/Execute/DispatchEntry.tsx similarity index 93% rename from packages/page-democracy/src/Overview/DispatchEntry.tsx rename to packages/page-democracy/src/Execute/DispatchEntry.tsx index 309d3a321a..f79c728448 100644 --- a/packages/page-democracy/src/Overview/DispatchEntry.tsx +++ b/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; diff --git a/packages/page-democracy/src/Overview/DispatchQueue.tsx b/packages/page-democracy/src/Execute/DispatchQueue.tsx similarity index 100% rename from packages/page-democracy/src/Overview/DispatchQueue.tsx rename to packages/page-democracy/src/Execute/DispatchQueue.tsx diff --git a/packages/page-democracy/src/Overview/Scheduled.tsx b/packages/page-democracy/src/Execute/Scheduled.tsx similarity index 100% rename from packages/page-democracy/src/Overview/Scheduled.tsx rename to packages/page-democracy/src/Execute/Scheduled.tsx diff --git a/packages/page-democracy/src/Overview/Scheduler.tsx b/packages/page-democracy/src/Execute/Scheduler.tsx similarity index 100% rename from packages/page-democracy/src/Overview/Scheduler.tsx rename to packages/page-democracy/src/Execute/Scheduler.tsx diff --git a/packages/page-democracy/src/Execute/index.tsx b/packages/page-democracy/src/Execute/index.tsx new file mode 100644 index 0000000000..5c1bb4e6d4 --- /dev/null +++ b/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 { + const { api } = useApi(); + + return ( +
+ + {api.query.scheduler && ( + + )} +
+ ); +} + +export default React.memo(Execute); diff --git a/packages/page-democracy/src/Overview/types.ts b/packages/page-democracy/src/Execute/types.ts similarity index 100% rename from packages/page-democracy/src/Overview/types.ts rename to packages/page-democracy/src/Execute/types.ts diff --git a/packages/page-democracy/src/Execute/useCounter.ts b/packages/page-democracy/src/Execute/useCounter.ts new file mode 100644 index 0000000000..4a91a285fc --- /dev/null +++ b/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(api.derive.democracy.dispatchQueue); + + return queued?.length || 0; +} diff --git a/packages/page-democracy/src/Overview/index.tsx b/packages/page-democracy/src/Overview/index.tsx index e2193ac7c3..46e75298f9 100644 --- a/packages/page-democracy/src/Overview/index.tsx +++ b/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 { )} - - {api.query.scheduler && ( - - )} ); } -export default React.memo(styled(Overview)` - .proposalSection { - margin-bottom: 1.5rem; - } -`); +export default React.memo(Overview); diff --git a/packages/page-democracy/src/index.tsx b/packages/page-democracy/src/index.tsx index d97ee89ec8..23aab890a1 100644 --- a/packages/page-democracy/src/index.tsx +++ b/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 { const { t } = useTranslation(); + const dispatchCount = useDispatchCounter(); - const itemsRef = useRef([ + const items = useMemo(() => [ { isRoot: true, name: 'overview', text: t('Democracy overview') + }, + { + count: dispatchCount, + name: 'dispatch', + text: t('Dispatch') } - ]); + ], [dispatchCount, t]); return (
@@ -33,11 +41,14 @@ function DemocracyApp ({ basePath }: Props): React.ReactElement {
- + + + +
); diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx index 6d6dffd91d..d09f2dbeba 100644 --- a/packages/react-query/src/BlockToTime.tsx +++ b/packages/react-query/src/BlockToTime.tsx @@ -24,14 +24,11 @@ function BlockToTime ({ blocks, children, className = '', isInline, label }: Pro return (
- {label || ''}{text.split(' ').map((v, index) => index % 2 === 0 - ? {` ${v} `} - : ( - {v} - ) + {label || ''}{text.split(' ').map((v, index) => + {v} )}{children}
); @@ -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; }