fix: Fixes polkadot-js#290. Toggles Address Add/Edit menu correctly (p…

…olkadot-js#292)

* fix: Fixes polkadot-js#290. Toggles Address Add/Edit menu correctly

* fix: Rename to hasNoAddresses

packages/app-addresses/src/Creator.tsx

@@ -17,7 +17,7 @@ import AddressSummary from '@polkadot/ui-app/AddressSummary';
 import translate from './translate';
 
 type Props = I18nProps & {
-  onBack: () => void
+  onCreateAddress: () => void
 };
 
 type State = {
@@ -160,13 +160,13 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   onCommit = (): void => {
-    const { onBack } = this.props;
+    const { onCreateAddress } = this.props;
     const { address, name } = this.state;
 
     keyring.saveAddress(address, { name });
     InputAddress.setLastValue('address', address);
 
-    onBack();
+    onCreateAddress();
   }
 
   onDiscard = (): void => {

packages/app-addresses/src/Editor.tsx

@@ -18,8 +18,7 @@ import withObservableBase from '@polkadot/ui-react-rx/with/observableBase';
 import translate from './translate';
 
 type Props = I18nProps & {
-  addressAll?: Array<any>,
-  onBack: () => void
+  addressAll?: Array<any>
 };
 
 type State = {

packages/app-addresses/src/index.tsx

@@ -7,13 +7,18 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
+
+import addressObservable from '@polkadot/ui-keyring/observable/addresses';
 import Tabs from '@polkadot/ui-app/Tabs';
+import withObservableBase from '@polkadot/ui-react-rx/with/observableBase';
 
+import { hasNoAddresses } from './util/addresses';
 import Creator from './Creator';
 import Editor from './Editor';
 import translate from './translate';
 
 type Props = I18nProps & {
+  addressAll?: Array<any>,
   basePath: string
 };
 
@@ -32,8 +37,17 @@ const Components: { [index: string]: React.ComponentType<any> } = {
 class AddressesApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
+  componentDidUpdate () {
+    const { addressAll } = this.props;
+    const { action } = this.state;
+
+    if (action === 'edit' && hasNoAddresses(addressAll)) {
+      this.selectCreate();
+    }
+  }
+
   render () {
-    const { t } = this.props;
+    const { addressAll, t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
     const items = [
@@ -47,6 +61,11 @@ class AddressesApp extends React.PureComponent<Props, State> {
       }
     ];
 
+    // Do not load Editor tab if no addresses
+    if (hasNoAddresses(addressAll)) {
+      items.splice(0, 1);
+    }
+
     return (
       <main className='addresses--App'>
         <header>
@@ -56,7 +75,7 @@ class AddressesApp extends React.PureComponent<Props, State> {
             onChange={this.onMenuChange}
           />
         </header>
-        <Component onBack={this.selectEdit} />
+        <Component onCreateAddress={this.selectEdit} />
       </main>
     );
   }
@@ -65,9 +84,15 @@ class AddressesApp extends React.PureComponent<Props, State> {
     this.setState({ action });
   }
 
+  selectCreate = (): void => {
+    this.setState({ action: 'create' });
+  }
+
   selectEdit = (): void => {
     this.setState({ action: 'edit' });
   }
 }
 
-export default translate(AddressesApp);
+export default withObservableBase(
+  addressObservable.subject, { propName: 'addressAll' }
+)(translate(AddressesApp));

packages/app-addresses/src/util/addresses.ts

@@ -0,0 +1,24 @@
+// Copyright 2017-2018 @polkadot/app-accounts authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+let addressesQty: (addressAll?: Array<any>) => number;
+
+let hasAddresses: (addressAll?: Array<any>) => boolean;
+
+let hasNoAddresses: (addressAll?: Array<any>) => boolean;
+
+addressesQty = (addressAll?: Array<any>): number =>
+  hasAddresses(addressAll) && addressAll ? Object.keys(addressAll).length : 0;
+
+hasAddresses = (addressAll?: Array<any>): boolean =>
+  !hasNoAddresses(addressAll);
+
+hasNoAddresses = (addressAll?: Array<any>): boolean =>
+  !addressAll || !Object.keys(addressAll).length;
+
+export {
+  addressesQty,
+  hasAddresses,
+  hasNoAddresses
+};

packages/ui-app/src/Tabs.tsx

@@ -34,6 +34,14 @@ export default class Tabs extends React.PureComponent<Props, State> {
     };
   }
 
+  componentDidUpdate (prevProps: Props, prevState: State) {
+    const { activeItem } = this.props;
+
+    if (activeItem !== prevState.active) {
+      this.setState({ active: activeItem });
+    }
+  }
+
   render () {
     const { className, activeItem, items, style } = this.props;
     const { active } = this.state;