Store for EditPassword Modal (#3979)

* External store (WIP)

* address & meta

* Add editable (WIP)

* View converted (WIP)

* Single API stub creation

* Testing (WIP)

* Simplified meta assign

* Tests running

* Fix duplicate exports

* Fix tags not editable

js/src/modals/EditMeta/editMeta.js

@@ -85,7 +85,7 @@ export default class EditMeta extends Component {
                 defaultMessage='(optional) tags' />
             }
             onTokensChange={ this.store.setTags }
-            tokens={ tags } />
+            tokens={ tags.slice() } />
         </Form>
       </Modal>
     );

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

@@ -20,7 +20,7 @@ import sinon from 'sinon';
 
 import EditMeta from './';
 
-import { ACCOUNT } from './editMeta.test.js';
+import { ACCOUNT, createApi } from './editMeta.test.js';
 
 let component;
 let onClose;
@@ -35,12 +35,7 @@ function render (props) {
       onClose={ onClose } />,
     {
       context: {
-        api: {
-          parity: {
-            setAccountName: sinon.stub().resolves(),
-            setAccountMeta: sinon.stub().resolves()
-          }
-        }
+        api: createApi()
       }
     }
   );

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

@@ -14,6 +14,8 @@
 // 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';
+
 const ACCOUNT = {
   address: '0x123456789a123456789a123456789a123456789a',
   meta: {
@@ -39,7 +41,17 @@ const ADDRESS = {
   name: 'Random address'
 };
 
+function createApi () {
+  return {
+    parity: {
+      setAccountName: sinon.stub().resolves(),
+      setAccountMeta: sinon.stub().resolves()
+    }
+  };
+}
+
 export {
   ACCOUNT,
-  ADDRESS
+  ADDRESS,
+  createApi
 };

js/src/modals/EditMeta/store.js

@@ -14,7 +14,7 @@
 // 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, observable, toJS, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
 
 import { newError } from '~/redux/actions';
 import { validateName } from '~/util/validation';
@@ -23,25 +23,27 @@ export default class Store {
   @observable address = null;
   @observable isAccount = false;
   @observable description = null;
-  @observable meta = {};
+  @observable meta = null;
   @observable name = null;
   @observable nameError = null;
   @observable passwordHint = null;
-  @observable tags = [];
+  @observable tags = null;
 
   constructor (api, account) {
     const { address, name, meta, uuid } = account;
 
     this._api = api;
 
-    this.isAccount = !!uuid;
-    this.address = address;
-    this.meta = Object.assign({}, meta || {});
-    this.name = name || '';
+    transaction(() => {
+      this.isAccount = !!uuid;
+      this.address = address;
+      this.meta = meta || {};
+      this.name = name || '';
 
-    this.description = this.meta.description || '';
-    this.passwordHint = this.meta.passwordHint || '';
-    this.tags = [].concat((meta || {}).tags || []);
+      this.description = this.meta.description || '';
+      this.passwordHint = this.meta.passwordHint || '';
+      this.tags = this.meta.tags && this.meta.tags.peek() || [];
+    });
   }
 
   @computed get hasError () {
@@ -70,7 +72,7 @@ export default class Store {
   }
 
   @action setTags = (tags) => {
-    this.tags = [].concat(tags);
+    this.tags = tags.slice();
   }
 
   save () {
@@ -86,7 +88,7 @@ export default class Store {
     return Promise
       .all([
         this._api.parity.setAccountName(this.address, this.name),
-        this._api.parity.setAccountMeta(this.address, Object.assign({}, toJS(this.meta), meta))
+        this._api.parity.setAccountMeta(this.address, Object.assign({}, this.meta, meta))
       ])
       .catch((error) => {
         console.error('onSave', error);

js/src/modals/EditMeta/store.spec.js

@@ -14,22 +14,14 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { toJS } from 'mobx';
-import sinon from 'sinon';
-
 import Store from './store';
-import { ACCOUNT, ADDRESS } from './editMeta.test.js';
+import { ACCOUNT, ADDRESS, createApi } from './editMeta.test.js';
 
 let api;
 let store;
 
 function createStore (account) {
-  api = {
-    parity: {
-      setAccountName: sinon.stub().resolves(),
-      setAccountMeta: sinon.stub().resolves()
-    }
-  };
+  api = createApi();
 
   store = new Store(api, account);
 
@@ -56,12 +48,12 @@ describe('modals/EditMeta/Store', () => {
       });
 
       it('extracts the tags', () => {
-        expect(store.tags.peek()).to.deep.equal(ACCOUNT.meta.tags);
+        expect(store.tags).to.deep.equal(ACCOUNT.meta.tags);
       });
 
       describe('meta', () => {
         it('extracts the full meta', () => {
-          expect(toJS(store.meta)).to.deep.equal(ACCOUNT.meta);
+          expect(store.meta).to.deep.equal(ACCOUNT.meta);
         });
 
         it('extracts the description', () => {