Remove extrinsic list duplication (#625)

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<Props> {
           withExtrinsics
         />
       </header>,
-      this.renderExtrinsics(),
+      <Extrinsics
+        key='extrinsics'
+        value={chain_getBlock.block.extrinsics}
+      />,
       <Events
         key='events'
         value={system_events}
@@ -50,72 +52,6 @@ class BlockByHash extends React.PureComponent<Props> {
       />
     ];
   }
-
-  private renderExtrinsics () {
-    const { chain_getBlock, t } = this.props;
-
-    if (!chain_getBlock) {
-      return null;
-    }
-
-    const { block: { extrinsics } } = chain_getBlock;
-
-    return (
-      <section key='extrinsics'>
-        <h1>{t('extrinsics')}</h1>
-        <div className='explorer--BlockByHash-flexable'>
-          {extrinsics.map(this.renderExtrinsic)}
-        </div>
-      </section>
-    );
-  }
-
-  // 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 (
-      <div
-        className='explorer--BlockByHash-block'
-        key={`${value}:extrinsic:${index}`}
-      >
-        <article className='explorer--Container'>
-          <div className='header'>
-            <h3>
-              #{numberFormat(index)}:&nbsp;{section}.{method}
-            </h3>
-            <div className='description'>{
-              meta && meta.documentation && meta.documentation.length
-                ? meta.documentation.map((doc) => doc.toString()).join(' ')
-                : ''
-            }</div>
-            {this.renderSigner(extrinsic)}
-          </div>
-          <Call value={extrinsic} />
-        </article>
-      </div>
-    );
-  }
-
-  private renderSigner (extrinsic: Extrinsic) {
-    const { t } = this.props;
-
-    if (!extrinsic.signature.isSigned) {
-      return null;
-    }
-
-    return (
-      <div className='explorer--BlockByHash-header-right'>
-        <div>
-          <AddressMini value={extrinsic.signature.signer} />
-        </div>
-        <div className='explorer--BlockByHash-accountIndex'>
-          {t('index')} {numberFormat(extrinsic.signature.nonce)}
-        </div>
-      </div>
-    );
-  }
 }
 
 export default withMulti(

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<Extrinsic> | null
+  label?: React.ReactNode,
+  value?: Array<Extrinsic> | 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<Props> {
+class Extrinsics extends React.PureComponent<Props> {
   render () {
-    const { t } = this.props;
+    const { label, t } = this.props;
 
     return (
-      <section>
-        <h1>{t('pending extrinsics')}</h1>
-        {this.renderExtrinsics()}
+      <section key='extrinsics'>
+        <h1>{label || t('extrinsics')}</h1>
+        {this.renderContent()}
       </section>
     );
   }
 
-  private renderExtrinsics () {
-    const { extrinsics, t } = this.props;
+  private renderContent () {
+    const { t, value } = this.props;
 
-    if (!extrinsics || !extrinsics.length) {
+    if (!value || !value.length) {
       return (
         <div className='ui disabled'>
           {t('no pending extrinsics are in the queue')}
@@ -42,12 +41,12 @@ class Pending extends React.PureComponent<Props> {
 
     return (
       <div className='explorer--BlockByHash-flexable'>
-        {extrinsics.map(this.renderExtrinsic)}
+        {value.map(this.renderExtrinsic)}
       </div>
     );
   }
 
-  // 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<Props> {
   }
 }
 
-export default translate(Pending);
+export default translate(Extrinsics);

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<Props, State> {
     }
   }
 
+  render () {
+    const { t } = this.props;
+    const { info = {} } = this.state;
+
+    return (
+      <main className='status--App'>
+        <Summary info={info} />
+        <Peers peers={info.peers} />
+        <Extrinsics
+          label={t('pending extrinsics')}
+          value={info.extrinsics}
+        />
+      </main>
+    );
+  }
+
   private setInfo (info?: Info) {
     if (!this.isActive) {
       return;
@@ -71,18 +88,10 @@ class App extends React.PureComponent<Props, State> {
       this.setInfo();
     }
   }
-
-  render () {
-    const { info = {} } = this.state;
-
-    return (
-      <main className='status--App'>
-        <Summary info={info} />
-        <Peers peers={info.peers} />
-        <Pending extrinsics={info.extrinsics} />
-      </main>
-    );
-  }
 }
 
-export default withApi(App);
+export default withMulti(
+  App,
+  translate,
+  withApi
+);