[WIP] Extract network dropdown into own component

5 files changed, 95 insertions, 32 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 69fc46ca4..ae6d92733 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -15,6 +15,11 @@ var actions = {
   SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
   showSidebar: showSidebar,
   hideSidebar: hideSidebar,
+  // network dropdown open
+  NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
+  NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
+  showNetworkDropdown: showNetworkDropdown,
+  hideNetworkDropdown: hideNetworkDropdown,
   // menu state
   getNetworkStatus: 'getNetworkStatus',
   // transition state
@@ -773,6 +778,19 @@ function useEtherscanProvider () {
   }
 }
 
+function showNetworkDropdown () {
+  return {
+    type: actions.NETWORK_DROPDOWN_OPEN,
+  }
+}
+
+function hideNetworkDropdown () {
+  return {
+    type: actions.NETWORK_DROPDOWN_CLOSE,
+  }
+}
+
+
 function showModal () {
   return {
     type: actions.MODAL_OPEN,
diff --git a/ui/app/app.js b/ui/app/app.js
index ea9104d7d..8ca60fee1 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -36,6 +36,8 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
+const NetworkDropdown = require('./components/dropdowns/network-dropdown')
+console.log('imported:', NetworkDropdown)
 
 // Global Modals
 const BuyModal = require('./components/modals/index').BuyModal
@@ -55,6 +57,7 @@ function mapStateToProps (state) {
 
   return {
     // state from plugin
+    networkDropdownOpen: state.appState.networkDropdownOpen,
     sidebarOpen: state.appState.sidebarOpen,
     isLoading: state.appState.isLoading,
     loadingMessage: state.appState.loadingMessage,
@@ -81,9 +84,11 @@ function mapStateToProps (state) {
   }
 }
 
-function mapDispatchToProps (dispatch) {
+function mapDispatchToProps (dispatch, ownProps) {
   return {
     hideSidebar: () => {dispatch(actions.hideSidebar())},
+    showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())},
+    hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())},
   }
 }
 
@@ -115,7 +120,11 @@ App.prototype.render = function () {
       this.renderSidebar(),
 
       // network dropdown
-      this.renderNetworkDropdown(),
+      h(NetworkDropdown, {
+        provider: this.props.provider,
+        frequentRpcList: this.props.frequentRpcList,
+      }, []),
+      // this.renderNetworkDropdown(),
       // this.renderDropdown(),
 
       h(Loading, {
@@ -233,7 +242,14 @@ App.prototype.renderAppBar = function () {
             onClick: (event) => {
               event.preventDefault()
               event.stopPropagation()
-              this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
+              console.log("NI CLICK:", this.props.networkDropdownOpen)
+              if (this.props.networkDropdownOpen === false) {
+                this.props.showNetworkDropdown()
+              } else {
+                this.props.hideNetworkDropdown()
+              }
+              // this.props.toggleNetworkOpen()
+              // this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
             },
           }),
 
@@ -249,6 +265,7 @@ App.prototype.renderNetworkDropdown = function () {
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const state = this.state || {}
+  console.log("this.state:", state)
   const isOpen = state.isNetworkMenuOpen
 
   return h(Dropdown, {
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
index b52dd8802..6723a2048 100644
--- a/ui/app/components/dropdowns/index.js
+++ b/ui/app/components/dropdowns/index.js
@@ -5,7 +5,7 @@
 // App-Specific Instances
 // const AccountSelectionDropdown = require('./account-selection-dropdown')
 // const AccountOptionsDropdown = require('./account-options-dropdown')
-const NetworkDropdown = require('./network-dropdown')
+const NetworkDropdown = require('./network-dropdown').default
 
 module.exports = {
   // AccountSelectionDropdown,
diff --git a/ui/app/components/dropdowns/network.js b/ui/app/components/dropdowns/network-dropdown.js
index 2b693803b..42ab53c60 100644
--- a/ui/app/components/dropdowns/network.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -3,16 +3,14 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-
-// connect, dispatch actions...
-        // onClick: () => props.dispatch(actions.setProviderType('mainnet')),
-        // onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
-        // onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
-        // onClick: () => this.props.dispatch(actions.showConfigPage()),
+const Dropdown = require('../dropdown').Dropdown
+const DropdownMenuItem = require('../dropdown').DropdownMenuItem
 
 function mapStateToProps (state) {
   return {
-    active: state.appState.modalOpen
+    provider: state.metamask.provider,
+    frequentRpcList: state.metamask.frequentRpcList || [],
+    networkDropdownOpen: state.appState.networkDropdownOpen,
   }
 }
 
@@ -21,6 +19,20 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    setDefaultRpcTarget: () => {
+      dispatch(actions.setDefaultRpcTarget(type))
+    },
+    setRpcTarget: (target) => {
+      dispatch(actions.setRpcTarget(target))
+    },
+    showConfigPage: () => {
+      dispatch(actions.showConfigPage())
+    },
+    showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())},
+    hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())},
   }
 }
 
