Merge pull request #1688 from ethereum/swap_it_store

Use store.js

.circleci/config.yml

@@ -26,10 +26,10 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - dep-bundle-27-{{ checksum "package.json" }}
+            - dep-bundle-28-{{ checksum "package.json" }}
       - run: npm install
       - save_cache:
-          key: dep-bundle-27-{{ checksum "package.json" }}
+          key: dep-bundle-28-{{ checksum "package.json" }}
           paths:
             - ~/repo/node_modules
       - run: npm run lint && npm run test && npm run make-mock-compiler && npm run build

src/app.js

@@ -411,15 +411,15 @@ 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: {} })
   const pluginManagerComponent = new PluginManagerComponent()
-  const swapPanelComponent = new SwapPanelComponent()
-  const mainPanelComponent = new SwapPanelComponent()
-  const verticalIconsComponent = new VerticalIconsComponent()
+  const swapPanelComponent = new SwapPanelComponent(appStore)
+  const mainPanelComponent = new SwapPanelComponent(appStore)
+  const verticalIconsComponent = new VerticalIconsComponent(appStore)
   const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line
   const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
   const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
 
-  let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
   const appManager = new RemixAppManager(appStore, swapPanelApi, mainPanelApi, verticalIconsApi)
   registry.put({api: appManager.proxy(), name: 'pluginmanager'})
 

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

@@ -6,11 +6,19 @@ var csjs = require('csjs-inject')
 // const styles = styleguide.chooser()
 
 class SwapPanelComponent {
-  constructor () {
+  constructor (appStore) {
+    this.store = appStore
     // list of contents
     this.contents = {}
     // name of the current displayed content
     this.currentNode
+
+    this.store.event.on('activate', (name) => { })
+    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) => { })
   }
 
   showContent (moduleName) {

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

@@ -10,9 +10,21 @@ const EventEmmitter = require('events')
 // Component
 class VerticalIconComponent {
 
-  constructor () {
+  constructor (appStore) {
+    this.store = appStore
     this.event = new EventEmmitter()
     this.icons = {}
+
+    this.store.event.on('activate', (name) => {
+      const item = this.store.get(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)
+      if (item && this.icons[name]) this.removeIcon(item.profile)
+    })
+    this.store.event.on('add', (name) => { })
+    this.store.event.on('remove', (name) => { })
   }
 
   addIcon (mod) {

src/remixAppManager.js

@@ -61,10 +61,6 @@ export class RemixAppManager extends AppManagerApi {
       domEl.style.width = '100%'
       domEl.style.border = '0'
       panel.add(profile, domEl)
-      // TODO perhaps should not be here
-      if (profile.name !== 'code editor') {
-        this.verticalIconsApi.addIcon(profile)
-      }
       return
     }
     this.hiddenNodes[profile.name] = domEl
@@ -72,11 +68,6 @@ export class RemixAppManager extends AppManagerApi {
   }
 
   removeComponent (profile) {
-    if (profile.icon) {
-      this.swapPanelApi.remove(profile)
-      this.verticalIconsApi.removeIcon(profile)
-      return
-    }
     let hiddenNode = this.hiddenNodes[profile.name]
     if (hiddenNode) document.body.removeChild(hiddenNode)
   }

test-browser/helpers/init.js

@@ -17,9 +17,9 @@ module.exports = function (browser, callback) {
 }
 
 function initModules (browser, callback) {
-  browser.click('#icon-panel div[title="plugin manager"]')
+  browser.click('#icon-panel div[title="pluginManager"]')
   .execute(function () {
-    document.querySelector('div[title="plugin manager"]').scrollTop = document.querySelector('div[title="plugin manager"]').scrollHeight
+    document.querySelector('div[title="pluginManager"]').scrollTop = document.querySelector('div[title="pluginManager"]').scrollHeight
   }, [], function () {
     browser.click('#pluginManager div[title="solidity"] button')
     .click('#pluginManager div[title="run transactions"] button')