move state building into swap reducer instead of in wantToSwapMy component

This commit is contained in:
Daniel Ternyak 2017-06-19 18:35:14 -05:00
parent 67d57c3d4b
commit e7d8284d69
5 changed files with 95 additions and 86 deletions

View File

@ -1,20 +1,28 @@
export const SWAP_ORIGIN_KIND = 'SWAP_ORIGIN_KIND'; import {
export const SWAP_DESTINATION_KIND = 'SWAP_DESTINATION_KIND'; SWAP_DESTINATION_AMOUNT,
export const SWAP_ORIGIN_AMOUNT = 'SWAP_ORIGIN_AMOUNT'; SWAP_DESTINATION_KIND,
export const SWAP_DESTINATION_AMOUNT = 'SWAP_DESTINATION_AMOUNT'; SWAP_ORIGIN_AMOUNT,
export const SWAP_UPDATE_BITY_RATES = 'SWAP_UPDATE_BITY_RATES'; SWAP_ORIGIN_KIND,
SWAP_UPDATE_BITY_RATES
} from './swapConstants';
export const SWAP_ORIGIN_KIND_TO = value => { export const SWAP_ORIGIN_KIND_TO = (originKind, bityRates) => {
return { return {
type: SWAP_ORIGIN_KIND, type: SWAP_ORIGIN_KIND,
value payload: {
originKind,
bityRates
}
}; };
}; };
export const SWAP_DESTINATION_KIND_TO = value => { export const SWAP_DESTINATION_KIND_TO = (destinationKind, bityRates) => {
return { return {
type: SWAP_DESTINATION_KIND, type: SWAP_DESTINATION_KIND,
value payload: {
destinationKind,
bityRates
}
}; };
}; };

View File

@ -0,0 +1,5 @@
export const SWAP_ORIGIN_KIND = 'SWAP_ORIGIN_KIND';
export const SWAP_DESTINATION_KIND = 'SWAP_DESTINATION_KIND';
export const SWAP_ORIGIN_AMOUNT = 'SWAP_ORIGIN_AMOUNT';
export const SWAP_DESTINATION_AMOUNT = 'SWAP_DESTINATION_AMOUNT';
export const SWAP_UPDATE_BITY_RATES = 'SWAP_UPDATE_BITY_RATES';

View File

