move buy order state to its own component

This commit is contained in:
Steve Klebanoff
2018-10-23 17:28:27 -07:00
parent 3cd9f40e63
commit d43f89fa0a
2 changed files with 26 additions and 18 deletions

View File

@@ -0,0 +1,24 @@
import * as React from 'react';
import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
import { AsyncProcessState } from '../types';
import { SecondaryButton } from './secondary_button';
export interface BuyOrderStateButtonProps {
buyOrderState: AsyncProcessState;
}
export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
if (props.buyOrderState === AsyncProcessState.FAILURE) {
return <SelectedAssetRetryButton />;
} else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
return <SecondaryButton text="Success" isDisabled={true} />;
} else if (props.buyOrderState === AsyncProcessState.PENDING) {
return <SecondaryButton text="Processing" isDisabled={true} />;
}
return <SelectedAssetBuyButton />;
};

View File

@@ -2,12 +2,10 @@ import * as _ from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
import { SecondaryButton } from '../components/secondary_button';
import { State } from '../redux/reducer';
import { AsyncProcessState } from '../types';
import { SelectedAssetBuyButton } from './selected_asset_buy_button';
import { SelectedAssetRetryButton } from './selected_asset_retry_button';
import { BuyOrderStateButton } from '../components/buy_order_state_button';
interface ConnectedState {
buyOrderState: AsyncProcessState;
@@ -17,20 +15,6 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): Con
buyOrderState: state.buyOrderState,
});
const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{
buyOrderState: AsyncProcessState;
}> = props => {
if (props.buyOrderState === AsyncProcessState.FAILURE) {
return <SelectedAssetRetryButton />;
} else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
return <SecondaryButton text="Success" isDisabled={true} />;
} else if (props.buyOrderState === AsyncProcessState.PENDING) {
return <SecondaryButton text="Processing" isDisabled={true} />;
}
return <SelectedAssetBuyButton />;
};
export const SelectedAssetButton: React.ComponentClass<SelectedAssetButtonProps> = connect(mapStateToProps)(
SelectedAssetButtonPresentationComponent,
BuyOrderStateButton,
);