From 57800cdb83fcc6b4e53f4fd39ba79d297aeff86f Mon Sep 17 00:00:00 2001 From: YJ Date: Thu, 12 Jul 2018 22:40:31 -0700 Subject: [PATCH] Fixes #103: Convert functional components to pure (#135) * ui-signer pureComponentify * ui-react pureCompify * Status queue prop * ui-app Button * ui-app InputExtrinsic * apps, app-rpc, ui-app, ui-react * app-extrinsics, app-explorer, apps * fixes for tslint * more linter fixes * Update index.tsx * Update index.tsx * Update Nonce.tsx * Update index.tsx * Update Results.tsx * Update index.tsx * Update Queries.tsx * Update NodeInfo.tsx * Update index.tsx * Update Item.tsx * style fixes * TSLINTs --- .../app-explorer/src/BlockHeader/index.tsx | 87 +++++++++--------- packages/app-explorer/src/index.tsx | 36 ++++---- packages/app-extrinsics/src/Nonce.tsx | 38 ++++---- packages/app-extrinsics/src/index.tsx | 30 +++--- packages/app-rpc/src/Results.tsx | 60 ++++++------ packages/app-rpc/src/index.tsx | 44 +++++---- packages/app-storage/src/Queries.tsx | 40 ++++---- packages/apps/src/NodeInfo.tsx | 38 ++++---- packages/apps/src/NotFound/index.tsx | 26 +++--- packages/apps/src/SideBar/Item.tsx | 30 +++--- packages/apps/src/SideBar/index.tsx | 92 ++++++++++--------- packages/ui-app/src/Button/Divider.tsx | 20 ++-- packages/ui-app/src/Button/Group.tsx | 29 +++--- packages/ui-app/src/Button/Or.tsx | 32 ++++--- packages/ui-app/src/Button/index.tsx | 52 ++++++----- packages/ui-app/src/CopyButton.tsx | 30 +++--- .../src/InputExtrinsic/SelectMethod.tsx | 50 +++++----- .../src/InputExtrinsic/SelectSection.tsx | 36 ++++---- packages/ui-app/src/InputRpc/SelectMethod.tsx | 48 +++++----- .../ui-app/src/InputRpc/SelectSection.tsx | 36 ++++---- .../ui-app/src/InputStorage/SelectKey.tsx | 48 +++++----- .../ui-app/src/InputStorage/SelectSection.tsx | 36 ++++---- packages/ui-app/src/Labelled.tsx | 38 ++++---- packages/ui-app/src/Output.tsx | 48 +++++----- packages/ui-app/src/Static.tsx | 34 ++++--- packages/ui-react/src/Container/Demo.tsx | 43 +++++---- packages/ui-react/src/Container/index.tsx | 20 ++-- packages/ui-react/src/IdentityIcon/Demo.tsx | 55 +++++------ packages/ui-react/src/IdentityIcon/index.tsx | 20 ++-- packages/ui-signer/src/Status.tsx | 58 ++++++------ packages/ui-signer/src/index.tsx | 46 +++++----- 31 files changed, 710 insertions(+), 590 deletions(-) diff --git a/packages/app-explorer/src/BlockHeader/index.tsx b/packages/app-explorer/src/BlockHeader/index.tsx index 599548bc74..d9d8630345 100644 --- a/packages/app-explorer/src/BlockHeader/index.tsx +++ b/packages/app-explorer/src/BlockHeader/index.tsx @@ -20,52 +20,55 @@ type Props = I18nProps & { value?: Header }; -function BlockHeader ({ className, value, style }: Props) { - if (!value) { - return null; - } +class BlockHeader extends React.PureComponent { + render () { + const { className, value, style } = this.props; + if (!value) { + return null; + } - const hash = headerHash(value); - // tslint:disable-next-line:variable-name - const { extrinsicsRoot, number, parentHash, stateRoot } = value; + const hash = headerHash(value); + // tslint:disable-next-line:variable-name + const { extrinsicsRoot, number, parentHash, stateRoot } = value; - return ( -
-
-
{numberFormat(number)}
-
-
-
- {u8aToHex(hash)} + return ( +
+
+
{numberFormat(number)}
+
+
+
+ {u8aToHex(hash)} +
+ + + + + + + + + + + + + + + +
parentHash + {u8aToHex(parentHash)} +
extrinsicsRoot + {u8aToHex(extrinsicsRoot)} +
stateRoot + {u8aToHex(stateRoot)} +
- - - - - - - - - - - - - - - -
parentHash - {u8aToHex(parentHash)} -
extrinsicsRoot - {u8aToHex(extrinsicsRoot)} -
stateRoot - {u8aToHex(stateRoot)} -
-
- ); + ); + } } export default translate(BlockHeader); diff --git a/packages/app-explorer/src/index.tsx b/packages/app-explorer/src/index.tsx index 1e31f0b391..d3e7ffe1c7 100644 --- a/packages/app-explorer/src/index.tsx +++ b/packages/app-explorer/src/index.tsx @@ -17,22 +17,26 @@ import translate from './translate'; type Props = I18nProps & {}; -function ExplorerApp ({ className, style, t }: Props) { - return ( -
- - - -
- ); +class ExplorerApp extends React.PureComponent { + render () { + const { className, style, t } = this.props; + + return ( +
+ + + +
+ ); + } } export default translate(ExplorerApp); diff --git a/packages/app-extrinsics/src/Nonce.tsx b/packages/app-extrinsics/src/Nonce.tsx index b93f59107d..b6dee3d3f2 100644 --- a/packages/app-extrinsics/src/Nonce.tsx +++ b/packages/app-extrinsics/src/Nonce.tsx @@ -17,22 +17,26 @@ type Props = BareProps & { value?: Uint8Array }; -export default function Nonce ({ className, label, style, onChange, value }: Props) { - return ( -
- { + render () { + const { className, label, style, onChange, value } = this.props; + + return ( +
- - -
- ); + + + +
+ ); + } } diff --git a/packages/app-extrinsics/src/index.tsx b/packages/app-extrinsics/src/index.tsx index 056efa749b..da31d3ae93 100644 --- a/packages/app-extrinsics/src/index.tsx +++ b/packages/app-extrinsics/src/index.tsx @@ -16,17 +16,21 @@ import Selection from './Selection'; type Props = BareProps; -export default function ExtrinsicsApp ({ className, style }: Props) { - return ( -
- - {({ queueAdd }: QueueProps) => ( - - )} - -
- ); +export default class ExtrinsicsApp extends React.PureComponent { + render () { + const { className, style } = this.props; + + return ( +
+ + {({ queueAdd }: QueueProps) => ( + + )} + +
+ ); + } } diff --git a/packages/app-rpc/src/Results.tsx b/packages/app-rpc/src/Results.tsx index 32bb449bdb..8ce337f9a5 100644 --- a/packages/app-rpc/src/Results.tsx +++ b/packages/app-rpc/src/Results.tsx @@ -17,34 +17,38 @@ type Props = BareProps & { queue: Array }; -export default function Results ({ className, queue = [], style }: Props) { - const filtered = queue - .filter(({ error, result }) => - !isUndefined(error) || !isUndefined(result) - ) - .reverse(); +export default class Results extends React.PureComponent { + render () { + const { className, queue = [], style } = this.props; - if (!filtered.length) { - return null; + const filtered = queue + .filter(({ error, result }) => + !isUndefined(error) || !isUndefined(result) + ) + .reverse(); + + if (!filtered.length) { + return null; + } + + return ( +
+ {filtered.map(({ error, id, result, rpc: { section, name } }) => ( + + ))} +
+ ); } - - return ( -
- {filtered.map(({ error, id, result, rpc: { section, name } }) => ( - - ))} -
- ); } diff --git a/packages/app-rpc/src/index.tsx b/packages/app-rpc/src/index.tsx index 6d0c92d67e..2a929e9b6a 100644 --- a/packages/app-rpc/src/index.tsx +++ b/packages/app-rpc/src/index.tsx @@ -17,24 +17,28 @@ import Selection from './Selection'; type Props = BareProps & {}; -export default function RpcApp ({ className, style }: Props) { - return ( -
- - {({ queue, queueAdd }: QueueProps) => [ - , - - ]} - -
- ); +export default class RpcApp extends React.PureComponent { + render () { + const { className, style } = this.props; + + return ( +
+ + {({ queue, queueAdd }: QueueProps) => [ + , + + ]} + +
+ ); + } } diff --git a/packages/app-storage/src/Queries.tsx b/packages/app-storage/src/Queries.tsx index 864ddd9781..ef068069cf 100644 --- a/packages/app-storage/src/Queries.tsx +++ b/packages/app-storage/src/Queries.tsx @@ -17,25 +17,29 @@ type Props = I18nProps & { value?: Array }; -function Queries ({ className, onRemove, style, value }: Props) { - if (!value || !value.length) { - return null; - } +class Queries extends React.PureComponent { + render () { + const { className, onRemove, style, value } = this.props; - return ( -
- {value.map((query) => - - )} -
- ); + if (!value || !value.length) { + return null; + } + + return ( +
+ {value.map((query) => + + )} +
+ ); + } } export default translate(Queries); diff --git a/packages/apps/src/NodeInfo.tsx b/packages/apps/src/NodeInfo.tsx index 69503a430f..5003692947 100644 --- a/packages/apps/src/NodeInfo.tsx +++ b/packages/apps/src/NodeInfo.tsx @@ -21,24 +21,28 @@ function updateTestInfo (chain?: string) { keyring.setTestMode(isTestChain(chain)); } -function NodeInfo ({ className, style, t }: Props) { - return ( -
- { + render () { + const { className, style, t } = this.props; + + return ( +
+ + - - -
- ); + /> + +
+ ); + } } export default translate(NodeInfo); diff --git a/packages/apps/src/NotFound/index.tsx b/packages/apps/src/NotFound/index.tsx index ebba674745..7f19bfbe9e 100644 --- a/packages/apps/src/NotFound/index.tsx +++ b/packages/apps/src/NotFound/index.tsx @@ -14,17 +14,21 @@ import translate from '../translate'; type Props = I18nProps & {}; -function NotFound ({ className, style, t }: Props) { - return ( -
- {t('notfound.error', { - defaultValue: 'ERROR: You have tried to access an application that does not exist' - })} -
- ); +class NotFound extends React.PureComponent { + render () { + const { className, style, t } = this.props; + + return ( +
+ {t('notfound.error', { + defaultValue: 'ERROR: You have tried to access an application that does not exist' + })} +
+ ); + } } export default translate(NotFound); diff --git a/packages/apps/src/SideBar/Item.tsx b/packages/apps/src/SideBar/Item.tsx index b8dbf529fb..b7fe6b443c 100644 --- a/packages/apps/src/SideBar/Item.tsx +++ b/packages/apps/src/SideBar/Item.tsx @@ -17,17 +17,21 @@ type Props = I18nProps & { route: Route }; -export default function Item ({ route: { i18n, icon, isExact, name, path = '' }, t }: Props) { - return ( - - - {t(`sidebar.${name}`, i18n)} - - - ); +export default class Item extends React.PureComponent { + render () { + const { route: { i18n, icon, isExact, name, path = '' }, t } = this.props; + + return ( + + + {t(`sidebar.${name}`, i18n)} + + + ); + } } diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index f27bcb9d25..d74c549983 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/packages/apps/src/SideBar/index.tsx @@ -20,51 +20,55 @@ type Props = I18nProps & { children?: React.ReactNode }; -function SideBar ({ children, className, style, t }: Props) { - return ( -
- { + render () { + const { children, className, style, t } = this.props; + + return ( +
- { - routing.routes - .filter((route) => - !route || !route.isHidden - ) - .map((route, index) => ( - route - ? ( - - ) - : ( -
-
- ); + + { + routing.routes + .filter((route) => + !route || !route.isHidden + ) + .map((route, index) => ( + route + ? ( + + ) + : ( + +
+ ); + } } export default translate(SideBar); diff --git a/packages/ui-app/src/Button/Divider.tsx b/packages/ui-app/src/Button/Divider.tsx index 2b0218f8d3..bede6904ca 100644 --- a/packages/ui-app/src/Button/Divider.tsx +++ b/packages/ui-app/src/Button/Divider.tsx @@ -8,13 +8,15 @@ import React from 'react'; import classes from '../util/classes'; -function ButtonDivider ({ className, style }: DividerProps) { - return ( -
- ); -} +export default class ButtonDivider extends React.Component { + render () { + const { className, style } = this.props; -export default ButtonDivider; + return ( +
+ ); + } +} diff --git a/packages/ui-app/src/Button/Group.tsx b/packages/ui-app/src/Button/Group.tsx index 00b8721f90..9a00902d87 100644 --- a/packages/ui-app/src/Button/Group.tsx +++ b/packages/ui-app/src/Button/Group.tsx @@ -11,18 +11,23 @@ import Button from '@polkadot/ui-app/Button'; import classes from '../util/classes'; import Divider from './Divider'; -function ButtonGroup ({ children, className, style }: GroupProps) { - return ( -
- - - {children} - -
- ); +// ({ children, className, style }: GroupProps) +class ButtonGroup extends React.PureComponent { + render () { + const { children, className, style } = this.props; + + return ( +
+ + + {children} + +
+ ); + } } (ButtonGroup as GroupType).Divider = Divider; diff --git a/packages/ui-app/src/Button/Or.tsx b/packages/ui-app/src/Button/Or.tsx index 4e2dc68487..e6b709a7ce 100644 --- a/packages/ui-app/src/Button/Or.tsx +++ b/packages/ui-app/src/Button/Or.tsx @@ -15,20 +15,24 @@ type Props = I18nProps & { text?: string }; -function ButtonOr ({ className, style, t, text }: Props) { - return ( - - ); +class ButtonOr extends React.PureComponent { + render () { + const { className, style, t, text } = this.props; + + return ( + + ); + } } export default translate(ButtonOr); diff --git a/packages/ui-app/src/Button/index.tsx b/packages/ui-app/src/Button/index.tsx index d71a653b3c..47d3105055 100644 --- a/packages/ui-app/src/Button/index.tsx +++ b/packages/ui-app/src/Button/index.tsx @@ -15,31 +15,35 @@ import Divider from './Divider'; import Group from './Group'; import Or from './Or'; -function Button ({ children, className, floated, icon, isBasic = false, isCircular = false, isDisabled = false, isNegative = false, isPrimary = false, onClick, size, style, text }: ButtonProps) { - const props = { - basic: isBasic, - circular: isCircular, - className, - disabled: isDisabled, - floated, - icon, - negative: isNegative, - onClick, - primary: isPrimary, - size, - secondary: isBasic && !(isPrimary || isNegative), - style - }; +class Button extends React.PureComponent { + render () { + const { children, className, floated, icon, isBasic = false, isCircular = false, isDisabled = false, isNegative = false, isPrimary = false, onClick, size, style, text } = this.props; - return isUndefined(text) && isUndefined(children) - ? ( - - ) - : ( - - {text}{children} - - ); + const props = { + basic: isBasic || false, + circular: isCircular, + className, + disabled: isDisabled, + floated, + icon, + negative: isNegative, + onClick, + primary: isPrimary, + size, + secondary: isBasic && !(isPrimary || isNegative || false), + style + }; + + return isUndefined(text) && isUndefined(children) + ? ( + + ) + : ( + + {text}{children} + + ); + } } (Button as ButtonType).Divider = Divider; diff --git a/packages/ui-app/src/CopyButton.tsx b/packages/ui-app/src/CopyButton.tsx index a64ff09830..ebb0d64d4d 100644 --- a/packages/ui-app/src/CopyButton.tsx +++ b/packages/ui-app/src/CopyButton.tsx @@ -18,17 +18,21 @@ type Props = BareProps & { value?: any }; -export default function CopyButton ({ className, icon = 'copy', isCircular = true, isPrimary = true, size = 'tiny', style, value }: Props) { - return ( - -