@ -44,10 +44,10 @@ export default class WantToSwapMy extends Component {
destinationKind: PropTypes.string, destinationKind: PropTypes.string,
destinationKindOptions: PropTypes.array, destinationKindOptions: PropTypes.array,
originKindOptions: PropTypes.array, originKindOptions: PropTypes.array,
swapOriginKindTo: PropTypes.func, SWAP_ORIGIN_KIND_TO: PropTypes.func,
swapDestinationKindTo: PropTypes.func, SWAP_DESTINATION_KIND_TO: PropTypes.func,
swapOriginAmountTo: PropTypes.func, SWAP_ORIGIN_AMOUNT_TO: PropTypes.func,
swapDestinationAmountTo: PropTypes.func, SWAP_DESTINATION_AMOUNT_TO: PropTypes.func,
swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func
}; };
@ -61,51 +61,41 @@ export default class WantToSwapMy extends Component {
this.props.destinationKind this.props.destinationKind
); );
let bityRate = this.props.bityRates[pairName]; let bityRate = this.props.bityRates[pairName];
this.props.swapOriginAmountTo(originAmountAsNumber); this.props.SWAP_ORIGIN_AMOUNT_TO(originAmountAsNumber);
this.props.swapDestinationAmountTo(originAmountAsNumber * bityRate); this.props.SWAP_DESTINATION_AMOUNT_TO(originAmountAsNumber * bityRate);
} else { } else {
this.props.swapOriginAmountTo(''); this.props.SWAP_ORIGIN_AMOUNT_TO('');
this.props.swapDestinationAmountTo(''); this.props.SWAP_DESTINATION_AMOUNT_TO('');
} }
}; };
onChangeDestinationAmount(amount) { onChangeDestinationAmount(amount) {
let destinationAmountAsNumber = parseFloat(amount); let destinationAmountAsNumber = parseFloat(amount);
if (destinationAmountAsNumber) { if (destinationAmountAsNumber) {
this.props.swapDestinationAmountTo(destinationAmountAsNumber); this.props.SWAP_DESTINATION_AMOUNT_TO(destinationAmountAsNumber);
let pairName = combineAndUpper( let pairName = combineAndUpper(
this.props.destinationKind, this.props.destinationKind,
this.props.originKind this.props.originKind
); );
let bityRate = this.props.bityRates[pairName]; let bityRate = this.props.bityRates[pairName];
this.props.swapOriginAmountTo(destinationAmountAsNumber * bityRate); this.props.SWAP_ORIGIN_AMOUNT_TO(destinationAmountAsNumber * bityRate);
} else { } else {
this.props.swapOriginAmountTo(''); this.props.SWAP_ORIGIN_AMOUNT_TO('');
this.props.swapDestinationAmountTo(''); this.props.SWAP_DESTINATION_AMOUNT_TO('');
} }
} }
async onChangeDestinationKind(event) { async onChangeDestinationKind(event) {
let newDestinationKind = event.target.value; let newDestinationKind = event.target.value;
this.props.swapDestinationKindTo(newDestinationKind); this.props.SWAP_DESTINATION_KIND_TO(
let pairName = combineAndUpper(this.props.originKind, newDestinationKind); newDestinationKind,
let bityRate = this.props.bityRates[pairName]; this.props.bityRates
this.props.swapDestinationAmountTo(
parseFloat(this.props.originAmount) * bityRate
); );
} }
async onChangeOriginKind(event) { async onChangeOriginKind(event) {
let newOriginKind = event.target.value; let newOriginKind = event.target.value;
this.props.swapOriginKindTo(newOriginKind); this.props.SWAP_ORIGIN_KIND_TO(newOriginKind, this.props.bityRates);
// https://github.com/reactjs/redux/issues/1543#issuecomment-201399259
let store = window.store;
let destinationKind = store.getState().swap.destinationKind;
let pairName = combineAndUpper(newOriginKind, destinationKind);
let bityRate = this.props.bityRates[pairName];
this.props.swapDestinationAmountTo(
parseFloat(this.props.originAmount) * bityRate
);
} }
render() { render() {

View File

@ -2,13 +2,7 @@ import React, { Component } from 'react';
import WantToSwapMy from './components/wantToSwapMy'; import WantToSwapMy from './components/wantToSwapMy';
import CurrentRates from './components/currentRates'; import CurrentRates from './components/currentRates';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { import * as swapActions from 'actions/swap';
SWAP_DESTINATION_AMOUNT_TO,
SWAP_DESTINATION_KIND_TO,
SWAP_ORIGIN_AMOUNT_TO,
SWAP_ORIGIN_KIND_TO,
SWAP_UPDATE_BITY_RATES_TO
} from 'actions/swap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Bity from 'api/bity'; import Bity from 'api/bity';
@ -27,11 +21,11 @@ class Swap extends Component {
destinationKind: PropTypes.string, destinationKind: PropTypes.string,
destinationKindOptions: PropTypes.array, destinationKindOptions: PropTypes.array,
originKindOptions: PropTypes.array, originKindOptions: PropTypes.array,
swapOriginKindTo: PropTypes.func, SWAP_ORIGIN_KIND_TO: PropTypes.func,
swapDestinationKindTo: PropTypes.func, SWAP_DESTINATION_KIND_TO: PropTypes.func,
swapOriginAmountTo: PropTypes.func, SWAP_ORIGIN_AMOUNT_TO: PropTypes.func,
swapDestinationAmountTo: PropTypes.func, SWAP_DESTINATION_AMOUNT_TO: PropTypes.func,
swapUpdateBityRatesTo: PropTypes.func SWAP_UPDATE_BITY_RATES_TO: PropTypes.func
}; };
componentDidMount() { componentDidMount() {
@ -44,7 +38,7 @@ class Swap extends Component {
!bityRates.BTCREP !bityRates.BTCREP
) { ) {
this.bity.getAllRates().then(data => { this.bity.getAllRates().then(data => {
this.props.swapUpdateBityRatesTo(data); this.props.SWAP_UPDATE_BITY_RATES_TO(data);
}); });
} }
} }
@ -58,10 +52,10 @@ class Swap extends Component {
destinationKind, destinationKind,
destinationKindOptions, destinationKindOptions,
originKindOptions, originKindOptions,
swapOriginKindTo, SWAP_ORIGIN_KIND_TO,
swapDestinationKindTo, SWAP_DESTINATION_KIND_TO,
swapOriginAmountTo, SWAP_ORIGIN_AMOUNT_TO,
swapDestinationAmountTo SWAP_DESTINATION_AMOUNT_TO
} = this.props; } = this.props;
let wantToSwapMyProps = { let wantToSwapMyProps = {
@ -72,10 +66,10 @@ class Swap extends Component {
destinationKind, destinationKind,
destinationKindOptions, destinationKindOptions,
originKindOptions, originKindOptions,
swapOriginKindTo, SWAP_ORIGIN_KIND_TO,
swapDestinationKindTo, SWAP_DESTINATION_KIND_TO,
swapOriginAmountTo, SWAP_ORIGIN_AMOUNT_TO,
swapDestinationAmountTo SWAP_DESTINATION_AMOUNT_TO
}; };
return ( return (
@ -103,24 +97,4 @@ function mapStateToProps(state) {
}; };
} }
function mapDispatchToProps(dispatch) { export default connect(mapStateToProps, swapActions)(Swap);
return {
swapOriginKindTo: originValue => {
dispatch(SWAP_ORIGIN_KIND_TO(originValue));
},
swapDestinationKindTo: destinationValue => {
dispatch(SWAP_DESTINATION_KIND_TO(destinationValue));
},
swapOriginAmountTo: originAmount => {
dispatch(SWAP_ORIGIN_AMOUNT_TO(originAmount));
},
swapDestinationAmountTo: destinationValue => {
dispatch(SWAP_DESTINATION_AMOUNT_TO(destinationValue));
},
swapUpdateBityRatesTo: bityRates => {
dispatch(SWAP_UPDATE_BITY_RATES_TO(bityRates));
}
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Swap);

View File

@ -4,7 +4,8 @@ import {
SWAP_ORIGIN_AMOUNT, SWAP_ORIGIN_AMOUNT,
SWAP_ORIGIN_KIND, SWAP_ORIGIN_KIND,
SWAP_UPDATE_BITY_RATES SWAP_UPDATE_BITY_RATES
} from 'actions/swap'; } from 'actions/swapConstants';
import { combineAndUpper } from 'api/bity';
export const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP']; export const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP'];
@ -22,26 +23,57 @@ const initialState = {
bityRates: {} bityRates: {}
}; };
const buildDestinationAmount = (
originAmount,
originKind,
destinationKind,
bityRates
) => {
let pairName = combineAndUpper(originKind, destinationKind);
let bityRate = bityRates[pairName];
return originAmount * bityRate;
};
const buildDestinationKind = (originKind, destinationKind) => {
if (originKind === destinationKind) {
return ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== originKind)[0];
} else {
return destinationKind;
}
};
export function swap(state = initialState, action) { export function swap(state = initialState, action) {
switch (action.type) { switch (action.type) {
case SWAP_ORIGIN_KIND: { case SWAP_ORIGIN_KIND: {
const newDestinationKind = buildDestinationKind(
action.payload.originKind,
state.destinationKind
);
return { return {
...state, ...state,
originKind: action.value, originKind: action.payload.originKind,
destinationKind: action.value === state.destinationKind destinationKind: newDestinationKind,
? ALL_CRYPTO_KIND_OPTIONS.filter(
element => element !== action.value
)[0]
: state.destinationKind,
destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter( destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(
element => element !== action.value element => element !== action.payload.originKind
),
destinationAmount: buildDestinationAmount(
state.originAmount,
action.payload.originKind,
newDestinationKind,
action.payload.bityRates
) )
}; };
} }
case SWAP_DESTINATION_KIND: { case SWAP_DESTINATION_KIND: {
return { return {
...state, ...state,
destinationKind: action.value destinationKind: action.payload.destinationKind,
destinationAmount: buildDestinationAmount(
state.originAmount,
state.originKind,
action.payload.destinationKind,
action.payload.bityRates
)
}; };
} }
case SWAP_ORIGIN_AMOUNT: case SWAP_ORIGIN_AMOUNT: