Some func hooks in 123-code (#1569)

* Some func hooks in 123-code

* Minor cleanups

packages/app-123code/src/AccountSelector.tsx

@@ -2,7 +2,7 @@
 // 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 React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Bubble, InputAddress } from '@polkadot/react-components';
 import { AccountIndex, Balance, Nonce } from '@polkadot/react-query';
@@ -12,47 +12,32 @@ interface Props {
   onChange: (accountId?: string) => void;
 }
 
-interface State {
-  accountId?: string;
-}
+function AccountSelector ({ className, onChange }: Props): React.ReactElement<Props> {
+  const [accountId, setAccountId] = useState<string | undefined>();
 
-class AccountSelector extends React.PureComponent<Props, State> {
-  public state: State = {};
+  useEffect((): void => onChange(accountId), [accountId]);
 
-  public render (): React.ReactNode {
-    const { className } = this.props;
-    const { accountId } = this.state;
-
-    return (
-      <section className={`template--AccountSelector ui--row ${className}`}>
-        <InputAddress
-          className='medium'
-          label='my default account'
-          onChange={this.onChange}
-          type='account'
-        />
-        <div className='medium'>
-          <Bubble color='teal' icon='address card' label='index'>
-            <AccountIndex params={accountId} />
-          </Bubble>
-          <Bubble color='yellow' icon='adjust' label='balance'>
-            <Balance params={accountId} />
-          </Bubble>
-          <Bubble color='yellow' icon='target' label='transactions'>
-            <Nonce params={accountId} />
-          </Bubble>
-        </div>
-      </section>
-    );
-  }
-
-  private onChange = (accountId?: string): void => {
-    const { onChange } = this.props;
-
-    this.setState({ accountId }, (): void =>
-      onChange(accountId)
-    );
-  }
+  return (
+    <section className={`template--AccountSelector ui--row ${className}`}>
+      <InputAddress
+        className='medium'
+        label='my default account'
+        onChange={setAccountId}
+        type='account'
+      />
+      <div className='medium'>
+        <Bubble color='teal' icon='address card' label='index'>
+          <AccountIndex params={accountId} />
+        </Bubble>
+        <Bubble color='yellow' icon='adjust' label='balance'>
+          <Balance params={accountId} />
+        </Bubble>
+        <Bubble color='yellow' icon='target' label='transactions'>
+          <Nonce params={accountId} />
+        </Bubble>
+      </div>
+    </section>
+  );
 }
 
 export default styled(AccountSelector)`

packages/app-123code/src/SummaryBar.tsx

@@ -8,7 +8,7 @@ import { ApiProps } from '@polkadot/react-api/types';
 import { BareProps, I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { withCalls } from '@polkadot/react-api/with';
 import { Bubble, IdentityIcon } from '@polkadot/react-components';
 import { formatBalance, formatNumber } from '@polkadot/util';
@@ -27,66 +27,51 @@ interface Props extends ApiProps, BareProps, I18nProps {
   system_version?: string;
 }
 
-interface State {
-  nextUp: AccountId[];
-}
+function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, staking_intentions = [], session_validators = [], state_getRuntimeVersion, system_chain, system_name, system_version }: Props): React.ReactElement<Props> {
+  const [nextUp, setNextUp] = useState<AccountId[]>([]);
 
-class SummaryBar extends React.PureComponent<Props, State> {
-  public state: State = {
-    nextUp: []
-  };
-
-  public static getDerivedStateFromProps ({ staking_intentions, session_validators }: Props): State | null {
-    if (!staking_intentions || !session_validators) {
-      return null;
-    }
-
-    return {
-      nextUp: staking_intentions.filter((accountId): boolean =>
+  useEffect((): void => {
+    if (staking_intentions && session_validators) {
+      setNextUp(staking_intentions.filter((accountId): boolean =>
         !session_validators.find((validatorId): boolean =>
           validatorId.eq(accountId)
         )
-      )
-    };
-  }
+      ));
+    }
+  }, [staking_intentions, session_validators]);
 
-  public render (): React.ReactNode {
-    const { balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, session_validators = [], state_getRuntimeVersion, system_chain, system_name, system_version } = this.props;
-    const { nextUp } = this.state;
-
-    return (
-      <summary>
-        <div>
-          <Bubble icon='tty' label='node'>
-            {system_name} v{system_version}
-          </Bubble>
-          <Bubble icon='chain' label='chain'>
-            {system_chain}
-          </Bubble>
-          <Bubble icon='code' label='runtime'>{
-            state_getRuntimeVersion &&
-              `${state_getRuntimeVersion.implName} v${state_getRuntimeVersion.implVersion}`
-          }</Bubble>
-          <Bubble icon='bullseye' label='best #'>
-            {formatNumber(chain_bestNumber)} ({formatNumber(chain_bestNumberLag)} lag)
-          </Bubble>
-          <Bubble icon='chess queen' label='validators'>{
-            session_validators.map((accountId, index): React.ReactNode => (
-              <IdentityIcon key={index} value={accountId} size={20} />
-            ))
-          }</Bubble>
-          <Bubble icon='chess bishop' label='next up'>{
-            nextUp.map((accountId, index): React.ReactNode => (
-              <IdentityIcon key={index} value={accountId} size={20} />
-            ))
-          }</Bubble>
-          <Bubble icon='circle' label='total tokens'>
-            {formatBalance(balances_totalIssuance)}
-          </Bubble>
-        </div>
-      </summary>
-    );
-  }
+  return (
+    <summary>
+      <div>
+        <Bubble icon='tty' label='node'>
+          {system_name} v{system_version}
+        </Bubble>
+        <Bubble icon='chain' label='chain'>
+          {system_chain}
+        </Bubble>
+        <Bubble icon='code' label='runtime'>{
+          state_getRuntimeVersion &&
+            `${state_getRuntimeVersion.implName} v${state_getRuntimeVersion.implVersion}`
+        }</Bubble>
+        <Bubble icon='bullseye' label='best #'>
+          {formatNumber(chain_bestNumber)} ({formatNumber(chain_bestNumberLag)} lag)
+        </Bubble>
+        <Bubble icon='chess queen' label='validators'>{
+          session_validators.map((accountId, index): React.ReactNode => (
+            <IdentityIcon key={index} value={accountId} size={20} />
+          ))
+        }</Bubble>
+        <Bubble icon='chess bishop' label='next up'>{
+          nextUp.map((accountId, index): React.ReactNode => (
+            <IdentityIcon key={index} value={accountId} size={20} />
+          ))
+        }</Bubble>
+        <Bubble icon='circle' label='total tokens'>
+          {formatBalance(balances_totalIssuance)}
+        </Bubble>
+      </div>
+    </summary>
+  );
 }
 
 // inject the actual API calls automatically into props

packages/app-123code/src/index.tsx

@@ -10,7 +10,7 @@ import { AppProps, I18nProps } from '@polkadot/react-components/types';
 
 // external imports (including those found in the packages/*
 // of this repo)
-import React from 'react';
+import React, { useState } from 'react';
 
 // local imports and components
 import AccountSelector from './AccountSelector';
@@ -18,33 +18,21 @@ import SummaryBar from './SummaryBar';
 import Transfer from './Transfer';
 import translate from './translate';
 
-// define out internal types
+// define our internal types
 interface Props extends AppProps, I18nProps {}
 
-interface State {
-  accountId?: string;
-}
+function App ({ className }: Props): React.ReactElement<Props> {
+  const [accountId, setAccountId] = useState<string | undefined>();
 
-class App extends React.PureComponent<Props, State> {
-  public state: State = {};
-
-  public render (): React.ReactNode {
-    const { accountId } = this.state;
-
-    return (
-      // in all apps, the main wrapper is setup to allow the padding
-      // and margins inside the application. (Just from a consistent pov)
-      <main>
-        <SummaryBar />
-        <AccountSelector onChange={this.onAccountChange} />
-        <Transfer accountId={accountId} />
-      </main>
-    );
-  }
-
-  private onAccountChange = (accountId?: string): void => {
-    this.setState({ accountId });
-  }
+  return (
+    // in all apps, the main wrapper is setup to allow the padding
+    // and margins inside the application. (Just from a consistent pov)
+    <main className={className}>
+      <SummaryBar />
+      <AccountSelector onChange={setAccountId} />
+      <Transfer accountId={accountId} />
+    </main>
+  );
 }
 
 export default translate(App);

packages/react-signer/src/PasswordCheck.tsx

@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { withMulti } from '@polkadot/react-api';
 
 import translate from './translate';
 
@@ -15,18 +14,15 @@ interface Props extends I18nProps {
   unlockError?: string | null;
 }
 
-function PasswordCheck (props: Props): React.ReactElement<Props> | null {
-  const { className, unlockError, t } = props;
-
+function PasswordCheck ({ className, unlockError, t }: Props): React.ReactElement<Props> | null {
   return unlockError
     ? <div className={className}>{t('wrong password')}</div>
     : null;
 }
 
-export default withMulti(
+export default translate(
   styled(PasswordCheck)`
     margin-left: 15em;
     color: #9f3a38;
-  `,
-  translate
+  `
 );