From ef6ae9d1eda2288596253a5bb2a1dc6b466801ed Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 21 Jan 2019 00:39:42 +0100 Subject: [PATCH] Remove extrinsic list duplication (#625) --- .../src/BlockByHash/BlockByHash.tsx | 76 ++----------------- .../src/BlockByHash/Extrinsics.tsx} | 31 ++++---- packages/app-nodeinfo/src/index.tsx | 43 ++++++----- 3 files changed, 47 insertions(+), 103 deletions(-) rename packages/{app-nodeinfo/src/Pending.tsx => app-explorer/src/BlockByHash/Extrinsics.tsx} (73%) diff --git a/packages/app-explorer/src/BlockByHash/BlockByHash.tsx b/packages/app-explorer/src/BlockByHash/BlockByHash.tsx index e78e011e37..f5276c8fff 100644 --- a/packages/app-explorer/src/BlockByHash/BlockByHash.tsx +++ b/packages/app-explorer/src/BlockByHash/BlockByHash.tsx @@ -6,15 +6,14 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { ApiProps } from '@polkadot/ui-api/types'; import React from 'react'; -import { AddressMini, Call } from '@polkadot/ui-app/index'; -import { EventRecord, Extrinsic, Method, SignedBlock } from '@polkadot/types'; +import { EventRecord, SignedBlock } from '@polkadot/types'; import { HeaderExtended } from '@polkadot/types/Header'; import { withCall, withMulti } from '@polkadot/ui-api/index'; -import { numberFormat } from '@polkadot/ui-reactive/util/index'; import BlockHeader from '../BlockHeader'; import translate from '../translate'; import Events from './Events'; +import Extrinsics from './Extrinsics'; import Logs from './Logs'; type Props = ApiProps & I18nProps & { @@ -39,7 +38,10 @@ class BlockByHash extends React.PureComponent { withExtrinsics /> , - this.renderExtrinsics(), + , { /> ]; } - - private renderExtrinsics () { - const { chain_getBlock, t } = this.props; - - if (!chain_getBlock) { - return null; - } - - const { block: { extrinsics } } = chain_getBlock; - - return ( -
-

{t('extrinsics')}

-
- {extrinsics.map(this.renderExtrinsic)} -
-
- ); - } - - // FIXME This is _very_ similar to what we have in democracy/Item - private renderExtrinsic = (extrinsic: Extrinsic, index: number) => { - const { value } = this.props; - const { meta, method, section } = Method.findFunction(extrinsic.callIndex); - - return ( -
-
-
-

- #{numberFormat(index)}: {section}.{method} -

-
{ - meta && meta.documentation && meta.documentation.length - ? meta.documentation.map((doc) => doc.toString()).join(' ') - : '' - }
- {this.renderSigner(extrinsic)} -
- -
-
- ); - } - - private renderSigner (extrinsic: Extrinsic) { - const { t } = this.props; - - if (!extrinsic.signature.isSigned) { - return null; - } - - return ( -
-
- -
-
- {t('index')} {numberFormat(extrinsic.signature.nonce)} -
-
- ); - } } export default withMulti( diff --git a/packages/app-nodeinfo/src/Pending.tsx b/packages/app-explorer/src/BlockByHash/Extrinsics.tsx similarity index 73% rename from packages/app-nodeinfo/src/Pending.tsx rename to packages/app-explorer/src/BlockByHash/Extrinsics.tsx index 7fae970600..e0d7bfb1d0 100644 --- a/packages/app-nodeinfo/src/Pending.tsx +++ b/packages/app-explorer/src/BlockByHash/Extrinsics.tsx @@ -1,4 +1,4 @@ -// Copyright 2017-2019 @polkadot/app-nodeinfo authors & contributors +// Copyright 2017-2019 @polkadot/app-explorer authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -9,30 +9,29 @@ import { AddressMini, Call } from '@polkadot/ui-app/index'; import { Extrinsic, Method } from '@polkadot/types'; import { numberFormat } from '@polkadot/ui-reactive/util/index'; -import translate from './translate'; +import translate from '../translate'; type Props = I18nProps & { - extrinsics?: Array | null + label?: React.ReactNode, + value?: Array | null }; -// FIXME - this is basically a copy-and paste of what happens in app-explorer BlockByHash -// make rendering extrinsics a proper component -class Pending extends React.PureComponent { +class Extrinsics extends React.PureComponent { render () { - const { t } = this.props; + const { label, t } = this.props; return ( -
-

{t('pending extrinsics')}

- {this.renderExtrinsics()} +
+

{label || t('extrinsics')}

+ {this.renderContent()}
); } - private renderExtrinsics () { - const { extrinsics, t } = this.props; + private renderContent () { + const { t, value } = this.props; - if (!extrinsics || !extrinsics.length) { + if (!value || !value.length) { return (
{t('no pending extrinsics are in the queue')} @@ -42,12 +41,12 @@ class Pending extends React.PureComponent { return (
- {extrinsics.map(this.renderExtrinsic)} + {value.map(this.renderExtrinsic)}
); } - // FIXME This is _very_ similar to what we have in exporer + // FIXME This is _very_ similar to what we have in democracy/Item private renderExtrinsic = (extrinsic: Extrinsic, index: number) => { const { meta, method, section } = Method.findFunction(extrinsic.callIndex); @@ -94,4 +93,4 @@ class Pending extends React.PureComponent { } } -export default translate(Pending); +export default translate(Extrinsics); diff --git a/packages/app-nodeinfo/src/index.tsx b/packages/app-nodeinfo/src/index.tsx index a92fe525c7..7fb4307c37 100644 --- a/packages/app-nodeinfo/src/index.tsx +++ b/packages/app-nodeinfo/src/index.tsx @@ -3,22 +3,23 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { ApiProps } from '@polkadot/ui-api/types'; -import { AppProps } from '@polkadot/ui-app/types'; +import { AppProps, I18nProps } from '@polkadot/ui-app/types'; import { Info } from './types'; import React from 'react'; -import { withApi } from '@polkadot/ui-api/index'; +import { withApi, withMulti } from '@polkadot/ui-api/index'; import { Health, PeerInfo, PendingExtrinsics } from '@polkadot/types'; import './index.css'; +import Extrinsics from '@polkadot/app-explorer/BlockByHash/Extrinsics'; import Peers from './Peers'; -import Pending from './Pending'; import Summary from './Summary'; +import translate from './translate'; const POLL_TIMEOUT = 10000; -type Props = ApiProps & AppProps; +type Props = ApiProps & AppProps & I18nProps; type State = { info?: Info, @@ -45,6 +46,22 @@ class App extends React.PureComponent { } } + render () { + const { t } = this.props; + const { info = {} } = this.state; + + return ( +
+ + + +
+ ); + } + private setInfo (info?: Info) { if (!this.isActive) { return; @@ -71,18 +88,10 @@ class App extends React.PureComponent { this.setInfo(); } } - - render () { - const { info = {} } = this.state; - - return ( -
- - - -
- ); - } } -export default withApi(App); +export default withMulti( + App, + translate, + withApi +);