From 8d812116b700a592c4e3df4513caa478bdc8a437 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 25 Feb 2020 17:18:10 +0100
Subject: [PATCH] Minor AddressName cleanups (#2302)

* Minor AddressName cleanups

* Split Judgement modal

* Re-add undefined
---
 packages/react-components/src/AccountName.tsx | 129 +++++-------------
 .../src/AccountNameJudgement.tsx              |  93 +++++++++++++
 2 files changed, 126 insertions(+), 96 deletions(-)
 create mode 100644 packages/react-components/src/AccountNameJudgement.tsx

diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index b2b97cfe58..27d636c3d2 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -13,14 +13,10 @@ import { Option } from '@polkadot/types';
 
 import { useTranslation } from './translate';
 import { getAddressName } from './util';
+import AccountNameJudgement from './AccountNameJudgement';
 import AddressMini from './AddressMini';
 import Badge from './Badge';
-import Dropdown from './Dropdown';
 import Icon from './Icon';
-import Input from './Input';
-import InputAddress from './InputAddress';
-import Modal from './Modal';
-import TxButton from './TxButton';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
@@ -29,24 +25,20 @@ interface Props extends BareProps {
   onClick?: () => void;
   override?: React.ReactNode;
   toggle?: any;
-  value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
-  withShort?: boolean;
+  value: AccountId | AccountIndex | Address | string | Uint8Array | null | undefined;
 }
 
-const JUDGEMENT_ENUM = [
-  { value: 0, text: 'Unknown' },
-  { value: 1, text: 'Fee paid' },
-  { value: 2, text: 'Reasonable' },
-  { value: 3, text: 'Known good' },
-  { value: 4, text: 'Out of date' },
-  { value: 5, text: 'Low quality' }
-];
 const DISPLAY_KEYS = ['display', 'legal', 'email', 'web', 'twitter', 'riot'];
 const nameCache: Map<string, [boolean, [React.ReactNode, React.ReactNode | null]]> = new Map();
 
 function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [[React.ReactNode, React.ReactNode | null], boolean, boolean] {
   const accountId = _address.toString();
   const accountIndex = (_accountIndex || '').toString();
+
+  if (!accountId) {
+    return [[defaultName, null], false, false];
+  }
+
   const [isAddressExtracted,, extracted] = getAddressName(accountId, null, defaultName);
   const [isAddressCached, nameCached] = nameCache.get(accountId) || [false, [null, null]];
 
@@ -63,35 +55,30 @@ function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | A
   return [[extracted, null], !isAddressExtracted, isAddressExtracted];
 }
 
-function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
+function extractName (address: AccountId | string, accountIndex?: AccountIndex, defaultName?: string): React.ReactNode {
+  const [[displayFirst, displaySecond], isLocal, isAddress] = defaultOrAddr(defaultName, address, accountIndex);
+
+  return (
+    <div className='via-identity'>
+      <span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{
+        displaySecond
+          ? <><span className='top'>{displayFirst}</span><span className='sub'>/{displaySecond}</span></>
+          : displayFirst
+      }</span>
+    </div>
+  );
+}
+
+function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const [isJudgementOpen, toggleJudgement] = useToggle();
   const registrars = useCall<Option<RegistrarInfo>[]>(api.query.identity?.registrars, []);
   const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
-  const [accountId, setAccountId] = useState<string | null>(null);
   const [isRegistrar, setIsRegistrar] = useState(false);
-  const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
-  const [judgementEnum, setJudgementEnum] = useState(2); // Reasonable
-  const [registrarIndex, setRegistrarIndex] = useState(-1);
   const address = useMemo((): string => (value || '').toString(), [value]);
-
-  const _extractName = (accountId?: AccountId, accountIndex?: AccountIndex): React.ReactNode => {
-    const [[displayFirst, displaySecond], isLocal, isAddress] = defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex);
-
-    return (
-      <div className='via-identity'>
-        <span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{
-          displaySecond
-            ? <><span className='top'>{displayFirst}</span><span className='sub'>/{displaySecond}</span></>
-            : displayFirst
-        }</span>
-      </div>
-    );
-  };
-
-  const [name, setName] = useState<React.ReactNode>((): React.ReactNode => _extractName());
+  const [name, setName] = useState<React.ReactNode>((): React.ReactNode => extractName((value || '').toString(), undefined, defaultName));
 
   // determine if we have a registrar or not - registrars are allowed to approve
   useEffect((): void => {
@@ -108,31 +95,10 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
     }
   }, [allAccounts, registrars]);
 
