From 00048285d0e84487d4c7de981cf3d8f3c630a7fc Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 23 Sep 2019 17:46:15 +0200 Subject: [PATCH] Some more functional component conversions (#1648) --- packages/app-council/src/Motions/Motion.tsx | 150 +++------ .../app-democracy/src/Overview/Referendum.tsx | 168 ++++------ .../app-democracy/src/Overview/Seconding.tsx | 148 ++++---- .../app-democracy/src/Overview/Voting.tsx | 180 ++++------ packages/app-explorer/src/Forks.tsx | 316 +++++++++--------- packages/app-toolbox/src/Rpc/Account.tsx | 120 +++---- packages/app-toolbox/src/index.tsx | 99 +++--- packages/app-treasury/src/Overview/index.tsx | 32 +- 8 files changed, 493 insertions(+), 720 deletions(-) diff --git a/packages/app-council/src/Motions/Motion.tsx b/packages/app-council/src/Motions/Motion.tsx index 1ed7a21b9c..5836091b54 100644 --- a/packages/app-council/src/Motions/Motion.tsx +++ b/packages/app-council/src/Motions/Motion.tsx @@ -21,86 +21,35 @@ interface Props extends I18nProps { votes: Votes | null; } -interface State { - votedTotal: number; - votedNay: number; - votedAye: number; -} - -class Motion extends React.PureComponent { - public state: State = { - votedTotal: 0, - votedAye: 0, - votedNay: 0 - }; - - public static getDerivedStateFromProps ({ votes }: Props): State | null { - if (!votes) { - return null; - } - - const { ayes, nays } = votes; - - const newState: State = { - votedNay: nays.length, - votedAye: ayes.length, - votedTotal: ayes.length + nays.length - }; - - return newState; +function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactElement | null { + if (!proposal || !votes) { + return null; } - public render (): React.ReactNode { - const { className, hash, proposal, votes } = this.props; + const { ayes, index, nays, threshold } = votes; - if (!proposal || !votes) { - return null; - } - - const { index } = votes; - - return ( - - } - expandNested - idNumber={index} - proposal={proposal} - > - {this.renderInfo()} - - ); - } - - private renderInfo (): React.ReactNode { - const { votes, t } = this.props; - - if (!votes) { - return null; - } - - const { ayes, nays, threshold } = votes; - - return ( + return ( + + } + expandNested + idNumber={index} + proposal={proposal} + >
-

- {t( - 'ayes ({{ayes}}/{{threshold}} to approve)', - { - replace: { - ayes: ayes.length, - threshold: threshold.toString() - } - } - )} -

+

{t('ayes ({{ayes}}/{{threshold}} to approve)', { + replace: { + ayes: ayes.length, + threshold: threshold.toString() + } + })}

{ayes.map((address, index): React.ReactNode => ( { /> ))} -

- {t( - 'nays ({{nays}})', - { - replace: { - nays: nays.length - } - } - )} -

+

{t('nays ({{nays}})', { + replace: { + nays: nays.length + } + })}

{nays.map((address, index): React.ReactNode => ( { ))}
- ); - } + + ); } export default withMulti( Motion, translate, withCalls( - [ - 'query.council.proposalOf', - { - paramName: 'hash', - propName: 'proposal', - transform: (value: Option): ProposalType | null => - value.unwrapOr(null) - } - ], - [ - 'query.council.voting', - { - paramName: 'hash', - propName: 'votes', - transform: (value: Option): Votes | null => - value.unwrapOr(null) - } - ] + ['query.council.proposalOf', { + paramName: 'hash', + propName: 'proposal', + transform: (value: Option): ProposalType | null => + value.unwrapOr(null) + }], + ['query.council.voting', { + paramName: 'hash', + propName: 'votes', + transform: (value: Option): Votes | null => + value.unwrapOr(null) + }] ) ); diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx index 7d46ac1677..e05ca46c13 100644 --- a/packages/app-democracy/src/Overview/Referendum.tsx +++ b/packages/app-democracy/src/Overview/Referendum.tsx @@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types'; import { ReferendumInfoExtended } from '@polkadot/api-derive/type'; import BN from 'bn.js'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import { ActionItem, Chart, Static, Voting } from '@polkadot/react-components'; import { formatBalance, formatNumber } from '@polkadot/util'; @@ -37,91 +37,90 @@ interface State { votedTotal: BN; } -class Referendum extends React.PureComponent { - public state: State = { +function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, democracy_referendumVotesFor, t, value }: Props): React.ReactElement | null { + const [{ voteCount, voteCountAye, voteCountNay, votedAye, votedNay, votedTotal }, setState] = useState({ voteCount: 0, voteCountAye: 0, voteCountNay: 0, votedAye: new BN(0), votedNay: new BN(0), votedTotal: new BN(0) - }; + }); - public static getDerivedStateFromProps ({ democracy_referendumVotesFor }: Props, prevState: State): State | null { - if (!democracy_referendumVotesFor) { - return null; - } + useEffect((): void => { + if (democracy_referendumVotesFor) { + const newState: State = democracy_referendumVotesFor.reduce((state, { balance, vote }): State => { + if (vote.isAye) { + state.voteCountAye++; + state.votedAye = state.votedAye.add(balance); + } else { + state.voteCountNay++; + state.votedNay = state.votedNay.add(balance); + } - const newState: State = democracy_referendumVotesFor.reduce((state, { balance, vote }): State => { - if (vote.isAye) { - state.voteCountAye++; - state.votedAye = state.votedAye.add(balance); - } else { - state.voteCountNay++; - state.votedNay = state.votedNay.add(balance); + state.voteCount++; + state.votedTotal = state.votedTotal.add(balance); + + return state; + }, { + voteCount: 0, + voteCountAye: 0, + voteCountNay: 0, + votedAye: new BN(0), + votedNay: new BN(0), + votedTotal: new BN(0) + }); + + if (newState.votedAye.eq(votedNay) && newState.votedNay.eq(votedNay)) { + return; } - state.voteCount++; - state.votedTotal = state.votedTotal.add(balance); - - return state; - }, { - voteCount: 0, - voteCountAye: 0, - voteCountNay: 0, - votedAye: new BN(0), - votedNay: new BN(0), - votedTotal: new BN(0) - }); - - if (newState.votedAye.eq(prevState.votedNay) && newState.votedNay.eq(prevState.votedNay)) { - return null; + setState(newState); } + }, [democracy_referendumVotesFor]); - return newState; + if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) { + return null; } - public render (): React.ReactNode { - const { chain_bestNumber, className, value } = this.props; + const enactBlock = (democracy_enactmentPeriod || new BN(0)).add(value.end); - if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) { - return null; - } - - return ( - - } - > - {this.renderInfo()} - - ); - } - - private renderInfo (): React.ReactNode { - const { chain_bestNumber, democracy_enactmentPeriod, t, value: { end, threshold } } = this.props; - - if (!chain_bestNumber) { - return null; - } - - const enactBlock = (democracy_enactmentPeriod || new BN(0)).add(end); - - return ( + return ( + + } + >
- {this.renderResults()} + {voteCount !== 0 && votedTotal.gtn(0) && ( +
+ +
+ )} {t('block #{{blockNumber}}, {{remaining}} blocks remaining', { replace: { - blockNumber: formatNumber(end), - remaining: formatNumber(end.sub(chain_bestNumber).subn(1)) + blockNumber: formatNumber(value.end), + remaining: formatNumber(value.end.sub(chain_bestNumber).subn(1)) } })} @@ -135,7 +134,7 @@ class Referendum extends React.PureComponent { { }} />
- ); - } - - private renderResults (): React.ReactNode { - const { voteCount, voteCountAye, voteCountNay, votedAye, votedNay, votedTotal } = this.state; - - if (voteCount === 0 || votedTotal.eqn(0)) { - return null; - } - - return ( -
- -
- ); - } + + ); } export default withMulti( - styled(Referendum as React.ComponentClass)` + styled(Referendum)` .democracy--Referendum-results { margin-bottom: 1em; diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx index 0149bc4f66..bfd5cc5933 100644 --- a/packages/app-democracy/src/Overview/Seconding.tsx +++ b/packages/app-democracy/src/Overview/Seconding.tsx @@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types'; import { SubjectInfo } from '@polkadot/ui-keyring/observable/types'; import BN from 'bn.js'; -import React from 'react'; +import React, { useState } from 'react'; import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components'; import accountObservable from '@polkadot/ui-keyring/observable/accounts'; import { withMulti, withObservable } from '@polkadot/react-api'; @@ -20,99 +20,69 @@ interface Props extends I18nProps { proposalId: BN | number; } -interface State { - accountId?: string; - isSecondingOpen: boolean; -} +function Seconding ({ allAccounts, depositors, proposalId, t }: Props): React.ReactElement | null { + const [accountId, setAccountId] = useState(null); + const [isSecondingOpen, setIsSecondingOpen] = useState(false); + const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0; -class Seconding extends React.PureComponent { - public state: State = { - isSecondingOpen: false - }; - - public render (): React.ReactNode { - const { allAccounts, t } = this.props; - const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0; - - if (!hasAccounts) { - return null; - } - - return ( - <> - {this.renderModal()} -
-
- - ); + if (!hasAccounts) { + return null; } - private renderModal (): React.ReactNode { - const { depositors, proposalId, t } = this.props; - const { accountId, isSecondingOpen } = this.state; + const isDepositor = depositors.some((depositor): boolean => depositor.eq(accountId)); + const _toggleSeconding = (): void => setIsSecondingOpen(!isSecondingOpen); - if (!isSecondingOpen) { - return null; - } - - const isDepositor = !!depositors.find((depositor): boolean => depositor.eq(accountId)); - - return ( - - {t('Second proposal')} - - - - - -