From 05b74ba1c8b10c356d396ce9a4834d053cd791b1 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 30 Oct 2018 13:27:28 -0700 Subject: Dispatching progress --- packages/instant/src/components/progress_bar.tsx | 17 ++++++++++ .../src/components/zero_ex_instant_container.tsx | 3 +- .../src/containers/selected_asset_progress_bar.tsx | 37 ++++++++++++++++++++++ packages/instant/src/redux/actions.ts | 3 ++ packages/instant/src/redux/reducer.ts | 7 ++++ packages/instant/src/types.ts | 5 +++ packages/instant/src/util/progress.ts | 16 ++++++++-- 7 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 packages/instant/src/components/progress_bar.tsx create mode 100644 packages/instant/src/containers/selected_asset_progress_bar.tsx (limited to 'packages') diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx new file mode 100644 index 000000000..b89c56ed5 --- /dev/null +++ b/packages/instant/src/components/progress_bar.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Text } from './ui/text'; + +export interface ProgressBarProps { + percentageDone: number; +} +export const ProgressBar: React.StatelessComponent = props => ( + + + {props.percentageDone}% + + +); diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index ff19351ff..b9f8d0d92 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -4,11 +4,11 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order import { LatestError } from '../containers/latest_error'; import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; +import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar'; import { ColorOption } from '../style/theme'; import { Container, Flex } from './ui'; - export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( @@ -25,6 +25,7 @@ export const ZeroExInstantContainer: React.StatelessComponent + diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx new file mode 100644 index 000000000..886e223d3 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_progress_bar.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; + +import { connect } from 'react-redux'; + +import { ProgressBar } from '../components/progress_bar'; +import { State } from '../redux/reducer'; +import { OrderProcessState, OrderState } from '../types'; + +interface SelectedAssetProgressComponentProps { + buyOrderState: OrderState; + percentageDone?: number; +} +export const SelectedAssetProgressComponent: React.StatelessComponent = props => { + const { buyOrderState, percentageDone } = props; + + // TODO: uncomment after done testing + // const isOrderStateOk = + // buyOrderState.processState === OrderProcessState.PROCESSING || + // buyOrderState.processState === OrderProcessState.SUCCESS; + const isOrderStateOk = true; + + if (isOrderStateOk && percentageDone) { + return ; + } + + return null; +}; + +interface ConnectedState { + buyOrderState: OrderState; + percentageDone?: number; +} +const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ + buyOrderState: state.buyOrderState, + percentageDone: state.orderProgress && state.orderProgress.percentageDone, +}); +export const SelectedAssetProgressBar = connect(mapStateToProps)(SelectedAssetProgressComponent); diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index bfae68e2b..59d059b59 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -28,6 +28,7 @@ export enum ActionTypes { UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE', UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE', UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET', + UPDATE_ORDER_PROGRESS_PERCENTAGE = 'UPDATE_ORDER_PROGRESS_PERCENTAGE', SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING', SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE', SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE', @@ -43,6 +44,8 @@ export const actions = { updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData), + updateOrderProgressPercentage: (percentDone: number) => + createAction(ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE, percentDone), setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING), setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE), setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SET_ERROR_MESSAGE, errorMessage), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index dd9403052..be336f7c2 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -12,6 +12,7 @@ import { DisplayStatus, Network, OrderProcessState, + OrderProgress, OrderState, } from '../types'; import { assetUtils } from '../util/asset'; @@ -31,6 +32,7 @@ export interface State { quoteRequestState: AsyncProcessState; latestErrorMessage?: string; latestErrorDisplayStatus: DisplayStatus; + orderProgress?: OrderProgress; } export const INITIAL_STATE: State = { @@ -119,6 +121,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, selectedAsset: newSelectedAsset, }; + case ActionTypes.UPDATE_ORDER_PROGRESS_PERCENTAGE: + return { + ...state, + orderProgress: { percentageDone: action.data }, + }; case ActionTypes.RESET_AMOUNT: return { ...state, diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 4631c9cae..722590165 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -16,12 +16,17 @@ export enum OrderProcessState { FAILURE = 'Failure', } +export interface OrderProgress { + percentageDone: number; +} + interface OrderStatePreTx { processState: OrderProcessState.NONE | OrderProcessState.VALIDATING; } interface OrderStatePostTx { processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE; txHash: string; + // TODO: move/rename? estimatedTimeMs?: number; } export type OrderState = OrderStatePreTx | OrderStatePostTx; diff --git a/packages/instant/src/util/progress.ts b/packages/instant/src/util/progress.ts index 5cb6a6de9..08b813e3d 100644 --- a/packages/instant/src/util/progress.ts +++ b/packages/instant/src/util/progress.ts @@ -1,3 +1,4 @@ +// TODO: change filename? import * as _ from 'lodash'; import { Dispatch } from 'redux'; @@ -26,19 +27,21 @@ interface TickingFinishingStatus { type TickingStatus = TickingNoneState | TickingRunningStatus | TickingFinishingStatus; const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS; -export class Progress { +class Progress { private _startTimeUnix?: number; private _expectedTimeMs?: number; private _intervalId?: number; private _percentageDone: number; private _tickingStatus: TickingStatus; + private _dispatcher: Dispatch; - constructor() { + constructor(dispatcher: Dispatch) { this._startTimeUnix = undefined; this._expectedTimeMs = undefined; this._percentageDone = 0; this._intervalId = undefined; this._tickingStatus = { state: TickingState.None }; + this._dispatcher = dispatcher; } public beginRunning(expectedTimeMs: number): void { @@ -66,8 +69,9 @@ export class Progress { : this._getNewPercentageNormal(); const maxPercentage = this._tickingStatus.state === TickingState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE; - const percentageDone = Math.min(rawPercentageDone, maxPercentage); + const percentageDone = Math.floor(Math.min(rawPercentageDone, maxPercentage)); this._percentageDone = percentageDone; + this._dispatcher(actions.updateOrderProgressPercentage(this._percentageDone)); console.log('percentageDone', this._percentageDone); if (percentageDone >= 100) { this._clearTimer(); @@ -96,3 +100,9 @@ export class Progress { return this._percentageDone + finishingState.increasePercentageEveryTick; } } + +let _currentProgress: Progress | undefined; +export const progress = (dispatcher: Dispatch): Progress => { + _currentProgress = _currentProgress || new Progress(dispatcher); + return _currentProgress; +}; -- cgit