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
This commit is contained in:
Daniel Ternyak 2017-10-03 21:37:06 -07:00 committed by GitHub
parent aefb155b82
commit a06298afa1
7 changed files with 52 additions and 13 deletions

3
.gitignore vendored
View File

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

View File

@ -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
};
}

View File

@ -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;

View File

@ -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'
}

View File

@ -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"
/>

View File

@ -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);

View File

@ -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);
}