From aad42d6cfd740606574ceb9698d95d04ae1079e8 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Date: Mon, 17 Apr 2023 17:17:03 +0800 Subject: [PATCH] refactor: contract-replay, contract-drawer and contract-drawer-card to use useStore (#77) --- .../ContractDrawer/contract-drawer-card.jsx | 320 ++++++++---------- .../ContractDrawer/contract-drawer.jsx | 58 +--- .../Contract/Containers/contract-replay.jsx | 276 +++++---------- 3 files changed, 248 insertions(+), 406 deletions(-) diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx index 294ddb4ecb87..03cd32c94716 100644 --- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx +++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx @@ -4,196 +4,176 @@ import React from 'react'; import { DesktopWrapper, MobileWrapper, Collapsible, ContractCard, useHover } from '@deriv/components'; import { isCryptoContract, isDesktop, getEndTime, getSymbolDisplayName } from '@deriv/shared'; import { getCardLabels, getContractTypeDisplay } from 'Constants/contract'; -import { connect } from 'Stores/connect'; import { getMarketInformation } from 'Utils/Helpers/market-underlying'; import { SwipeableContractDrawer } from './swipeable-components.jsx'; import MarketClosedContractOverlay from './market-closed-contract-overlay.jsx'; import { connectWithContractUpdate } from 'Stores/Modules/Trading/Helpers/multiplier'; +import { useTraderStore } from 'Stores/useTraderStores'; +import { observer, useStore } from '@deriv/stores'; -const ContractDrawerCard = ({ - active_symbols, - addToast, - contract_info, - contract_update, - currency, - current_focus, - getContractById, - is_accumulator, - is_market_closed, - is_mobile, - is_multiplier, - is_vanilla, - is_sell_requested, - is_collapsed, - onClickCancel, - onClickSell, - onSwipedUp, - onSwipedDown, - removeToast, - result, - setCurrentFocus, - server_time, - should_show_cancellation_warning, - status, - toggleCancellationWarning, - toggleContractAuditDrawer, -}) => { - const [hover_ref, should_hide_closed_overlay] = useHover(); +const ContractDrawerCard = observer( + ({ + currency, + is_accumulator, + is_multiplier, + is_vanilla, + is_collapsed, + onSwipedUp, + onSwipedDown, + result, + status, + toggleContractAuditDrawer, + }) => { + const { active_symbols } = useTraderStore(); + const { + ui: { + addToast, + current_focus, + removeToast, + should_show_cancellation_warning, + setCurrentFocus, + toggleCancellationWarning, + is_mobile, + }, + contract_trade: { getContractById }, + common: { server_time }, + contract_replay: { + is_market_closed, + is_sell_requested, + onClickCancel, + onClickSell, + contract_store: { contract_info, contract_update }, + }, + } = useStore(); + const [hover_ref, should_hide_closed_overlay] = useHover(); - const { profit, underlying: symbol } = contract_info; - const is_sold = !!getEndTime(contract_info); - const display_name = getSymbolDisplayName(active_symbols, getMarketInformation(contract_info.shortcode).underlying); + const { profit, underlying: symbol } = contract_info; + const is_sold = !!getEndTime(contract_info); + const display_name = getSymbolDisplayName( + active_symbols, + getMarketInformation(contract_info.shortcode).underlying + ); - const is_crypto = isCryptoContract(contract_info.underlying); - const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier); + const is_crypto = isCryptoContract(contract_info.underlying); + const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier); - const card_header = ( - - ); + const card_header = ( + + ); - const card_body = ( - - ); + const card_body = ( + + ); - const card_footer = ( - - ); + const card_footer = ( + + ); - const contract_el = ( - - {card_header} - {card_body} - - ); + const contract_el = ( + + {card_header} + {card_body} + + ); - const contract_card = ( - -
0 && !result, - 'dc-contract-card--red': is_mobile && !is_multiplier && profit < 0 && !result, - 'contract-card__market-closed--disabled': is_market_closed && should_hide_closed_overlay, - })} - ref={hover_ref} + const contract_card = ( + - {is_market_closed && !getEndTime(contract_info) && ( -
- -
- )} - {contract_el} - {card_footer} -
- - ); - - const has_swipeable_drawer = is_sold || is_multiplier || is_accumulator || is_vanilla; - - return ( - - {contract_card} - - 0 && !result, + 'dc-contract-card--red': is_mobile && !is_multiplier && profit < 0 && !result, + 'contract-card__market-closed--disabled': is_market_closed && should_hide_closed_overlay, + })} + ref={hover_ref} > - {has_swipeable_drawer && ( - + {is_market_closed && !getEndTime(contract_info) && ( +
+ +
)} - {contract_card} - - - - ); -}; + {contract_el} + {card_footer} + + + ); + + const has_swipeable_drawer = is_sold || is_multiplier || is_accumulator || is_vanilla; + + return ( + + {contract_card} + + + {has_swipeable_drawer && ( + + )} + {contract_card} + + + + ); + } +); ContractDrawerCard.propTypes = { - active_symbols: PropTypes.array, - addToast: PropTypes.func, - contract_info: PropTypes.object, - contract_update: PropTypes.object, currency: PropTypes.string, - current_focus: PropTypes.string, - getContractById: PropTypes.func, is_accumulator: PropTypes.bool, is_collapsed: PropTypes.bool, - is_market_closed: PropTypes.bool, - is_mobile: PropTypes.bool, - is_multiplier: PropTypes.bool, - is_vanilla: PropTypes.bool, - is_sell_requested: PropTypes.bool, onClickCancel: PropTypes.func, onClickSell: PropTypes.func, - onSwipedDown: PropTypes.func, - onSwipedUp: PropTypes.func, - status: PropTypes.string, - removeToast: PropTypes.func, - result: PropTypes.any, - server_time: PropTypes.object, - setCurrentFocus: PropTypes.func, - should_show_cancellation_warning: PropTypes.bool, - toggleCancellationWarning: PropTypes.func, - toggleContractAuditDrawer: PropTypes.func, }; - -export default connect(({ modules, ui, contract_trade }) => ({ - active_symbols: modules.trade.active_symbols, - addToast: ui.addToast, - current_focus: ui.current_focus, - getContractById: contract_trade.getContractById, - removeToast: ui.removeToast, - should_show_cancellation_warning: ui.should_show_cancellation_warning, - setCurrentFocus: ui.setCurrentFocus, - toggleCancellationWarning: ui.toggleCancellationWarning, -}))(ContractDrawerCard); +export default ContractDrawerCard; diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx index 11620824a1d2..87b531bcb975 100644 --- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx +++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx @@ -14,27 +14,18 @@ import { } from '@deriv/shared'; import ContractAudit from 'App/Components/Elements/ContractAudit'; import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader'; -import { connect } from 'Stores/connect'; import ContractDrawerCard from './contract-drawer-card.jsx'; import { SwipeableContractAudit } from './swipeable-components.jsx'; +import { observer, useStore } from '@deriv/stores'; -const ContractDrawer = ({ - contract_info, - contract_update, - contract_update_history, - is_accumulator, - is_mobile, - is_sell_requested, - is_dark_theme, - is_market_closed, - is_multiplier, - is_vanilla, - onClickCancel, - onClickSell, - server_time, - status, - toggleHistoryTab, -}) => { +const ContractDrawer = observer(({ is_accumulator, is_multiplier, is_vanilla, toggleHistoryTab }) => { + const { + contract_replay: { + indicative_status: status, + contract_store: { contract_info, contract_update_history }, + }, + ui: { is_dark_mode_on: is_dark_theme }, + } = useStore(); const { currency, exit_tick_display_value, is_sold } = contract_info; const contract_drawer_ref = React.useRef(); const contract_drawer_card_ref = React.useRef(); @@ -65,21 +56,13 @@ const ContractDrawer = ({ return ( setShouldShowContractAudit(true)} onSwipedDown={() => setShouldShowContractAudit(false)} - server_time={server_time} status={status} toggleContractAuditDrawer={() => setShouldShowContractAudit(!should_show_contract_audit)} /> @@ -172,32 +155,13 @@ const ContractDrawer = ({ ); -}; +}); ContractDrawer.propTypes = { - contract_info: PropTypes.object, - contract_update: PropTypes.object, - contract_update_history: PropTypes.array, is_accumulator: PropTypes.bool, - is_chart_loading: PropTypes.bool, - is_dark_theme: PropTypes.bool, - is_market_closed: PropTypes.bool, - is_mobile: PropTypes.bool, is_multiplier: PropTypes.bool, is_vanilla: PropTypes.bool, - is_history_tab_active: PropTypes.bool, - is_sell_requested: PropTypes.bool, - onClickCancel: PropTypes.func, - onClickContractUpdate: PropTypes.func, - onClickSell: PropTypes.func, - server_time: PropTypes.object, - status: PropTypes.string, toggleHistoryTab: PropTypes.func, }; -export default withRouter( - connect(({ common, ui }) => ({ - server_time: common.server_time, - is_mobile: ui.is_mobile, - }))(ContractDrawer) -); +export default withRouter(ContractDrawer); diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx index 2144de2614bc..387705172d91 100644 --- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx +++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx @@ -28,32 +28,24 @@ import ChartLoader from 'App/Components/Elements/chart-loader.jsx'; import ContractDrawer from 'App/Components/Elements/ContractDrawer'; import UnsupportedContractModal from 'App/Components/Elements/Modals/UnsupportedContractModal'; import { SmartChart } from 'Modules/SmartChart'; -import { connect } from 'Stores/connect'; import { ChartBottomWidgets, ChartTopWidgets, DigitsWidget, InfoBoxWidget } from './contract-replay-widget.jsx'; import ChartMarker from 'Modules/SmartChart/Components/Markers/marker.jsx'; import allMarkers from 'Modules/SmartChart/Components/all-markers.jsx'; +import { observer, useStore } from '@deriv/stores'; +import { useTraderStore } from 'Stores/useTraderStores'; -const ContractReplay = ({ - contract_id, - contract_info, - contract_update, - contract_update_history, - is_chart_loading, - is_dark_theme, - is_digit_contract, - is_forward_starting, - is_market_closed, - is_sell_requested, - is_valid_to_cancel, - onClickCancel, - NotificationMessages, - onClickSell, - indicative_status, - toggleHistoryTab, - routeBackInApp, - onMount, - onUnmount, -}) => { +const ContractReplay = observer(({ contract_id }) => { + const { + contract_replay: { + onMount, + onUnmount, + is_chart_loading, + is_forward_starting, + contract_store: { contract_info, contract_update, contract_update_history, is_digit_contract }, + }, + common: { routeBackInApp }, + ui: { is_dark_mode_on: is_dark_theme, notification_messages_ui: NotificationMessages, toggleHistoryTab }, + } = useStore(); const [is_visible, setIsVisible] = React.useState(false); const history = useHistory(); @@ -87,16 +79,8 @@ const ContractReplay = ({ contract_update={contract_update} contract_update_history={contract_update_history} is_accumulator={is_accumulator} - is_chart_loading={is_chart_loading} - is_dark_theme={is_dark_theme} - is_market_closed={is_market_closed} is_multiplier={is_multiplier} - is_sell_requested={is_sell_requested} - is_valid_to_cancel={is_valid_to_cancel} is_vanilla={is_vanilla} - onClickCancel={onClickCancel} - onClickSell={onClickSell} - status={indicative_status} toggleHistoryTab={toggleHistoryTab} /> ); @@ -176,119 +160,112 @@ const ContractReplay = ({ ); -}; +}); ContractReplay.propTypes = { contract_id: PropTypes.number, - contract_info: PropTypes.object, - contract_update: PropTypes.object, - contract_update_history: PropTypes.array, - indicative_status: PropTypes.string, - is_chart_loading: PropTypes.bool, - is_dark_theme: PropTypes.bool, - is_digit_contract: PropTypes.bool, - is_forward_starting: PropTypes.bool, - is_market_closed: PropTypes.bool, - is_sell_requested: PropTypes.bool, - is_valid_to_cancel: PropTypes.bool, - NotificationMessages: PropTypes.func, - onClickCancel: PropTypes.func, - onClickSell: PropTypes.func, - onMount: PropTypes.func, - onUnmount: PropTypes.func, - routeBackInApp: PropTypes.func, - routes: PropTypes.arrayOf(PropTypes.object), - toggleHistoryTab: PropTypes.func, }; -export default connect(({ common, contract_replay, ui }) => { - const local_contract_replay = contract_replay; - const contract_store = local_contract_replay.contract_store; - return { - routeBackInApp: common.routeBackInApp, - contract_info: contract_store.contract_info, - contract_update: contract_store.contract_update, - contract_update_history: contract_store.contract_update_history, - is_digit_contract: contract_store.is_digit_contract, - is_market_closed: local_contract_replay.is_market_closed, - is_sell_requested: local_contract_replay.is_sell_requested, - is_valid_to_cancel: local_contract_replay.is_valid_to_cancel, - onClickCancel: local_contract_replay.onClickCancel, - onClickSell: local_contract_replay.onClickSell, - onMount: local_contract_replay.onMount, - onUnmount: local_contract_replay.onUnmount, - indicative_status: local_contract_replay.indicative_status, - is_chart_loading: local_contract_replay.is_chart_loading, - is_forward_starting: local_contract_replay.is_forward_starting, - is_dark_theme: ui.is_dark_mode_on, - NotificationMessages: ui.notification_messages_ui, - toggleHistoryTab: ui.toggleHistoryTab, - }; -})(ContractReplay); +export default ContractReplay; // CHART ----------------------------------------- -const Chart = props => { - const AccumulatorsShadedBarriers = allMarkers[props.accumulators_barriers_marker?.type]; +const ReplayChart = observer(({ is_accumulator_contract }) => { + const trade = useTraderStore(); + const { contract_replay, common, ui } = useStore(); + const { contract_store, chart_state, chartStateChange, margin } = contract_replay; + const { + contract_config, + marker: accumulators_barriers_marker, + is_digit_contract, + barriers_array, + markers_array, + contract_info, + } = contract_store; + const { underlying: symbol, audit_details } = contract_info; + const allow_scroll_to_epoch = chart_state === 'READY' || chart_state === 'SCROLL_TO_LEFT'; + const { app_routing_history, current_language, is_socket_opened } = common; + const { is_dark_mode_on: is_dark_theme, is_chart_layout_default, is_chart_countdown_visible } = ui; + const { end_epoch, chart_type, start_epoch, granularity } = contract_config; + /** + * TODO: remove forcing light theme once DBot supports dark theme + * DBot does not support for dark theme since till now, + * as a result, if any user come to report detail pages + * from DBot, we should force it to have light theme + */ + const from_platform = getPlatformRedirect(app_routing_history); + const should_force_light_theme = from_platform.name === 'DBot'; + const settings = { + language: current_language.toLowerCase(), + theme: is_dark_theme && !should_force_light_theme ? 'dark' : 'light', + position: is_chart_layout_default ? 'bottom' : 'left', + countdown: is_chart_countdown_visible, + assetInformation: false, // ui.is_chart_asset_info_visible, + isHighestLowestMarkerEnabled: false, // TODO: Pending UI + }; + const scroll_to_epoch = allow_scroll_to_epoch ? contract_config.scroll_to_epoch : undefined; + const all_ticks = audit_details ? audit_details.all_ticks : []; + const { wsForget, wsSubscribe, wsSendRequest, wsForgetStream } = trade; + + const AccumulatorsShadedBarriers = allMarkers[accumulators_barriers_marker?.type]; const isBottomWidgetVisible = () => { - return isDesktop() && props.is_digit_contract; + return isDesktop() && is_digit_contract; }; const getChartYAxisMargin = () => { - const margin = { + const chart_margin = { top: isMobile() ? 96 : 148, bottom: isBottomWidgetVisible() ? 128 : 112, }; if (isMobile()) { - margin.bottom = 48; + chart_margin.bottom = 48; } - return margin; + return chart_margin; }; - const prev_start_epoch = usePrevious(props.start_epoch); + const prev_start_epoch = usePrevious(start_epoch); return ( - {props.markers_array.map(marker => ( + {markers_array.map(marker => ( { is_bottom_widget_visible={isBottomWidgetVisible()} /> ))} - {props.is_accumulator_contract && props.markers_array && ( + {is_accumulator_contract && markers_array && ( )} ); -}; +}); -Chart.propTypes = { - accumulators_barriers_marker: PropTypes.object, - barriers_array: PropTypes.array, - BottomWidgets: PropTypes.node, - chartStateChange: PropTypes.func, - chart_type: PropTypes.string, - end_epoch: PropTypes.number, - granularity: PropTypes.number, - InfoBox: PropTypes.node, +ReplayChart.propTypes = { is_accumulator_contract: PropTypes.bool, - is_dark_theme: PropTypes.bool, - is_digit_contract: PropTypes.bool, - is_mobile: PropTypes.bool, - is_socket_opened: PropTypes.bool, - is_static_chart: PropTypes.bool, - margin: PropTypes.number, - markers_array: PropTypes.array, - replay_controls: PropTypes.object, - scroll_to_epoch: PropTypes.number, - settings: PropTypes.object, - start_epoch: PropTypes.number, - symbol: PropTypes.string, - contract_info: PropTypes.object, - all_ticks: PropTypes.array, - wsForget: PropTypes.func, - wsForgetStream: PropTypes.func, - wsSendRequest: PropTypes.func, - wsSubscribe: PropTypes.func, - shouldFetchTickHistory: PropTypes.bool, }; - -const ReplayChart = connect(({ modules, ui, common, contract_replay }) => { - const trade = modules.trade; - const contract_store = contract_replay.contract_store; - const contract_config = contract_store.contract_config; - const allow_scroll_to_epoch = - contract_replay.chart_state === 'READY' || contract_replay.chart_state === 'SCROLL_TO_LEFT'; - /** - * TODO: remove forcing light theme once DBot supports dark theme - * DBot does not support for dark theme since till now, - * as a result, if any user come to report detail pages - * from DBot, we should force it to have light theme - */ - const from_platform = getPlatformRedirect(common.app_routing_history); - const should_force_light_theme = from_platform.name === 'DBot'; - - const settings = { - language: common.current_language.toLowerCase(), - theme: ui.is_dark_mode_on && !should_force_light_theme ? 'dark' : 'light', - position: ui.is_chart_layout_default ? 'bottom' : 'left', - countdown: ui.is_chart_countdown_visible, - assetInformation: false, // ui.is_chart_asset_info_visible, - isHighestLowestMarkerEnabled: false, // TODO: Pending UI - }; - - return { - accumulators_barriers_marker: contract_store.marker, - end_epoch: contract_config.end_epoch, - chart_type: contract_config.chart_type, - start_epoch: contract_config.start_epoch, - granularity: contract_config.granularity, - scroll_to_epoch: allow_scroll_to_epoch ? contract_config.scroll_to_epoch : undefined, - settings, - is_mobile: ui.is_mobile, - is_socket_opened: common.is_socket_opened, - is_digit_contract: contract_store.is_digit_contract, - chartStateChange: contract_replay.chartStateChange, - margin: contract_replay.margin, - is_static_chart: contract_replay.is_static_chart, - barriers_array: contract_store.barriers_array, - markers_array: contract_store.markers_array, - symbol: contract_store.contract_info.underlying, - contract_info: contract_store.contract_info, - all_ticks: contract_store.contract_info.audit_details - ? contract_store.contract_info.audit_details.all_ticks - : [], - wsForget: trade.wsForget, - wsSubscribe: trade.wsSubscribe, - wsSendRequest: trade.wsSendRequest, - wsForgetStream: trade.wsForgetStream, - }; -})(Chart);