From 7fbe1966ded3e1691d12ac331e9253ae5a157c94 Mon Sep 17 00:00:00 2001 From: HenryNguyen5 Date: Mon, 29 Jan 2018 22:52:19 -0500 Subject: [PATCH] Fix up components to use selectors, work on fixing sagas --- common/actions/config/actionCreators.ts | 6 +- .../Header/components/CustomNodeModal.tsx | 88 ++++++++--- .../Header/components/Navigation.tsx | 2 +- common/components/Header/index.tsx | 146 ++++++++++-------- common/components/ui/ColorDropdown.tsx | 2 +- common/containers/TabSection/index.tsx | 50 ++---- common/libs/nodes/custom/index.ts | 8 +- common/reducers/config/nodes/selectedNode.ts | 6 +- common/reducers/config/nodes/staticNodes.ts | 12 ++ common/sagas/config.ts | 118 +++++++------- common/sagas/wallet/wallet.ts | 10 +- common/selectors/config/networks.ts | 16 +- common/selectors/config/nodes.ts | 129 +++++++++++++--- common/store.ts | 2 +- common/utils/network.ts | 14 -- common/utils/node.ts | 42 ----- shared/types/network.d.ts | 1 - shared/types/node.d.ts | 12 +- 18 files changed, 374 insertions(+), 290 deletions(-) delete mode 100644 common/utils/node.ts diff --git a/common/actions/config/actionCreators.ts b/common/actions/config/actionCreators.ts index 6a1eb961..9eeaf8fd 100644 --- a/common/actions/config/actionCreators.ts +++ b/common/actions/config/actionCreators.ts @@ -24,10 +24,12 @@ export function changeLanguage(sign: string): interfaces.ChangeLanguageAction { } export type TChangeNode = typeof changeNode; -export function changeNode(networkName: string, nodeName: string): interfaces.ChangeNodeAction { +export function changeNode( + payload: interfaces.ChangeNodeAction['payload'] +): interfaces.ChangeNodeAction { return { type: TypeKeys.CONFIG_NODE_CHANGE, - payload: { networkName, nodeName } + payload }; } diff --git a/common/components/Header/components/CustomNodeModal.tsx b/common/components/Header/components/CustomNodeModal.tsx index 0f78b798..3e0486aa 100644 --- a/common/components/Header/components/CustomNodeModal.tsx +++ b/common/components/Header/components/CustomNodeModal.tsx @@ -2,11 +2,19 @@ import React from 'react'; import classnames from 'classnames'; import Modal, { IButton } from 'components/ui/Modal'; import translate from 'translations'; -import { NETWORKS, CustomNodeConfig, CustomNetworkConfig } from 'config'; -import { makeCustomNodeId } from 'utils/node'; import { makeCustomNetworkId } from 'utils/network'; +import { CustomNetworkConfig } from 'types/network'; +import { CustomNodeConfig } from 'types/node'; +import { TAddCustomNetwork, addCustomNetwork, AddCustomNodeAction } from 'actions/config'; +import { connect, Omit } from 'react-redux'; +import { AppState } from 'reducers'; +import { + getCustomNetworkConfigs, + getCustomNodeConfigs, + getStaticNetworkConfigs +} from 'selectors/config'; +import { CustomNode } from 'libs/nodes'; -const NETWORK_KEYS = Object.keys(NETWORKS); const CUSTOM = 'custom'; interface Input { @@ -15,14 +23,21 @@ interface Input { type?: string; } -interface Props { - customNodes: CustomNodeConfig[]; - customNetworks: CustomNetworkConfig[]; - handleAddCustomNode(node: CustomNodeConfig): void; - handleAddCustomNetwork(node: CustomNetworkConfig): void; +interface OwnProps { + addCustomNode(payload: AddCustomNodeAction['payload']): void; handleClose(): void; } +interface DispatchProps { + addCustomNetwork: TAddCustomNetwork; +} + +interface StateProps { + customNodes: AppState['config']['nodes']['customNodes']; + customNetworks: AppState['config']['networks']['customNetworks']; + staticNetworks: AppState['config']['networks']['staticNetworks']; +} + interface State { name: string; url: string; @@ -36,12 +51,14 @@ interface State { password: string; } -export default class CustomNodeModal extends React.Component { +type Props = OwnProps & StateProps & DispatchProps; + +class CustomNodeModal extends React.Component { public state: State = { name: '', url: '', port: '', - network: NETWORK_KEYS[0], + network: Object.keys(this.props.staticNetworks)[0], customNetworkName: '', customNetworkUnit: '', customNetworkChainId: '', @@ -51,7 +68,7 @@ export default class CustomNodeModal extends React.Component { }; public render() { - const { customNetworks, handleClose } = this.props; + const { customNetworks, handleClose, staticNetworks } = this.props; const { network } = this.state; const isHttps = window.location.protocol.includes('https'); const invalids = this.getInvalids(); @@ -109,12 +126,12 @@ export default class CustomNodeModal extends React.Component { value={network} onChange={this.handleChange} > - {NETWORK_KEYS.map(net => ( + {Object.keys(staticNetworks).map(net => ( ))} - {customNetworks.map(net => { + {Object.values(customNetworks).map(net => { const id = makeCustomNetworkId(net); return (