Add store for AddAddress (#3819)

* WIP

* Updated tests

* Final round of fixes

* Header update

js/src/modals/AddAddress/addAddress.js

@@ -14,31 +14,29 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component, PropTypes } from 'react';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentClear from 'material-ui/svg-icons/content/clear';
+import { observer } from 'mobx-react';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal, Form, Input, InputAddress } from '~/ui';
-import { ERRORS, validateAddress, validateName } from '~/util/validation';
+import { Button, Form, Input, InputAddress, Modal } from '~/ui';
 
+import Store from './store';
+
+@observer
 export default class AddAddress extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
   static propTypes = {
-    contacts: PropTypes.object.isRequired,
     address: PropTypes.string,
-    onClose: PropTypes.func
+    contacts: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired
   };
 
-  state = {
-    address: '',
-    addressError: ERRORS.invalidAddress,
-    name: '',
-    nameError: ERRORS.invalidName,
-    description: ''
-  };
+  store = new Store(this.context.api, this.props.contacts);
 
   componentWillMount () {
     if (this.props.address) {
@@ -49,109 +47,113 @@ export default class AddAddress extends Component {
   render () {
     return (
       <Modal
-        visible
         actions={ this.renderDialogActions() }
-        title='add saved address'>
+        title={
+          <FormattedMessage
+            id='addAddress.label'
+            defaultMessage='add saved address' />
+        }
+        visible>
         { this.renderFields() }
       </Modal>
     );
   }
 
   renderDialogActions () {
-    const { addressError, nameError } = this.state;
-    const hasError = !!(addressError || nameError);
+    const { hasError } = this.store;
 
     return ([
       <Button
         icon={ <ContentClear /> }
-        label='Cancel'
-        onClick={ this.onClose } />,
+        label={
+          <FormattedMessage
+            id='addAddress.button.close'
+            defaultMessage='Cancel' />
+        }
+        onClick={ this.onClose }
+        ref='closeButton' />,
       <Button
-        icon={ <ContentAdd /> }
-        label='Save Address'
         disabled={ hasError }
-        onClick={ this.onAdd } />
+        icon={ <ContentAdd /> }
+        label={
+          <FormattedMessage
+            id='addAddress.button.add'
+            defaultMessage='Save Address' />
+        }
+        onClick={ this.onAdd }
+        ref='addButton' />
     ]);
   }
 
   renderFields () {
-    const { address, addressError, description, name, nameError } = this.state;
+    const { address, addressError, description, name, nameError } = this.store;
 
     return (
       <Form>
         <InputAddress
-          label='network address'
-          hint='the network address for the entry'
-          error={ addressError }
-          value={ address }
-          disabled={ !!this.props.address }
           allowCopy={ false }
-          onChange={ this.onEditAddress } />
+          disabled={ !!this.props.address }
+          error={ addressError }
+          hint={
+            <FormattedMessage
+              id='addAddress.input.address.hint'
+              defaultMessage='the network address for the entry' />
+          }
+          label={
+            <FormattedMessage
+              id='addAddress.input.address.label'
+              defaultMessage='network address' />
+          }
+          onChange={ this.onEditAddress }
+          ref='inputAddress'
+          value={ address } />
         <Input
-          label='address name'
-          hint='a descriptive name for the entry'
           error={ nameError }
-          value={ name }
-          onChange={ this.onEditName } />
+          hint={
+            <FormattedMessage
+              id='addAddress.input.name.hint'
+              defaultMessage='a descriptive name for the entry' />
+          }
+          label={
+            <FormattedMessage
+              id='addAddress.input.name.label'
+              defaultMessage='address name' />
+          }
+          onChange={ this.onEditName }
+          ref='inputName'
+          value={ name } />
         <Input
-          multiLine
-          rows={ 1 }
-          label='(optional) address description'
-          hint='an expanded description for the entry'
-          value={ description }
-          onChange={ this.onEditDescription } />
+          hint={
+            <FormattedMessage
+              id='addAddress.input.description.hint'
+              defaultMessage='an expanded description for the entry' />
+          }
+          label={
+            <FormattedMessage
+              id='addAddress.input.description.label'
+              defaultMessage='(optional) address description' />
+          }
+          onChange={ this.onEditDescription }
+          ref='inputDescription'
+          value={ description } />
       </Form>
     );
   }
 
-  onEditAddress = (event, _address) => {
-    const { contacts } = this.props;
-    let { address, addressError } = validateAddress(_address);
-
-    if (!addressError) {
-      const contact = contacts[address];
-
-      if (contact) {
-        addressError = ERRORS.duplicateAddress;
-      }
-    }
-
-    this.setState({
-      address,
-      addressError
-    });
+  onEditAddress = (event, address) => {
+    this.store.setAddress(address);
   }
 
   onEditDescription = (event, description) => {
-    this.setState({
-      description
-    });
+    this.store.setDescription(description);
   }
 
-  onEditName = (event, _name) => {
-    const { name, nameError } = validateName(_name);
-
-    this.setState({
-      name,
-      nameError
-    });
+  onEditName = (event, name) => {
+    this.store.setName(name);
   }
 
   onAdd = () => {
-    const { api } = this.context;
-    const { address, name, description } = this.state;
-
-    Promise.all([
-      api.parity.setAccountName(address, name),
-      api.parity.setAccountMeta(address, {
-        description,
-        timestamp: Date.now(),
-        deleted: false
-      })
-    ]).catch((error) => {
-      console.error('onAdd', error);
-    });
-
+    this.store.add();
     this.props.onClose();
   }
 

js/src/modals/AddAddress/addAddress.spec.js

@@ -0,0 +1,32 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import AddAddress from './';
+
+describe('modals/AddAddress', () => {
+  describe('rendering', () => {
+    it('renders defaults', () => {
+      expect(
+        shallow(
+          <AddAddress />
+        )
+      ).to.be.ok;
+    });
+  });
+});

js/src/modals/AddAddress/store.js

@@ -0,0 +1,87 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, computed, transaction, observable } from 'mobx';
+
+import { ERRORS, validateAddress, validateName } from '~/util/validation';
+
+export default class Store {
+  @observable address = '';
+  @observable addressError = ERRORS.invalidAddress;
+  @observable createError = null;
+  @observable description = '';
+  @observable name = '';
+  @observable nameError = ERRORS.invalidName;
+
+  constructor (api, contacts) {
+    this._api = api;
+    this._contacts = contacts;
+  }
+
+  @computed get hasError () {
+    return !!(this.addressError || this.nameError);
+  }
+
+  @action setAddress = (_address) => {
+    let { address, addressError } = validateAddress(_address);
+
+    if (!addressError) {
+      const contact = this._contacts[address];
+
+      if (contact) {
+        addressError = ERRORS.duplicateAddress;
+      }
+    }
+
+    transaction(() => {
+      this.address = address;
+      this.addressError = addressError;
+    });
+  }
+
+  @action setCreateError = (error) => {
+    this.createError = error;
+  }
+
+  @action setDescription = (description) => {
+    this.description = description;
+  }
+
+  @action setName = (_name) => {
+    const { name, nameError } = validateName(_name);
+
+    transaction(() => {
+      this.name = name;
+      this.nameError = nameError;
+    });
+  }
+
+  add () {
+    return Promise
+      .all([
+        this._api.parity.setAccountName(this.address, this.name),
+        this._api.parity.setAccountMeta(this.address, {
+          description: this.description,
+          timestamp: Date.now(),
+          deleted: false
+        })
+      ])
+      .catch((error) => {
+        console.warn('Store:add', error);
+        this.setCreateError(error);
+      });
+  }
+}

js/src/modals/AddAddress/store.spec.js

@@ -0,0 +1,128 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+
+import Store from './store';
+
+import { TEST_ADDR_A, TEST_ADDR_B, TEST_CONTACTS } from './store.test.js';
+
+describe('modals/AddAddress/store', () => {
+  let store;
+
+  describe('@action', () => {
+    beforeEach(() => {
+      store = new Store(null, TEST_CONTACTS);
+    });
+
+    describe('setAddress', () => {
+      it('successfully sets non-existent addresses', () => {
+        store.setAddress(TEST_ADDR_B);
+
+        expect(store.addressError).to.be.null;
+        expect(store.address).to.equal(TEST_ADDR_B);
+      });
+
+      it('fails on invalid addresses', () => {
+        store.setAddress('0xinvalid');
+
+        expect(store.addressError).not.to.be.null;
+      });
+
+      it('fails when an address is already added', () => {
+        store.setAddress(TEST_ADDR_A);
+
+        expect(store.addressError).not.to.be.null;
+      });
+    });
+
+    describe('setName', () => {
+      it('sucessfully sets valid names', () => {
+        const name = 'Test Name';
+
+        store.setName(name);
+
+        expect(store.nameError).to.be.null;
+        expect(store.name).to.equal(name);
+      });
+
+      it('fails when name is invalid', () => {
+        store.setName(null);
+
+        expect(store.nameError).not.to.be.null;
+      });
+    });
+  });
+
+  describe('@computed', () => {
+    beforeEach(() => {
+      store = new Store(null, TEST_CONTACTS);
+    });
+
+    describe('hasError', () => {
+      beforeEach(() => {
+        store.setAddress(TEST_ADDR_B);
+        store.setName('Test Name');
+      });
+
+      it('returns false proper inputs', () => {
+        expect(store.hasError).to.be.false;
+      });
+
+      it('returns true with addressError', () => {
+        store.setAddress(TEST_ADDR_A);
+
+        expect(store.addressError).not.to.be.null;
+        expect(store.hasError).to.be.true;
+      });
+
+      it('returns true with nameError', () => {
+        store.setName(null);
+
+        expect(store.nameError).not.to.be.null;
+        expect(store.hasError).to.be.true;
+      });
+    });
+  });
+
+  describe('methods', () => {
+    let api;
+
+    beforeEach(() => {
+      api = {
+        parity: {
+          setAccountMeta: sinon.stub().resolves(true),
+          setAccountName: sinon.stub().resolves(true)
+        }
+      };
+      store = new Store(api, {});
+    });
+
+    describe('add', () => {
+      it('calls setAccountMeta', () => {
+        store.add();
+
+        expect(api.parity.setAccountMeta).to.have.been.called;
+      });
+
+      it('calls setAccountName', () => {
+        store.add();
+
+        expect(api.parity.setAccountName).to.have.been.called;
+      });
+    });
+  });
+});

js/src/modals/AddAddress/store.test.js

@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const TEST_ADDR_A = '0x63Cf90D3f0410092FC0fca41846f596223979195';
+const TEST_ADDR_B = '0x00A40dEfa9933e82244bE542Fa7F8748eCCdd457';
+
+const TEST_CONTACTS = {
+  [TEST_ADDR_A]: { name: 'test', meta: {} }
+};
+
+export {
+  TEST_ADDR_A,
+  TEST_ADDR_B,
+  TEST_CONTACTS
+};