Store for EditMeta modal (#3959)

* Store basics

* Tested

js/src/modals/EditMeta/editMeta.js

@@ -14,137 +14,130 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
-import ContentClear from 'material-ui/svg-icons/content/clear';
-import ContentSave from 'material-ui/svg-icons/content/save';
+import { FormattedMessage } from 'react-intl';
 
 import { Button, Form, Input, InputChip, Modal } from '~/ui';
-import { validateName } from '~/util/validation';
+import { CancelIcon, SaveIcon } from '~/ui/Icons';
 
+import Store from './store';
+
+@observer
 export default class EditMeta extends Component {
   static contextTypes = {
-    api: PropTypes.object.isRequired,
-    store: PropTypes.object.isRequired
+    api: PropTypes.object.isRequired
   }
 
   static propTypes = {
-    keys: PropTypes.array.isRequired,
     account: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired
   }
 
-  state = {
-    meta: Object.assign({}, this.props.account.meta),
-    metaErrors: {},
-    name: this.props.account.name,
-    nameError: null
-  }
+  store = new Store(this.context.api, this.props.account);
 
   render () {
-    const { name, nameError } = this.state;
+    const { description, name, nameError, tags } = this.store;
 
     return (
       <Modal
-        visible
         actions={ this.renderActions() }
-        title='edit metadata'>
+        title={
+          <FormattedMessage
+            id='editMeta.title'
+            defaultMessage='edit metadata' />
+        }
+        visible>
         <Form>
           <Input
-            label='name'
-            value={ name }
             error={ nameError }
-            onSubmit={ this.onNameChange } />
-          { this.renderMetaFields() }
-          { this.renderTags() }
+            label={
+              <FormattedMessage
+                id='editMeta.name.label'
+                defaultMessage='name' />
+            }
+            onSubmit={ this.store.setName }
+            value={ name } />
+          <Input
+            hint={
+              <FormattedMessage
+                id='editMeta.description.hint'
+                defaultMessage='description for this address' />
+            }
+            label={
+              <FormattedMessage
+                id='editMeta.description.label'
+                defaultMessage='address description' />
+            }
+            value={ description }
+            onSubmit={ this.store.setDescription } />
+          { this.renderAccountFields() }
+          <InputChip
+            addOnBlur
+            hint={
+              <FormattedMessage
+                id='editMeta.tags.hint'
+                defaultMessage='press <Enter> to add a tag' />
+            }
+            label={
+              <FormattedMessage
+                id='editMeta.tags.label'
+                defaultMessage='(optional) tags' />
+            }
+            onTokensChange={ this.store.setTags }
+            tokens={ tags } />
         </Form>
       </Modal>
     );
   }
 
   renderActions () {
-    const { nameError } = this.state;
+    const { hasError } = this.store;
 
     return [
       <Button
         label='Cancel'
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
         onClick={ this.props.onClose } />,
       <Button
-        disabled={ !!nameError }
+        disabled={ hasError }
         label='Save'
-        icon={ <ContentSave /> }
+        icon={ <SaveIcon /> }
         onClick={ this.onSave } />
     ];
   }
 
-  renderMetaFields () {
-    const { keys } = this.props;
-    const { meta } = this.state;
-
-    return keys.map((key) => {
-      const onSubmit = (value) => this.onMetaChange(key, value);
-      const label = `(optional) ${key}`;
-      const hint = `the optional ${key} metadata`;
-
-      return (
-        <Input
-          key={ key }
-          label={ label }
-          hint={ hint }
-          value={ meta[key] || '' }
-          onSubmit={ onSubmit } />
-      );
-    });
-  }
+  renderAccountFields () {
+    const { isAccount, passwordHint } = this.store;
 
-  renderTags () {
-    const { meta } = this.state;
+    if (!isAccount) {
+      return null;
+    }
 
     return (
-      <InputChip
-        tokens={ meta.tags || [] }
-        onTokensChange={ this.onTagsChange }
-        label='(optional) tags'
-        hint='press <Enter> to add a tag'
-        addOnBlur
-      />
+      <Input
+        hint={
+          <FormattedMessage
+            id='editMeta.passwordHint.hint'
+            defaultMessage='a hint to allow password recovery' />
+        }
+        label={
+          <FormattedMessage
+            id='editMeta.passwordHint.label'
+            defaultMessage='(optional) password hint' />
+        }
+        value={ passwordHint }
+        onSubmit={ this.store.setPasswordHint } />
     );
   }
 
-  onTagsChange = (newTags) => {
-    this.onMetaChange('tags', newTags);
-  }
-
-  onNameChange = (name) => {
-    this.setState(validateName(name));
-  }
-
-  onMetaChange = (key, value) => {
-    const { meta } = this.state;
-
-    this.setState({
-      meta: Object.assign(meta, { [key]: value })
-    });
-  }
-
   onSave = () => {
-    const { api, store } = this.context;
-    const { account } = this.props;
-    const { name, nameError, meta } = this.state;
-
-    if (nameError) {
+    if (this.store.hasError) {
       return;
     }
 
-    Promise
-      .all([
-        api.parity.setAccountName(account.address, name),
-        api.parity.setAccountMeta(account.address, Object.assign({}, account.meta, meta))
-      ])
-      .then(() => this.props.onClose())
-      .catch((error) => {
-        console.error('onSave', error);
-        store.dispatch({ type: 'newError', error });
-      });
+    return this.store
+      .save()
+      .then(() => this.props.onClose());
   }
 }

js/src/modals/EditMeta/editMeta.spec.js

@@ -0,0 +1,75 @@
+// 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 sinon from 'sinon';
+
+import EditMeta from './';
+
+import { ACCOUNT } from './editMeta.test.js';
+
+let component;
+let onClose;
+
+function render (props) {
+  onClose = sinon.stub();
+
+  component = shallow(
+    <EditMeta
+      { ...props }
+      account={ ACCOUNT }
+      onClose={ onClose } />,
+    {
+      context: {
+        api: {
+          parity: {
+            setAccountName: sinon.stub().resolves(),
+            setAccountMeta: sinon.stub().resolves()
+          }
+        }
+      }
+    }
+  );
+
+  return component;
+}
+
+describe('modals/EditMeta', () => {
+  describe('rendering', () => {
+    it('renders defaults', () => {
+      expect(render()).to.be.ok;
+    });
+  });
+
+  describe('actions', () => {
+    beforeEach(() => {
+      render();
+    });
+
+    describe('onSave', () => {
+      it('calls store.save() & props.onClose', () => {
+        const instance = component.instance();
+        sinon.spy(instance.store, 'save');
+
+        instance.onSave().then(() => {
+          expect(instance.store.save).to.have.been.called;
+          expect(onClose).to.have.been.called;
+        });
+      });
+    });
+  });
+});

js/src/modals/EditMeta/editMeta.test.js

@@ -0,0 +1,45 @@
+// 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 ACCOUNT = {
+  address: '0x123456789a123456789a123456789a123456789a',
+  meta: {
+    description: 'Call me bob',
+    passwordHint: 'some hint',
+    tags: ['testing']
+  },
+  name: 'Bobby',
+  uuid: '123-456'
+};
+
+const ADDRESS = {
+  address: '0x0123456789012345678901234567890123456789',
+  meta: {
+    description: 'Some address',
+    extraMeta: {
+      some: 'random',
+      extra: {
+        meta: 'data'
+      }
+    }
+  },
+  name: 'Random address'
+};
+
+export {
+  ACCOUNT,
+  ADDRESS
+};