[WIP] Extract network dropdown into own component

7 years ago · 4cd33453dc
parent e39c600a45
commit 4cd33453dc
5 changed files with 95 additions and 32 deletions
--- 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,
--- 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, {
--- 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,
--- a/ui/app/components/dropdowns/network-dropdown.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
--- 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,