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

View File

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

View File

@ -7,7 +7,8 @@ import {
SWAP_DESTINATION_KIND_TO, SWAP_DESTINATION_KIND_TO,
SWAP_ORIGIN_AMOUNT_TO, SWAP_ORIGIN_AMOUNT_TO,
SWAP_ORIGIN_KIND_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'; } from 'actions/swap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -31,8 +32,8 @@ class Swap extends Component {
swapDestinationKindTo: PropTypes.func, swapDestinationKindTo: PropTypes.func,
swapOriginAmountTo: PropTypes.func, swapOriginAmountTo: PropTypes.func,
swapDestinationAmountTo: PropTypes.func, swapDestinationAmountTo: PropTypes.func,
swapUpdateBityRatesTo: PropTypes.func swapUpdateBityRatesTo: PropTypes.func,
swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func
}; };
render() { render() {
@ -47,7 +48,8 @@ class Swap extends Component {
swapOriginKindTo, swapOriginKindTo,
swapDestinationKindTo, swapDestinationKindTo,
swapOriginAmountTo, swapOriginAmountTo,
swapDestinationAmountTo swapDestinationAmountTo,
swapOriginKindAndDestinationKindAndDestinationOptionsTo
} = this.props; } = this.props;
let wantToSwapMyProps = { let wantToSwapMyProps = {
@ -61,7 +63,8 @@ class Swap extends Component {
swapOriginKindTo, swapOriginKindTo,
swapDestinationKindTo, swapDestinationKindTo,
swapOriginAmountTo, swapOriginAmountTo,
swapDestinationAmountTo swapDestinationAmountTo,
swapOriginKindAndDestinationKindAndDestinationOptionsTo
}; };
@ -113,6 +116,10 @@ function mapDispatchToProps(dispatch) {
}, },
swapUpdateBityRatesTo: (bityRates) => { swapUpdateBityRatesTo: (bityRates) => {
dispatch(SWAP_UPDATE_BITY_RATES_TO(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 SWAP_UPDATE_BITY_RATES
} from 'actions/swap'; } from 'actions/swap';
import without from 'lodash/without'; export const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP'];
const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP'];
const initialState = { const initialState = {
originAmount: 0, originAmount: 0,
destinationAmount: 0, destinationAmount: 0,
originKind: 'BTC', originKind: 'BTC',
destinationKind: 'ETH', destinationKind: 'ETH',
destinationKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, 'BTC'), destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== 'BTC'),
originKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, 'REP'), originKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== 'REP'),
bityRates: {} bityRates: {}
}; };
@ -26,8 +26,8 @@ export function swap(state = initialState, action) {
return { return {
...state, ...state,
originKind: action.value, originKind: action.value,
destinationKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, action.value), destinationKind: action.value === state.destinationKind ? ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== action.value)[0] : state.destinationKind,
destinationKind: without(ALL_CRYPTO_KIND_OPTIONS, action.value)[0] destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== action.value)
}; };
} }
case SWAP_DESTINATION_KIND: { case SWAP_DESTINATION_KIND: {