-  // find the id of our registrar in the list
-  useEffect((): void => {
-    if (registrars && judgementAccountId) {
-      setRegistrarIndex(
-        registrars
-          .map((registrar): string| null =>
-            registrar.isSome
-              ? registrar.unwrap().account.toString()
-              : null
-          )
-          .indexOf(judgementAccountId)
-      );
-    } else {
-      setRegistrarIndex(-1);
-    }
-  }, [judgementAccountId, registrars]);
-
-  // set the actual nickname, localname, accountIndex, accountId
+  // set the actual nickname, local name, accountIndex, accountId
   useEffect((): void => {
     const { accountId, accountIndex, identity, nickname } = info || {};
 
-    if (accountId) {
-      setAccountId(accountId.toString());
-    }
-
     if (api.query.identity?.identityOf) {
       if (identity?.display) {
         const judgements = identity.judgements.filter(([, judgement]): boolean => !judgement.isFeePaid);
@@ -213,55 +179,26 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
           </div>
         );
 
-        nameCache.set(address, [false, displayParent ? [displayParent, displayName] : [displayName, null]]);
+        nameCache.set((accountId || address).toString(), [false, displayParent ? [displayParent, displayName] : [displayName, null]]);
         setName((): React.ReactNode => name);
       } else {
-        setName((): React.ReactNode => _extractName(accountId, accountIndex));
+        setName((): React.ReactNode => extractName(accountId || address, accountIndex));
       }
     } else if (nickname) {
-      nameCache.set(address, [false, [nickname, null]]);
+      nameCache.set((accountId || address).toString(), [false, [nickname, null]]);
       setName(nickname);
     } else {
-      setName(defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex));
+      setName(defaultOrAddr(defaultName, accountId || address, accountIndex));
     }
-  }, [info, toggle]);
+  }, [address, info, toggle]);
 
   return (
     <>
       {isJudgementOpen && (
-        <Modal
-          header={t('Provide judgement')}
-          size='small'
-        >
-          <Modal.Content>
-            <InputAddress
-              label={t('registrar account')}
-              onChange={setJudgementAccountId}
-            />
-            <Input
-              isDisabled
-              label={t('registrar index')}
-              value={registrarIndex === -1 ? t('invalid/unknown registrar account') : registrarIndex}
-            />
-            <Dropdown
-              label={t('judgement')}
-              onChange={setJudgementEnum}
-              options={JUDGEMENT_ENUM}
-              value={judgementEnum}
-            />
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleJudgement}>
-            <TxButton
-              accountId={judgementAccountId}
-              icon='check'
-              isDisabled={registrarIndex === -1}
-              label={t('Judge')}
-              onStart={toggleJudgement}
-              params={[registrarIndex, accountId, judgementEnum]}
-              tx='identity.provideJudgement'
-            />
-          </Modal.Actions>
-        </Modal>
+        <AccountNameJudgement
+          address={address}
+          toggleJudgement={toggleJudgement}
+        />
       )}
       <div
         className={`ui--AccountName ${className}`}
diff --git a/packages/react-components/src/AccountNameJudgement.tsx b/packages/react-components/src/AccountNameJudgement.tsx
new file mode 100644
index 0000000000..a117bd06ee
--- /dev/null
+++ b/packages/react-components/src/AccountNameJudgement.tsx
@@ -0,0 +1,93 @@
+// Copyright 2017-2020 @polkadot/react-query authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { BareProps } from '@polkadot/react-api/types';
+import { RegistrarInfo } from '@polkadot/types/interfaces';
+
+import React, { useEffect, useState } from 'react';
+import { useCall, useApi } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
+
+import { useTranslation } from './translate';
+import Dropdown from './Dropdown';
+import Input from './Input';
+import InputAddress from './InputAddress';
+import Modal from './Modal';
+import TxButton from './TxButton';
+
+interface Props extends BareProps {
+  address: string;
+  toggleJudgement: () => void;
+}
+
+const JUDGEMENT_ENUM = [
+  { value: 0, text: 'Unknown' },
+  { value: 1, text: 'Fee paid' },
+  { value: 2, text: 'Reasonable' },
+  { value: 3, text: 'Known good' },
+  { value: 4, text: 'Out of date' },
+  { value: 5, text: 'Low quality' }
+];
+
+export default function AccountNameJudgement ({ address, toggleJudgement }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const registrars = useCall<Option<RegistrarInfo>[]>(api.query.identity?.registrars, []);
+  const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
+  const [judgementEnum, setJudgementEnum] = useState(2); // Reasonable
+  const [registrarIndex, setRegistrarIndex] = useState(-1);
+
+  // find the id of our registrar in the list
+  useEffect((): void => {
+    if (registrars && judgementAccountId) {
+      setRegistrarIndex(
+        registrars
+          .map((registrar): string| null =>
+            registrar.isSome
+              ? registrar.unwrap().account.toString()
+              : null
+          )
+          .indexOf(judgementAccountId)
+      );
+    } else {
+      setRegistrarIndex(-1);
+    }
+  }, [judgementAccountId, registrars]);
+
+  return (
+    <Modal
+      header={t('Provide judgement')}
+      size='small'
+    >
+      <Modal.Content>
+        <InputAddress
+          label={t('registrar account')}
+          onChange={setJudgementAccountId}
+        />
+        <Input
+          isDisabled
+          label={t('registrar index')}
+          value={registrarIndex === -1 ? t('invalid/unknown registrar account') : registrarIndex}
+        />
+        <Dropdown
+          label={t('judgement')}
+          onChange={setJudgementEnum}
+          options={JUDGEMENT_ENUM}
+          value={judgementEnum}
+        />
+      </Modal.Content>
+      <Modal.Actions onCancel={toggleJudgement}>
+        <TxButton
+          accountId={judgementAccountId}
+          icon='check'
+          isDisabled={registrarIndex === -1}
+          label={t('Judge')}
+          onStart={toggleJudgement}
+          params={[registrarIndex, address, judgementEnum]}
+          tx='identity.provideJudgement'
+        />
+      </Modal.Actions>
+    </Modal>
+  );
+}