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';
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';
import {
SWAP_DESTINATION_AMOUNT,
SWAP_DESTINATION_KIND,
SWAP_ORIGIN_AMOUNT,
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 {
type: SWAP_ORIGIN_KIND,
value
payload: {
originKind,
bityRates
}
};
};
export const SWAP_DESTINATION_KIND_TO = value => {
export const SWAP_DESTINATION_KIND_TO = (destinationKind, bityRates) => {
return {
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,
destinationKindOptions: PropTypes.array,
originKindOptions: PropTypes.array,
swapOriginKindTo: PropTypes.func,
swapDestinationKindTo: PropTypes.func,
swapOriginAmountTo: PropTypes.func,
swapDestinationAmountTo: PropTypes.func,
SWAP_ORIGIN_KIND_TO: PropTypes.func,
SWAP_DESTINATION_KIND_TO: PropTypes.func,
SWAP_ORIGIN_AMOUNT_TO: PropTypes.func,
SWAP_DESTINATION_AMOUNT_TO: PropTypes.func,
swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func
};
@ -61,51 +61,41 @@ export default class WantToSwapMy extends Component {
this.props.destinationKind
);
let bityRate = this.props.bityRates[pairName];
this.props.swapOriginAmountTo(originAmountAsNumber);
this.props.swapDestinationAmountTo(originAmountAsNumber * bityRate);
this.props.SWAP_ORIGIN_AMOUNT_TO(originAmountAsNumber);
this.props.SWAP_DESTINATION_AMOUNT_TO(originAmountAsNumber * bityRate);
} else {
this.props.swapOriginAmountTo('');
this.props.swapDestinationAmountTo('');
this.props.SWAP_ORIGIN_AMOUNT_TO('');
this.props.SWAP_DESTINATION_AMOUNT_TO('');
}
};
onChangeDestinationAmount(amount) {
let destinationAmountAsNumber = parseFloat(amount);
if (destinationAmountAsNumber) {
this.props.swapDestinationAmountTo(destinationAmountAsNumber);
this.props.SWAP_DESTINATION_AMOUNT_TO(destinationAmountAsNumber);
let pairName = combineAndUpper(
this.props.destinationKind,
this.props.originKind
);
let bityRate = this.props.bityRates[pairName];
this.props.swapOriginAmountTo(destinationAmountAsNumber * bityRate);
this.props.SWAP_ORIGIN_AMOUNT_TO(destinationAmountAsNumber * bityRate);
} else {
this.props.swapOriginAmountTo('');
this.props.swapDestinationAmountTo('');
this.props.SWAP_ORIGIN_AMOUNT_TO('');
this.props.SWAP_DESTINATION_AMOUNT_TO('');
}
}
async onChangeDestinationKind(event) {
let newDestinationKind = event.target.value;
this.props.swapDestinationKindTo(newDestinationKind);
let pairName = combineAndUpper(this.props.originKind, newDestinationKind);
let bityRate = this.props.bityRates[pairName];
this.props.swapDestinationAmountTo(
parseFloat(this.props.originAmount) * bityRate
this.props.SWAP_DESTINATION_KIND_TO(
newDestinationKind,
this.props.bityRates
);
}
async onChangeOriginKind(event) {
let newOriginKind = event.target.value;
this.props.swapOriginKindTo(newOriginKind);
// 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
);
this.props.SWAP_ORIGIN_KIND_TO(newOriginKind, this.props.bityRates);
}
render() {

View File

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

View File

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