From 4cd33453dc14ae9e6a797c16cccb52598904941a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 22:15:21 +0200 Subject: [PATCH] [WIP] Extract network dropdown into own component --- ui/app/actions.js | 18 +++++ ui/app/app.js | 23 +++++- ui/app/components/dropdowns/index.js | 2 +- .../{network.js => network-dropdown.js} | 71 ++++++++++++------- ui/app/reducers/app.js | 13 +++- 5 files changed, 95 insertions(+), 32 deletions(-) rename ui/app/components/dropdowns/{network.js => network-dropdown.js} (71%) 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 similarity index 71% rename from ui/app/components/dropdowns/network.js rename to 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,