From 61a1a0be974c8610623f2bcb9a43797532cc78d9 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 11:29:33 -0700 Subject: Move BuyOrderProgress to its own component --- .../instant/src/components/buy_order_progress.tsx | 35 ++++++++++++++++++ .../src/containers/selected_asset_progress.tsx | 42 +++------------------- 2 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 packages/instant/src/components/buy_order_progress.tsx diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx new file mode 100644 index 000000000..e259e5606 --- /dev/null +++ b/packages/instant/src/components/buy_order_progress.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; + +import { TimedProgressBar } from '../components/timed_progress_bar'; + +import { TimeCounter } from '../components/time_counter'; +import { Container } from '../components/ui'; +import { OrderProcessState, OrderState } from '../types'; + +export interface BuyOrderProgressProps { + buyOrderState: OrderState; +} + +export const BuyOrderProgress: React.StatelessComponent = props => { + const { buyOrderState } = props; + + if ( + buyOrderState.processState === OrderProcessState.PROCESSING || + buyOrderState.processState === OrderProcessState.SUCCESS || + buyOrderState.processState === OrderProcessState.FAILURE + ) { + const progress = buyOrderState.progress; + const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING; + const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; + return ( + + + + + + + ); + } + + return null; +}; diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx index a910d8031..354a15bf0 100644 --- a/packages/instant/src/containers/selected_asset_progress.tsx +++ b/packages/instant/src/containers/selected_asset_progress.tsx @@ -1,49 +1,15 @@ -import * as React from 'react'; +// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts import { connect } from 'react-redux'; -import { TimedProgressBar } from '../components/timed_progress_bar'; - -import { TimeCounter } from '../components/time_counter'; -import { Container } from '../components/ui'; +import { BuyOrderProgress } from '../components/buy_order_progress'; import { State } from '../redux/reducer'; -import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; - -interface SelectedAssetProgressComponentProps { - buyOrderState: OrderState; -} -// TODO: rename this component and move to seperate file, and get props using mapStateToProps -export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent< - SelectedAssetProgressComponentProps -> = props => { - const { buyOrderState } = props; - - if ( - buyOrderState.processState === OrderProcessState.PROCESSING || - buyOrderState.processState === OrderProcessState.SUCCESS || - buyOrderState.processState === OrderProcessState.FAILURE - ) { - const progress = buyOrderState.progress; - const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING; - const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; - return ( - - - - - - - ); - } - - return null; -}; +import { OrderState } from '../types'; interface ConnectedState { buyOrderState: OrderState; - simulatedProgress?: SimulatedProgress; } const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ buyOrderState: state.buyOrderState, }); -export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent); +export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress); -- cgit