Refresh on Network Change (#261)

* configure gitignore

* create CONFIG_NODE_CHANGE_INTENT action, action creator, and type

* pass changeNodeIntent intstead of changeNode to Header

* create saga for handling node changes that will refresh only when network changes

.gitignore

@@ -52,3 +52,6 @@ dll
 webpack_config/server.key
 webpack_config/server.crt
 webpack_config/server.csr
+
+
+v8-compile-cache-0/

common/actions/config/actionCreators.ts

@@ -24,3 +24,13 @@ export function changeGasPrice(value: number): interfaces.ChangeGasPriceAction {
     value
   };
 }
+
+export type TChangeNodeIntent = typeof changeNodeIntent;
+export function changeNodeIntent(
+  payload: string
+): interfaces.ChangeNodeIntentAction {
+  return {
+    type: TypeKeys.CONFIG_NODE_CHANGE_INTENT,
+    payload
+  };
+}

common/actions/config/actionTypes.ts

@@ -1,4 +1,5 @@
 import { TypeKeys } from './constants';
+
 /*** Change Language ***/
 export interface ChangeLanguageAction {
   type: TypeKeys.CONFIG_LANGUAGE_CHANGE;
@@ -18,8 +19,15 @@ export interface ChangeGasPriceAction {
   value: number;
 }
 
+/*** Change Node ***/
+export interface ChangeNodeIntentAction {
+  type: TypeKeys.CONFIG_NODE_CHANGE_INTENT;
+  payload: string;
+}
+
 /*** Union Type ***/
 export type ConfigAction =
   | ChangeNodeAction
   | ChangeLanguageAction
-  | ChangeGasPriceAction;
+  | ChangeGasPriceAction
+  | ChangeNodeIntentAction;

common/actions/config/constants.ts

@@ -1,5 +1,6 @@
 export enum TypeKeys {
   CONFIG_LANGUAGE_CHANGE = 'CONFIG_LANGUAGE_CHANGE',
   CONFIG_NODE_CHANGE = 'CONFIG_NODE_CHANGE',
+  CONFIG_NODE_CHANGE_INTENT = 'CONFIG_NODE_CHANGE_INTENT',
   CONFIG_GAS_PRICE = 'CONFIG_GAS_PRICE'
 }

common/components/Header/index.tsx

@@ -1,4 +1,8 @@
-import { TChangeGasPrice, TChangeLanguage, TChangeNode } from 'actions/config';
+import {
+  TChangeGasPrice,
+  TChangeLanguage,
+  TChangeNodeIntent
+} from 'actions/config';
 import logo from 'assets/images/logo-myetherwallet.svg';
 import { Dropdown, ColorDropdown } from 'components/ui';
 import React, { Component } from 'react';
@@ -22,13 +26,13 @@ interface Props {
   gasPriceGwei: number;
 
   changeLanguage: TChangeLanguage;
-  changeNode: TChangeNode;
+  changeNodeIntent: TChangeNodeIntent;
   changeGasPrice: TChangeGasPrice;
 }
 
 export default class Header extends Component<Props, {}> {
   public render() {
-    const { languageSelection, changeNode, nodeSelection } = this.props;
+    const { languageSelection, changeNodeIntent, nodeSelection } = this.props;
     const selectedLanguage = languageSelection;
     const selectedNode = NODES[nodeSelection];
     const selectedNetwork = NETWORKS[selectedNode.network];
@@ -114,7 +118,7 @@ export default class Header extends Component<Props, {}> {
                       <a>Add Custom Node</a>
                     </li>
                   }
-                  onChange={changeNode}
+                  onChange={changeNodeIntent}
                   size="smr"
                   color="white"
                 />

common/containers/TabSection/index.tsx

@@ -1,10 +1,10 @@
 import {
   changeGasPrice as dChangeGasPrice,
   changeLanguage as dChangeLanguage,
-  changeNode as dChangeNode,
+  changeNodeIntent as dChangeNodeIntent,
   TChangeGasPrice,
   TChangeLanguage,
-  TChangeNode
+  TChangeNodeIntent
 } from 'actions/config';
 import { AlphaAgreement, Footer, Header } from 'components';
 import React, { Component } from 'react';
@@ -21,7 +21,7 @@ interface Props {
   gasPriceGwei: number;
 
   changeLanguage: TChangeLanguage;
-  changeNode: TChangeNode;
+  changeNodeIntent: TChangeNodeIntent;
   changeGasPrice: TChangeGasPrice;
 }
 class TabSection extends Component<Props, {}> {
@@ -34,7 +34,7 @@ class TabSection extends Component<Props, {}> {
       gasPriceGwei,
 
       changeLanguage,
-      changeNode,
+      changeNodeIntent,
       changeGasPrice
     } = this.props;
 
@@ -44,7 +44,7 @@ class TabSection extends Component<Props, {}> {
       gasPriceGwei,
 
       changeLanguage,
-      changeNode,
+      changeNodeIntent,
       changeGasPrice
     };
 
@@ -73,5 +73,5 @@ function mapStateToProps(state: AppState) {
 export default connect(mapStateToProps, {
   changeGasPrice: dChangeGasPrice,
   changeLanguage: dChangeLanguage,
-  changeNode: dChangeNode
+  changeNodeIntent: dChangeNodeIntent
 })(TabSection);

common/sagas/config.ts

@@ -1,13 +1,26 @@
 import { SagaIterator } from 'redux-saga';
-import { takeEvery } from 'redux-saga/effects';
+import { call, put, select, takeEvery } from 'redux-saga/effects';
+import { changeNode } from 'actions/config';
+import { NODES } from 'config/data';
 
+import { getNodeConfig } from 'selectors/config';
 // @HACK For now we reload the app when doing a language swap to force non-connected
 // data to reload. Also the use of timeout to avoid using additional actions for now.
 function* reload(): SagaIterator {
   setTimeout(() => location.reload(), 250);
 }
 
+function* handleNodeChangeIntent(action): SagaIterator {
+  const nodeConfig = yield select(getNodeConfig);
+  const currentNetwork = nodeConfig.network;
+  const actionNetwork = NODES[action.payload].network;
+  yield put(changeNode(action.payload));
+  if (currentNetwork !== actionNetwork) {
+    yield call(reload);
+  }
+}
+
 export default function* handleConfigChanges(): SagaIterator {
-  yield takeEvery('CONFIG_NODE_CHANGE', reload);
+  yield takeEvery('CONFIG_NODE_CHANGE_INTENT', handleNodeChangeIntent);
   yield takeEvery('CONFIG_LANGUAGE_CHANGE', reload);
 }