From 70cc755007338e5d1335f7b4fd510e82cc457621 Mon Sep 17 00:00:00 2001
From: Iuri Matias <iuri.matias@gmail.com>
Date: Fri, 11 Jan 2019 19:09:27 -0500
Subject: [PATCH] refactor run-tab

---
 src/app/tabs/run-tab.js                    | 169 +++++++++++----------
 src/app/tabs/runTab/model/dropdownlogic.js |   3 +-
 src/app/tabs/runTab/model/recorder.js      |   7 +
 3 files changed, 95 insertions(+), 84 deletions(-)

diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 5dec14d665..9562c164e1 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -1,7 +1,5 @@
 var yo = require('yo-yo')
 var EventManager = require('../../lib/events')
-var globalRegistry = require('../../global/registry')
-var executionContext = require('../../execution-context')
 var Card = require('../ui/card')
 var css = require('./styles/run-tab-styles')
 
@@ -17,125 +15,132 @@ var RecorderUI = require('./runTab/recorder.js')
 class RunTab {
 
   constructor (udapp, udappUI, config, fileManager, editor, logCallback, filePanel, pluginManager, compilersArtefacts) {
-    var self = this
     this.event = new EventManager()
 
-    this._view = {}
-    this.registry = globalRegistry
+    this.renderInstanceContainer()
+    this.renderSettings(udapp)
+    this.renderDropdown(udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback)
+    this.renderRecorder(udapp, udappUI, fileManager, config, logCallback)
+    this.renderRecorderCard()
+    this.renderContainer()
+  }
+
+  renderContainer () {
+    this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
+
+    var el = yo`
+    <div>
+      ${this.settingsUI.render()}
+      ${this.contractDropdownUI.render()}
+      ${this.recorderCard.render()}
+      ${this.instanceContainer}
+    </div>
+    `
+    this.container.appendChild(el)
+  }
+
+  renderInstanceContainer () {
+    this.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
 
-    self._view.recorderCount = yo`<span>0</span>`
-    self._view.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
-    self._view.clearInstanceElement = yo`
-      <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => self.event.trigger('clearInstance', [])}
-      title="Clear instances list and reset recorder" aria-hidden="true">
-    </i>`
-    self._view.instanceContainerTitle = yo`
+    const instanceContainerTitle = yo`
       <div class=${css.instanceContainerTitle}
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
-        ${self._view.clearInstanceElement}
+        <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => this.event.trigger('clearInstance', [])}
+          title="Clear instances list and reset recorder" aria-hidden="true">
+        </i>
       </div>`
-    self._view.noInstancesText = yo`
+
+    this.noInstancesText = yo`
       <div class="${css.noInstancesText}">
         Currently you have no contract instances to interact with.
       </div>`
 
-    var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
+    this.event.register('clearInstance', () => {
+      this.instanceContainer.innerHTML = '' // clear the instances list
+      this.instanceContainer.appendChild(instanceContainerTitle)
+      this.instanceContainer.appendChild(this.noInstancesText)
+    })
 
-    var recorder = new Recorder(udapp, fileManager, config)
-    recorder.event.register('newTxRecorded', (count) => {
-      this._view.recorderCount.innerText = count
+    this.instanceContainer.appendChild(instanceContainerTitle)
+    this.instanceContainer.appendChild(this.noInstancesText)
+  }
+
+  renderSettings (udapp) {
+    var settings = new Settings(udapp)
+    this.settingsUI = new SettingsUI(settings)
+
+    this.settingsUI.event.register('clearInstance', () => {
+      this.event.trigger('clearInstance', [])
+    })
+  }
+
+  renderDropdown (udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback) {
+    var dropdownLogic = new DropdownLogic(fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel)
+    this.contractDropdownUI = new ContractDropdownUI(dropdownLogic, logCallback)
+
+    this.contractDropdownUI.event.register('clearInstance', () => {
+      var noInstancesText = this.noInstancesText
+      if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
+    })
+    this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
+      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address))
+    })
+    this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
+      this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))
     })
-    recorder.event.register('cleared', () => {
-      this._view.recorderCount.innerText = 0
+  }
+
+  renderRecorder (udapp, udappUI, fileManager, config, logCallback) {
+    this.recorderCount = yo`<span>0</span>`
+
+    var recorder = new Recorder(udapp, fileManager, config)
+    recorder.event.register('recorderCountChange', (count) => {
+      this.recorderCount.innerText = count
     })
-    executionContext.event.register('contextChanged', recorder.clearAll.bind(recorder))
-    self.event.register('clearInstance', recorder.clearAll.bind(recorder))
+    this.event.register('clearInstance', recorder.clearAll.bind(recorder))
 
-    var recorderInterface = new RecorderUI(recorder, logCallback)
+    this.recorderInterface = new RecorderUI(recorder, logCallback)
 
-    recorderInterface.event.register('newScenario', (abi, address, contractName) => {
-      var noInstancesText = this._view.noInstancesText
+    this.recorderInterface.event.register('newScenario', (abi, address, contractName) => {
+      var noInstancesText = this.noInstancesText
       if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
-      this._view.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName))
+      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName))
     })
 
