address sleep() hack -- get state directly from redux instead of relying on props

This commit is contained in:
Daniel Ternyak 2017-06-18 23:53:32 -05:00
parent 192efd4404
commit c77f5ef300
4 changed files with 44 additions and 36 deletions

View File

@ -3,7 +3,7 @@ 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';
export const SWAP_DESTINATION_KIND_OPTIONS = 'SWAP_DESTINATION_KIND_OPTIONS'
export const SWAP_ORIGIN_KIND_TO = (value) => {
return {
@ -39,3 +39,6 @@ export const SWAP_UPDATE_BITY_RATES_TO = (value) => {
value
}
};

View File

@ -3,14 +3,10 @@ import PropTypes from 'prop-types';
import translate from 'translations';
import {combineAndUpper} from 'api/bity';
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
class CoinTypeDropDown extends Component {
constructor(props) {
super(props)
constructor(props, context) {
super(props, context)
}
static propTypes = {
@ -37,8 +33,8 @@ class CoinTypeDropDown extends Component {
}
export default class WantToSwapMy extends Component {
constructor(props) {
super(props)
constructor(props, context) {
super(props, context)
}
static propTypes = {
@ -52,7 +48,9 @@ export default class WantToSwapMy extends Component {
swapOriginKindTo: PropTypes.func,
swapDestinationKindTo: PropTypes.func,
swapOriginAmountTo: PropTypes.func,
swapDestinationAmountTo: PropTypes.func
swapDestinationAmountTo: PropTypes.func,
swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func
};
onClickStartSwap() {
@ -86,23 +84,19 @@ export default class WantToSwapMy extends Component {
}
async onChangeDestinationKind(event) {
let toKind = event.target.value;
this.props.swapDestinationKindTo(toKind);
// TODO - can't find a way around this without bringing in annoying deps. Even though redux action is sync,
// it seems it happens in the background and values don't get updated in time
await sleep(100);
let pairName = combineAndUpper(this.props.destinationKind, this.props.originKind);
let newDestinationKind = event.target.value;
this.props.swapDestinationKindTo(newDestinationKind);
let pairName = combineAndUpper(this.props.originKind, newDestinationKind);
let bityRate = this.props.bityRates[pairName];
this.props.swapOriginAmountTo(parseFloat(this.props.destinationAmount) * bityRate)
this.props.swapDestinationAmountTo(parseFloat(this.props.originAmount) * bityRate)
}
async onChangeOriginKind(event) {
let toKind = event.target.value;
this.props.swapOriginKindTo(toKind);
// TODO - can't find a way around this without bringing in annoying deps. Even though redux action is sync,
// it seems it happens in the background and values don't get updated in time
await sleep(100);
let pairName = combineAndUpper(this.props.originKind, this.props.destinationKind);
let newOriginKind = event.target.value;
this.props.swapOriginKindTo(newOriginKind);
// https://github.com/reactjs/redux/issues/1543#issuecomment-201399259
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)
}
@ -126,7 +120,9 @@ export default class WantToSwapMy extends Component {
placeholder="Amount"
onChange={(e) => this.onChangeOriginAmount(e.target.value)}
value={originAmount}/>
<CoinTypeDropDown type={originKind} onChange={this.onChangeOriginKind.bind(this)}
<CoinTypeDropDown kind={originKind}
onChange={this.onChangeOriginKind.bind(this)}
kindOptions={originKindOptions}/>
<h1>{translate('SWAP_init_2')}</h1>
@ -137,7 +133,9 @@ export default class WantToSwapMy extends Component {
placeholder="Amount"
value={destinationAmount}
onChange={(e) => this.onChangeDestinationAmount(e.target.value)}/>
<CoinTypeDropDown type={destinationKind} onChange={this.onChangeDestinationKind.bind(this)}
<CoinTypeDropDown kind={destinationKind}
onChange={this.onChangeDestinationKind.bind(this)}
kindOptions={destinationKindOptions}/>
<div className="col-xs-12 clearfix text-center">

View File

@ -7,7 +7,8 @@ import {
SWAP_DESTINATION_KIND_TO,
SWAP_ORIGIN_AMOUNT_TO,
SWAP_ORIGIN_KIND_TO,
SWAP_UPDATE_BITY_RATES_TO
SWAP_UPDATE_BITY_RATES_TO,
SWAP_ORIGIN_KIND_AND_DESTINATION_KIND_AND_DESTINATION_OPTIONS_TO
} from 'actions/swap';
import PropTypes from 'prop-types';
@ -31,8 +32,8 @@ class Swap extends Component {
swapDestinationKindTo: PropTypes.func,
swapOriginAmountTo: PropTypes.func,
swapDestinationAmountTo: PropTypes.func,
swapUpdateBityRatesTo: PropTypes.func
swapUpdateBityRatesTo: PropTypes.func,
swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func
};
render() {
@ -47,7 +48,8 @@ class Swap extends Component {
swapOriginKindTo,
swapDestinationKindTo,
swapOriginAmountTo,
swapDestinationAmountTo
swapDestinationAmountTo,
swapOriginKindAndDestinationKindAndDestinationOptionsTo
} = this.props;
let wantToSwapMyProps = {
@ -61,7 +63,8 @@ class Swap extends Component {
swapOriginKindTo,
swapDestinationKindTo,
swapOriginAmountTo,
swapDestinationAmountTo
swapDestinationAmountTo,
swapOriginKindAndDestinationKindAndDestinationOptionsTo
};
@ -113,6 +116,10 @@ function mapDispatchToProps(dispatch) {
},
swapUpdateBityRatesTo: (bityRates) => {
dispatch(SWAP_UPDATE_BITY_RATES_TO(bityRates))
},
swapOriginKindAndDestinationKindAndDestinationOptionsTo: (originKind, destinationKind) => {
dispatch(SWAP_ORIGIN_KIND_AND_DESTINATION_KIND_AND_DESTINATION_OPTIONS_TO(originKind, destinationKind))
}
}
}

View File

@ -6,16 +6,16 @@ import {
SWAP_UPDATE_BITY_RATES
} from 'actions/swap';
import without from 'lodash/without';
const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP'];
export const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP'];
const initialState = {
originAmount: 0,
destinationAmount: 0,
originKind: 'BTC',
destinationKind: 'ETH',
destinationKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, 'BTC'),
originKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, 'REP'),
destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== 'BTC'),
originKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== 'REP'),
bityRates: {}
};
@ -26,8 +26,8 @@ export function swap(state = initialState, action) {
return {
...state,
originKind: action.value,
destinationKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, action.value),
destinationKind: without(ALL_CRYPTO_KIND_OPTIONS, action.value)[0]
destinationKind: action.value === state.destinationKind ? ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== action.value)[0] : state.destinationKind,
destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== action.value)
};
}
case SWAP_DESTINATION_KIND: {