refactor: Refactor navigation (#743)

* Refactor a bit of code

* Install HealthContext from nomidot

* Remove fixme

* Simplify a bit the code

* Refactor route names

* Refactor accounts-app

* Create nicer gates and contexts

* Make contexts work

* Use packages from npm

* Fix addresses

* Fix accounts and addresses

* Remove comment

* Updatepackages

packages/accounts-app/src/Accounts/Accounts.tsx

@@ -0,0 +1,29 @@
+// Copyright 2018-2020 @paritytech/substrate-light-ui 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 { KeyringContext } from '@substrate/context';
+import React, { useContext } from 'react';
+import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
+
+import { AddAccount } from './AddAccount';
+import { AccountsOverview } from './Overview';
+
+type Props = RouteComponentProps;
+
+export function Accounts(props: Props): React.ReactElement {
+  const { location } = props;
+  const { accounts } = useContext(KeyringContext);
+
+  // Redirect to Add Account page if we have no accounts
+  if (!Object.keys(accounts).length && !location.pathname.startsWith('/accounts/add')) {
+    return <Redirect to='/accounts/add' />;
+  }
+
+  return (
+    <Switch>
+      <Route exact path='/accounts' component={AccountsOverview} />
+      <Route path='/accounts/add' component={AddAccount} />
+    </Switch>
+  );
+}

packages/accounts-app/src/AddAccount/Create/CreateAccount.tsx → packages/accounts-app/src/Accounts/AddAccount/Create/CreateAccount.tsx

@@ -35,9 +35,9 @@ function randomlyPickFour(phrase: string): Array<Array<string>> {
 }
 
 export function Create(props: Props): React.ReactElement {
-  const { location } = props;
+  const { location, history } = props;
 
-  const { keyring, keyringReady } = useContext(KeyringContext);
+  const { keyring, isKeyringReady } = useContext(KeyringContext);
 
   const [address, setAddress] = useState();
   const [errors, setErrors] = useState<Option<Array<string>>>(none);
@@ -61,11 +61,11 @@ export function Create(props: Props): React.ReactElement {
   const [whichAccount, setWhichAccount] = useState();
 
   useEffect(() => {
-    if (keyringReady) {
+    if (isKeyringReady) {
       const _address = generateAddressFromMnemonic(keyring, mnemonic);
       setAddress(_address);
     }
-  }, [keyring, keyringReady, mnemonic]);
+  }, [isKeyringReady, keyring, mnemonic]);
 
   useEffect(() => {
     // pick random four from the mnemonic to make sure user copied it right
@@ -115,6 +115,8 @@ export function Create(props: Props): React.ReactElement {
         const blob = new Blob([JSON.stringify(json)], { type: 'application/json; charset=utf-8' });
 
         FileSaver.saveAs(blob, `${values.name}-${result.pair.address}.json`);
+
+        history.push('/');
       }
     );
   };
@@ -160,7 +162,7 @@ export function Create(props: Props): React.ReactElement {
 
   return (
     <Stacked>
-      {keyringReady && <AddressSummary address={address} name={name} size='small' orientation='vertical' />}
+      {isKeyringReady && <AddressSummary address={address} name={name} size='small' orientation='vertical' />}
       <Margin top />
       {step === 'copy'
         ? renderCopyStep({ mnemonic }, { goToNextStep })

packages/accounts-app/src/AddAccount/ImportWithJson.tsx → packages/accounts-app/src/Accounts/AddAccount/ImportWithJson.tsx

@@ -17,12 +17,16 @@ import {
   WrapperDiv,
 } from '@substrate/ui-components';
 import React, { useContext, useState } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 
 import { TagOptions, Tags } from './types';
 
+type Props = RouteComponentProps;
+
 type Step = 'upload' | 'password';
 
-export function ImportWithJson(): React.ReactElement {
+export function ImportWithJson(props: Props): React.ReactElement {
+  const { history } = props;
   const { enqueue } = useContext(AlertsContext);
   const { keyring } = useContext(KeyringContext);
 
@@ -92,6 +96,8 @@ export function ImportWithJson(): React.ReactElement {
       }
 
       keyring.restoreAccount(json, inputPassword);
+
+      history.push('/');
     } catch (e) {
       enqueue({
         content: e.message,

packages/accounts-app/src/AddAccount/Restore.tsx → packages/accounts-app/src/Accounts/AddAccount/Restore.tsx

@@ -24,7 +24,7 @@ export function Restore(props: Props): React.ReactElement {
           With Phrase
         </Menu.Item>
       </Menu>
-      {screen === 'JSON' ? <ImportWithJson /> : <ImportWithPhrase {...props} />}
+      {screen === 'JSON' ? <ImportWithJson {...props} /> : <ImportWithPhrase {...props} />}
     </>
   );
 }

packages/accounts-app/src/Accounts/Overview.tsx

@@ -0,0 +1,35 @@
+// Copyright 2018-2020 @paritytech/substrate-light-ui 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 { KeyringContext } from '@substrate/context';
+import { StackedHorizontal, StyledLinkButton } from '@substrate/ui-components';
+import React, { useContext } from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+
+import { AccountsOverviewCard } from './OverviewCard';
+
+type Props = RouteComponentProps;
+
+export function AccountsOverview(props: Props): React.ReactElement {
+  const { history } = props;
+  const { accounts } = useContext(KeyringContext);
+
+  return (
+    <StackedHorizontal>
+      {Object.values(accounts).map(account => {
+        return (
+          <AccountsOverviewCard
+            address={account.json.address}
+            name={account.json.meta.name}
+            history={history}
+            key={account.json.address}
+          />
+        );
+      })}
+      <Link to='/accounts/add'>
+        <StyledLinkButton>Add Account</StyledLinkButton>
+      </Link>
+    </StackedHorizontal>
+  );
+}

packages/accounts-app/src/ManageAddresses/index.ts → packages/accounts-app/src/Accounts/index.ts

@@ -2,4 +2,4 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-export * from './ManageAddresses';
+export * from './Accounts';

packages/accounts-app/src/ManageAddresses/Add.tsx → packages/accounts-app/src/Addresses/Add.tsx

@@ -4,15 +4,19 @@
 
 import { Margin, Stacked, SubHeader } from '@substrate/ui-components';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { SaveAddress } from './SaveAddress';
 
 export function Add(): React.ReactElement {
   return (
-    <Stacked>
-      <SubHeader> Enter an address and save it with a name for later use. </SubHeader>
-      <Margin top />
-      <SaveAddress />
-    </Stacked>
+    <>
+      <Link to='/addresses'>&larr; Back</Link>
+      <Stacked>
+        <SubHeader>Enter an address and save it with a name for later use.</SubHeader>
+        <Margin top />
+        <SaveAddress />
+      </Stacked>
+    </>
   );
 }

packages/accounts-app/src/ManageAddresses/ManageAddresses.tsx → packages/accounts-app/src/Addresses/Addresses.tsx

@@ -7,14 +7,14 @@ import { Route, Switch } from 'react-router-dom';
 
 import { Add } from './Add';
 import { Edit } from './Edit';
-import { SavedAddresses } from './SavedAddresses';
+import { Overview } from './Overview';
 
-export function ManageAddresses(): React.ReactElement {
+export function Addresses(): React.ReactElement {
   return (
     <Switch>
-      <Route path='/addresses/:currentAccount/edit' component={Edit} />
-      <Route path='/addresses/:currentAccount/add' component={Add} />
-      <Route path='/addresses/:currentAccount' component={SavedAddresses} />
+      <Route path='/addresses/add' component={Add} />
+      <Route path='/addresses/:address' component={Edit} />
+      <Route path='/addresses' component={Overview} />
     </Switch>
   );
 }

packages/accounts-app/src/Addresses/Edit.tsx

@@ -0,0 +1,22 @@
+// Copyright 2018-2020 @paritytech/substrate-light-ui 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 { Margin, Stacked, SubHeader } from '@substrate/ui-components';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { SaveAddress } from './SaveAddress';
+
+export function Edit(): React.ReactElement {
+  return (
+    <>
+      <Link to='/addresses'>&larr; Back</Link>
+      <Stacked>
+        <SubHeader>Edit Address</SubHeader>
+        <Margin top />
+        <SaveAddress />
+      </Stacked>
+    </>
+  );
+}

packages/accounts-app/src/Addresses/Overview.tsx

@@ -0,0 +1,60 @@
+// Copyright 2018-2020 @paritytech/substrate-light-ui 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 { SingleAddress } from '@polkadot/ui-keyring/observable/types';
+import { KeyringContext } from '@substrate/context';
+import {
+  AddressSummary,
+  CopyButton,
+  Margin,
+  Stacked,
+  StackedHorizontal,
+  StyledLinkButton,
+  SubHeader,
+  WithSpace,
+  WrapperDiv,
+} from '@substrate/ui-components';
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+function renderAllAddressesFromKeyring(addresses: SingleAddress[]): React.ReactElement {
+  return addresses.length ? (
+    <>
+      {addresses.map((address: SingleAddress) => (
+        <React.Fragment key={address.json.address}>
+          <Margin top />
+          <StackedHorizontal>
+            <Link to={`/addresses/${address.json.address}`}>
+              <AddressSummary
+                address={address.json.address}
+                name={address.json.meta.name}
+                orientation='horizontal'
+                size='small'
+              />
+            </Link>
+            <Margin left />
+            <CopyButton value={address.json.address} />
+          </StackedHorizontal>
+        </React.Fragment>
+      ))}
+    </>
+  ) : (
+    <p>It looks like you haven&apos;t saved any addresses yet.</p>
+  );
+}
+
+export function Overview(): React.ReactElement {
+  const { addresses } = useContext(KeyringContext);
+  return (
+    <WrapperDiv>
+      <Stacked>
+        <SubHeader>Select an address to edit its metadata.</SubHeader>
+        <WithSpace>{renderAllAddressesFromKeyring(Object.values(addresses))}</WithSpace>
+        <Link to='/addresses/add'>
+          <StyledLinkButton>Add Address</StyledLinkButton>
+        </Link>
+      </Stacked>
+    </WrapperDiv>
+  );
+}

packages/accounts-app/src/ManageAddresses/SaveAddress/SaveAddress.tsx → packages/accounts-app/src/Addresses/SaveAddress/SaveAddress.tsx

@@ -2,14 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { isFunction } from '@polkadot/util';
 import { KeyringContext } from '@substrate/context';
 import { ErrorText, Form, Input, Margin, NavButton, Stacked, SuccessText, WrapperDiv } from '@substrate/ui-components';
 import React, { useContext, useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
 
-interface Props {
-  addressDisabled?: boolean;
-  onSave?: () => void;
+interface MatchParams {
+  address?: string;
 }
 
 function renderError(error?: string): React.ReactElement {
@@ -20,16 +19,19 @@ function renderSuccess(success?: string): React.ReactElement {
   return <SuccessText>{success}</SuccessText>;
 }
 
-export function SaveAddress(props: Props): React.ReactElement {
-  const { addressDisabled, onSave } = props;
+export function SaveAddress(): React.ReactElement {
+  const { address: currentAddress } = useParams<MatchParams>();
+  const history = useHistory();
+  const { keyring, addresses } = useContext(KeyringContext);
 
-  const { keyring } = useContext(KeyringContext);
+  // We're in Edit mode if the URL contains the currentAddress
+  const isEditing = !!currentAddress;
 
-  const [address, setAddress] = useState();
-  const [name, setName] = useState();
+  const [address, setAddress] = useState(currentAddress || '');
+  const [name, setName] = useState(currentAddress ? addresses[currentAddress].json.meta.name : '');
 
-  const [error, setError] = useState<string | undefined>(undefined);
-  const [success, setSuccess] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState<string>();
 
   const onError = (value?: string): void => {
     setError(value);
@@ -62,9 +64,7 @@ export function SaveAddress(props: Props): React.ReactElement {
 
       onSuccess('Successfully saved address');
 
-      if (onSave && isFunction(onSave)) {
-        onSave();
-      }
+      history.push('/addresses');
     } catch (e) {
       onError(e.message);
     }
@@ -75,7 +75,7 @@ export function SaveAddress(props: Props): React.ReactElement {
       <Stacked>
         <WrapperDiv>
           <Input
-            disabled={addressDisabled}
+            disabled={isEditing}
             fluid
             label='Address'
             onChange={handleChangeAddress}

packages/accounts-app/src/Overview/index.ts → packages/accounts-app/src/Addresses/index.ts

@@ -2,4 +2,4 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-export * from './AccountsOverview';
+export * from './Addresses';