-    recorderInterface.render()
+    this.recorderInterface.render()
+  }
 
-    self._view.collapsedView = yo`
+  renderRecorderCard () {
+    const collapsedView = yo`
       <div class=${css.recorderCollapsedView}>
-        <div class=${css.recorderCount}>${self._view.recorderCount}</div>
+        <div class=${css.recorderCount}>${this.recorderCount}</div>
       </div>`
 
-    self._view.expandedView = yo`
+    const expandedView = yo`
       <div class=${css.recorderExpandedView}>
         <div class=${css.recorderDescription}>
           All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
           another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
         </div>
         <div class="${css.transactionActions}">
-          ${recorderInterface.recordButton}
-          ${recorderInterface.runButton}
+          ${this.recorderInterface.recordButton}
+          ${this.recorderInterface.runButton}
           </div>
         </div>
       </div>`
 
-    self.recorderOpts = {
-      title: 'Transactions recorded:',
-      collapsedView: self._view.collapsedView
-    }
-
-    var recorderCard = new Card({}, {}, self.recorderOpts)
-    recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
+    this.recorderCard = new Card({}, {}, { title: 'Transactions recorded:', collapsedView: collapsedView })
+    this.recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
       body.innerHTML = ''
       status.innerHTML = ''
       if (arrow === 'down') {
-        status.appendChild(self._view.collapsedView)
-        body.appendChild(self._view.expandedView)
+        status.appendChild(collapsedView)
+        body.appendChild(expandedView)
       } else if (arrow === 'up') {
-        status.appendChild(self._view.collapsedView)
+        status.appendChild(collapsedView)
       }
     })
-
-    var settings = new Settings(udapp)
-    var settingsUI = new SettingsUI(settings)
-
-    self.event.register('clearInstance', () => {
-      this._view.instanceContainer.innerHTML = '' // clear the instances list
-      this._view.instanceContainer.appendChild(self._view.instanceContainerTitle)
-      this._view.instanceContainer.appendChild(self._view.noInstancesText)
-    })
-    settingsUI.event.register('clearInstance', () => {
-      this.event.trigger('clearInstance', [])
-    })
-
-    var dropdownLogic = new DropdownLogic(fileManager, pluginManager, compilersArtefacts, null, config, editor, udapp, filePanel)
-    var contractDropdownUI = new ContractDropdownUI(dropdownLogic, logCallback)
-
-    contractDropdownUI.event.register('clearInstance', () => {
-      var noInstancesText = this._view.noInstancesText
-      if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
-    })
-    contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
-      this._view.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address))
-    })
-    contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
-      this._view.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))
-    })
-
-    this._view.instanceContainer.appendChild(this._view.instanceContainerTitle)
-    this._view.instanceContainer.appendChild(this._view.noInstancesText)
-
-    var el = yo`
-    <div>
-      ${settingsUI.render()}
-      ${contractDropdownUI.render()}
-      ${recorderCard.render()}
-      ${self._view.instanceContainer}
-    </div>
-    `
-    container.appendChild(el)
-    this.container = container
   }
 
   render () {
diff --git a/src/app/tabs/runTab/model/dropdownlogic.js b/src/app/tabs/runTab/model/dropdownlogic.js
index afc8685760..57a28c61e6 100644
--- a/src/app/tabs/runTab/model/dropdownlogic.js
+++ b/src/app/tabs/runTab/model/dropdownlogic.js
@@ -9,10 +9,9 @@ var CompilerAbstract = require('../../../compiler/compiler-abstract')
 var EventManager = remixLib.EventManager
 
 class DropdownLogic {
-  constructor (fileManager, pluginManager, compilersArtefacts, compiler, config, editor, udapp, filePanel) {
+  constructor (fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel) {
     this.pluginManager = pluginManager
     this.compilersArtefacts = compilersArtefacts
-    this.compiler = compiler
     this.config = config
     this.editor = editor
     this.udapp = udapp
diff --git a/src/app/tabs/runTab/model/recorder.js b/src/app/tabs/runTab/model/recorder.js
index 747aab6e5a..da7d0443b2 100644
--- a/src/app/tabs/runTab/model/recorder.js
+++ b/src/app/tabs/runTab/model/recorder.js
@@ -75,6 +75,13 @@ class Recorder {
       this.data._createdContracts[address] = timestamp
       this.data._createdContractsReverse[timestamp] = address
     })
+    executionContext.event.register('contextChanged', this.clearAll.bind(this))
+    this.event.register('newTxRecorded', (count) => {
+      this.event.trigger('recorderCountChange', [count])
+    })
+    this.event.register('cleared', () => {
+      this.event.trigger('recorderCountChange', [0])
+    })
   }
 
   /**