Merge pull request #1696 from ethereum/swap_it_update_store

Swap it update store

.babelrc

@@ -7,6 +7,7 @@
               "transform-es2015-classes",
               "transform-es2015-computed-properties",
               "transform-es2015-destructuring",
+              "transform-object-rest-spread",
               "transform-es2015-duplicate-keys",
               "transform-es2015-for-of",
               "transform-es2015-function-name",

package.json

@@ -7,6 +7,7 @@
     "async": "^2.1.2",
     "babel-eslint": "^7.1.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-yo-yoify": "^0.3.3",
     "babel-polyfill": "^6.22.0",
     "babel-preset-env": "^1.6.1",

src/app.js

@@ -411,7 +411,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   // TODOs those are instanciated before hand. should be instanciated on demand
 
-  let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
+  let appStore = new EntityStore('module')
   const pluginManagerComponent = new PluginManagerComponent()
   const appManager = new RemixAppManager(appStore)
   const swapPanelComponent = new SwapPanelComponent('swapPanel', appStore, appManager, { default: true })

src/app/components/plugin-manager-component.js

@@ -36,8 +36,8 @@ class PluginManagerComponent {
     this.store = store
     this.store.event.on('activate', (name) => { this.reRender() })
     this.store.event.on('deactivate', (name) => { this.reRender() })
-    this.store.event.on('add', (name) => { this.reRender() })
-    this.store.event.on('remove', (name) => { this.reRender() })
+    this.store.event.on('add', (entity) => { this.reRender() })
+    this.store.event.on('remove', (entity) => { this.reRender() })
   }
 
   render () {

src/app/components/swap-panel-component.js

@@ -22,7 +22,7 @@ class SwapPanelComponent {
     })
 
     this.store.event.on('activate', (name) => {
-      const { profile, api } = this.store.get(name)
+      const { profile, api } = this.store.getOne(name)
       if (((profile.prefferedLocation === this.name) || (!profile.prefferedLocation && opt.default)) &&
         profile.icon && api.render && typeof api.render === 'function') {
         this.add(name, api.render())
@@ -32,8 +32,8 @@ class SwapPanelComponent {
     this.store.event.on('deactivate', (name) => {
       if (this.contents[name]) this.remove(name)
     })
-    this.store.event.on('add', (name) => { })
-    this.store.event.on('remove', (name) => { })
+    this.store.event.on('add', (entity) => { })
+    this.store.event.on('remove', (entity) => { })
   }
 
   showContent (moduleName) {

src/app/components/vertical-icons-component.js

@@ -13,15 +13,15 @@ class VerticalIconComponent {
     this.iconKind = {}
 
     this.store.event.on('activate', (name) => {
-      const item = this.store.get(name)
+      const item = this.store.getOne(name)
       if (item && item.profile.icon && name !== 'code editor') this.addIcon(item.profile)
     })
     this.store.event.on('deactivate', (name) => {
-      const item = this.store.get(name)
+      const item = this.store.getOne(name)
       if (item && this.icons[name]) this.removeIcon(item.profile)
     })
-    this.store.event.on('add', (name) => { })
-    this.store.event.on('remove', (name) => { })
+    this.store.event.on('add', (entity) => { })
+    this.store.event.on('remove', (entity) => { })
   }
 
   addIcon (mod) {

src/lib/store.js

@@ -24,7 +24,7 @@ export class Store {
   constructor (name, initialState) {
     this.event = new EventEmitter()
     this.name = name
-    this.state = initialState
+    this.state = initialState || {}
   }
 
   /** Listen on event from the store */
@@ -41,11 +41,10 @@ export class Store {
    * Update one field of the state
    * @param {Partial<T>} state The part of the state updated
    */
-  /*
-  update(state) {
+  update (state) {
     this.state = { ...this.state, ...state }
+    this.dispatch()
   }
-  */
 
   /**
    * Get one field of the state
@@ -53,7 +52,7 @@ export class Store {
    * @param {Key} key A key of the state
    */
   get (key) {
-    return this.state.entities[key]
+    return this.state[key]
   }
 
   /** Reset the state its initial value */
@@ -80,41 +79,54 @@ export class EntityStore extends Store {
   /**
    * Instanciate the store from `localStorage` first
    * @param {string} name The name of the store
+   * @param {(string|number)} keyId The name of the key used as a unique ID for the entity
    * @param {EntityState} initialState The initial state used if state is not available in `localStorage`
    */
-  static fromLocal (name, initialState) {
+  static fromLocal (name, keyId, initialState = {}) {
     const fromLocal = localStorage.getItem(name)
     const intial = fromLocal ? JSON.parse(fromLocal) : initialState
-    return new EntityStore(name, intial)
+    return new EntityStore(name, keyId, intial)
   }
 
   /**
    * Create a entity Store that hold a map entity of the same model
    * @param {string} name The name of the store
+   * @param {(string|number)} keyId The name of the key used as a unique ID for the entity
    * @param {EntityState} initialState The initial state used if state is not available in `localStorage`
    */
-  /*
-  constructor (name, initialState) {
+  constructor (name, keyId, initialState = { ids: [], actives: [], entities: {} }) {
     super(name, initialState)
+    this.keyId = keyId || 'id'
   }
-  */
 
-  /** Tne entities as a Map */
+  /**
+   * The entities as a Map
+   * @returns {Object}
+   */
   get entities () {
     return this.state.entities
   }
 
-  /** List of all the ids */
+  /**
+   * List of all the ids
+   * @returns {(string|number)[]}
+   */
   get ids () {
     return this.state.ids
   }
 
-  /** List of all active ID */
+  /**
+   * List of all active ID
+   * @returns {Object[]}
+   */
   get actives () {
     return this.state.actives
   }
 
-  /** Return the length of the entity collection */
+  /**
+   * Return the length of the entity collection
+   * @returns {number}
+   */
   get length () {
     return this.state.ids.length
   }
@@ -126,7 +138,7 @@ export class EntityStore extends Store {
   add (id, entity) {
     this.state.entities[id] = entity
     this.state.ids.push(id)
-    this.event.emit('add', id, entity)
+    this.event.emit('add', entity)
   }
 
   /**
@@ -134,7 +146,11 @@ export class EntityStore extends Store {
    * @param {Array} entities
    */
   addEntities (entities) {
-    entities.forEach((entity) => { this.add(entity.profile.name, entity) })
+    entities.forEach((entity) => {
+      if (!entity[this.keyId]) throw new Error(`Key ${this.keyId} doesn't exist in ${entity}`)
+      this.add(entity[this.keyId], entity)
+    })
+    this.event.emit('add', entities)
   }
 
   /**
@@ -142,9 +158,20 @@ export class EntityStore extends Store {
    * @param {(string|number)} id The id of the entity to remove
    */
   remove (id) {
+    if (!this.state.entities[id]) throw new Error(`No entity with key ${id} found in store ${this.name}`)
     delete this.state.entities[id]
     this.state.ids.splice(this.state.ids.indexOf(id), 1)
     this.state.actives.splice(this.state.ids.indexOf(id), 1)
+    this.event.emit('remove', id)
+  }
+
+  /** Remove all entity from the state and reset actives and ids to empty */
+  clear () {
+    this.state = {
+      ids: [],
+      actives: []
+    }
+    this.event.emit('clear')
   }
 
   /**
@@ -152,14 +179,14 @@ export class EntityStore extends Store {
    * @param {(string|number)} id The id of the entity to update
    * @param {Object} update The fields to update in the entity
    */
-  /*
-  updateOne(id, update) {
+  updateOne (id, update) {
+    if (!this.state.entities[id]) throw new Error(`No entity with key ${id} found in store ${this.name}`)
     this.state.entities[id] = {
       ...this.state.entities[id],
       ...update
     }
+    this.event.emit('update', this.state.entities[id])
   }
-  */
 
   /**
    * Activate one or several entity from the state
@@ -186,6 +213,7 @@ export class EntityStore extends Store {
   /**
    * Get one entity
    * @param {(string|number)} id The id of the entity to get
+   * @returns {Object}
    */
   getOne (id) {
     return this.state.entities[id]
@@ -194,17 +222,24 @@ export class EntityStore extends Store {
   /**
    * Get many entities as an array
    * @param {(string|number)[]} ids An array of id of entity to get
+   * @returns {Object[]}
    */
   getMany (ids) {
     return ids.map(id => this.state.entities[id])
   }
 
-  /** Get all the entities as an array */
+  /**
+   * Get all the entities as an array
+   * @returns {Object[]}
+   */
   getAll () {
     return this.state.ids.map(id => this.state.entities[id])
   }
 
-  /** Get all active entities */
+  /**
+   * Get all active entities
+   * @returns {Object[]}
+   */
   getActives () {
     return this.state.actives.map(id => this.state.entities[id])
   }
@@ -212,6 +247,7 @@ export class EntityStore extends Store {
   /**
    * Is the entity active
    * @param {(string|number)} id The id of the entity to check
+   * @returns {boolean}
    */
   isActive (id) {
     return this.state.actives.includes(id)
@@ -220,6 +256,7 @@ export class EntityStore extends Store {
   /**
    * Is this id inside the store
    * @param {(string|number)} id The id of the entity to check
+   * @returns {boolean}
    */
   hasEntity (id) {
     return this.state.ids.includes(id)
@@ -228,6 +265,7 @@ export class EntityStore extends Store {
   /**
    * Is the state empty
    * @param {(string|number)} id The id of the entity to check
+   * @returns {boolean}
    */
   isEmpty () {
     return this.state.ids.length === 0
@@ -238,8 +276,7 @@ export class EntityStore extends Store {
  * Store the state of the stores into LocalStorage
  * @param {Store[]} stores The list of stores to store into `localStorage`
  */
-/*
-function localState (stores) {
+export function localState (stores) {
   stores.forEach(store => {
     const name = store.name
     store.on('newState', (state) => {
@@ -247,4 +284,3 @@ function localState (stores) {
     })
   })
 }
-*/

src/remixAppManager.js

@@ -32,7 +32,7 @@ export class RemixAppManager extends AppManagerApi {
   }
 
   getEntity (entityName) {
-    return this.store.get(entityName)
+    return this.store.getOne(entityName)
   }
 
   addEntity (entity) {