@@ -30,18 +42,20 @@ function NetworkDropdown () {
   Component.call(this)
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
-
 // renderNetworkDropdown
 // renderCustomOption
 // renderCommonRpc
 // TODO: specify default props and proptypes
 NetworkDropdown.prototype.render = function () {
+  console.log("RENDER")
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const state = this.state || {}
-  const isOpen = state.isNetworkMenuOpen
+  console.log("this.state", state)
+  const isOpen = this.props.networkDropdownOpen
+
+  console.log("isOpen", isOpen)
 
   return h(Dropdown, {
     useCssTransition: true,
@@ -56,7 +70,7 @@ NetworkDropdown.prototype.render = function () {
       // classes from three constituent nodes of the toggle element
 
       if (isNotToggleElement) {
-        this.setState({ isNetworkMenuOpen: false })
+        this.props.hideNetworkDropdown()
       }
     },
     zIndex: 11,
@@ -74,8 +88,8 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         key: 'main',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('mainnet'),
         style: {
           fontSize: '18px',
         },
@@ -91,8 +105,8 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         key: 'ropsten',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('ropsten')),
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('ropsten'),
         style: {
           fontSize: '18px',
         },
@@ -108,8 +122,8 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         key: 'kovan',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('kovan')),
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('kovan'),
         style: {
           fontSize: '18px',
         },
@@ -125,8 +139,8 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         key: 'rinkeby',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => propssetProviderType('rinkeby'),
         style: {
           fontSize: '18px',
         },
@@ -142,8 +156,8 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         key: 'default',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setDefaultRpcTarget(),
         style: {
           fontSize: '18px',
         },
@@ -161,8 +175,8 @@ NetworkDropdown.prototype.render = function () {
     h(
       DropdownMenuItem,
       {
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => this.props.dispatch(actions.showConfigPage()),
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.props.showConfigPage(),
         style: {
           fontSize: '18px',
         },
@@ -211,8 +225,8 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
         DropdownMenuItem,
         {
           key: `common${rpc}`,
-          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-          onClick: () => props.dispatch(actions.setRpcTarget(rpc)),
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          onClick: () => props.setRpcTarget(rpc),
         },
         [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -246,8 +260,8 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
         DropdownMenuItem,
         {
           key: rpcTarget,
-          onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
-          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+          onClick: () => props.setRpcTarget(rpcTarget),
+          closeMenu: () => this.props.hideNetworkDropdown(),
         },
         [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -257,3 +271,6 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
       )
   }
 }
+
+const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+module.exports = comp
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 878852bf6..3e74fb732 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -38,6 +38,7 @@ function reduceApp (state, action) {
     menuOpen: false,
     modalOpen: false,
     sidebarOpen: false,
+    networkDropdownOpen: false,
     currentView: seedWords ? seedConfView : defaultView,
     accountDetail: {
       subview: 'transactions',
@@ -51,6 +52,17 @@ function reduceApp (state, action) {
   }, state.appState)
 
   switch (action.type) {
+    // dropdown methods
+    case actions.NETWORK_DROPDOWN_OPEN:
+      return extend(appState, {
+        networkDropdownOpen: true,
+      })
+
+    case actions.NETWORK_DROPDOWN_CLOSE:
+      return extend(appState, {
+        networkDropdownOpen: false,
+      })
+
     // sidebar methods
     case actions.SIDEBAR_OPEN:
       return extend(appState, {
@@ -74,7 +86,6 @@ function reduceApp (state, action) {
       })
 
     // transition methods
-
     case actions.TRANSITION_FORWARD:
       return extend(appState, {
         transForward: true,