From 3ea92298dba1b61a46819198c3d026525a50cda2 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Date: Wed, 19 Apr 2023 12:53:42 +0800 Subject: [PATCH] Jim/93667/replace connect with use store in trade header extensions trade settings extensions progress slider stream routes (#83) * refactor: remove connect from positions-drawer * refactor: remove connect from positions-modal-card * refactor: remove connect from toggle-positions-mobile * refactor: remove connect from time-picker * refactor: remove connect from populate-header * refactor: remove connect from trade-footer-extensions * refactor: migrate trade-header-extensions to ts and remove connect from it * refactor: migrate trade-settings-extensions to ts and remove connect from it * refactor: remove connect from progress-slider-stream and routes * chore: update mocstore with new fields --- .../src/components/u-i-loader/ui-loader.tsx | 4 +- packages/stores/src/mockStore.ts | 6 +++ packages/stores/types.ts | 14 ++++- .../progress-slider-stream.jsx | 17 +++--- .../src/App/Containers/Routes/routes.jsx | 46 +++++----------- .../Containers/trade-footer-extensions.jsx | 30 +++-------- ...nsions.jsx => trade-header-extensions.tsx} | 54 +++++++------------ ...ions.jsx => trade-settings-extensions.tsx} | 32 +++++------ packages/trader/src/App/app.tsx | 4 +- 9 files changed, 88 insertions(+), 119 deletions(-) rename packages/trader/src/App/Containers/{trade-header-extensions.jsx => trade-header-extensions.tsx} (55%) rename packages/trader/src/App/Containers/{trade-settings-extensions.jsx => trade-settings-extensions.tsx} (67%) diff --git a/packages/components/src/components/u-i-loader/ui-loader.tsx b/packages/components/src/components/u-i-loader/ui-loader.tsx index 34ce92b6b06a..beb8f24586a6 100644 --- a/packages/components/src/components/u-i-loader/ui-loader.tsx +++ b/packages/components/src/components/u-i-loader/ui-loader.tsx @@ -1,10 +1,12 @@ import React from 'react'; import classNames from 'classnames'; +import Loadable from 'react-loadable'; type TUILoader = { className?: string; classNameBlock?: string; -}; +} & Loadable.LoadingComponentProps; + const UILoader = ({ className, classNameBlock }: TUILoader) => { const block_class = classNames(classNameBlock, 'block-ui'); const loading_class = classNames('block-ui__loading', className); diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index 8a99a607cf7f..625cbaeed4ba 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -141,6 +141,7 @@ const mock = (): TStores => { is_trading_experience_incomplete: false, is_virtual: false, is_withdrawal_lock: false, + is_populating_account_list: false, landing_company_shortcode: '', local_currency_config: { currency: '', @@ -248,6 +249,8 @@ const mock = (): TStores => { is_ready_to_deposit_modal_visible: false, is_need_real_account_for_cashier_modal_visible: false, toggleNeedRealAccountForCashierModal: jest.fn(), + populateHeaderExtensions: jest.fn(), + populateSettingsExtensions: jest.fn(), }, traders_hub: { closeModal: jest.fn(), @@ -285,6 +288,9 @@ const mock = (): TStores => { decrement: jest.fn(), unmount: jest.fn(), }, + portfolio: { + onMount: jest.fn(), + }, }; }; diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 04b8cd820714..5aabc1f8dbd2 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -1,7 +1,12 @@ import type { Authorize, DetailsOfEachMT5Loginid, GetAccountStatus, GetLimits, LogOutResponse } from '@deriv/api-types'; - import type { RouteComponentProps } from 'react-router'; +export type TPopulateSettingsExtensionsMenuItem = { + icon: string; + label: string; + value: (props: T) => JSX.Element; +}; + type TAccount = NonNullable[0]; type TAccountsList = { @@ -131,6 +136,7 @@ type TClientStore = { is_virtual: boolean; is_withdrawal_lock: boolean; landing_company_shortcode: string; + is_populating_account_list: boolean; local_currency_config: { currency: string; decimal_places?: number; @@ -241,6 +247,8 @@ type TUiStore = { is_ready_to_deposit_modal_visible: boolean; is_need_real_account_for_cashier_modal_visible: boolean; toggleNeedRealAccountForCashierModal: () => void; + populateHeaderExtensions: (header_items: JSX.Element | null) => void; + populateSettingsExtensions: (menu_items: Array | null) => void; }; type TMenuStore = { @@ -280,6 +288,9 @@ type TTradersHubStore = { is_real: boolean; selectRegion: (region: string) => void; }; +type TPortfolioStore = { + onMount: () => void; +}; /** * This is the type that contains all the `core` package stores @@ -294,4 +305,5 @@ export type TCoreStores = { modules: any; notifications: TNotificationStore; traders_hub: TTradersHubStore; + portfolio: TPortfolioStore; }; diff --git a/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx b/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx index ad46df3b3359..487cbc036604 100644 --- a/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx +++ b/packages/trader/src/App/Containers/ProgressSliderStream/progress-slider-stream.jsx @@ -2,10 +2,14 @@ import PropTypes from 'prop-types'; import React from 'react'; import { ProgressSlider } from '@deriv/components'; import { getCurrentTick } from '@deriv/shared'; -import { connect } from 'Stores/connect'; import { getCardLabels } from 'Constants/contract'; +import { observer, useStore } from '@deriv/stores'; + +const ProgressSliderStream = observer(({ contract_info }) => { + const { common, portfolio } = useStore(); + const { server_time } = common; + const { is_loading } = portfolio; -const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => { if (!contract_info) { return
; } @@ -22,15 +26,10 @@ const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => { ticks_count={contract_info.tick_count} /> ); -}; +}); ProgressSliderStream.propTypes = { contract_info: PropTypes.object, - is_loading: PropTypes.bool, - server_time: PropTypes.object, }; -export default connect(({ common, portfolio }) => ({ - is_loading: portfolio.is_loading, - server_time: common.server_time, -}))(ProgressSliderStream); +export default ProgressSliderStream; diff --git a/packages/trader/src/App/Containers/Routes/routes.jsx b/packages/trader/src/App/Containers/Routes/routes.jsx index b6059af441a5..5a37e794281a 100644 --- a/packages/trader/src/App/Containers/Routes/routes.jsx +++ b/packages/trader/src/App/Containers/Routes/routes.jsx @@ -1,4 +1,3 @@ -import { PropTypes as MobxPropTypes } from 'mobx-react'; import PropTypes from 'prop-types'; import React from 'react'; import { withRouter, matchPath } from 'react-router'; @@ -7,7 +6,8 @@ import { UILoader } from '@deriv/components'; import { routes } from '@deriv/shared'; import BinaryRoutes from 'App/Components/Routes'; import getRoutesConfig from 'App/Constants/routes-config'; -import { connect } from 'Stores/connect'; +import { observer, useStore } from '@deriv/stores'; +import { useTraderStore } from 'Stores/useTraderStores'; const checkRoutingMatch = (route_list, path) => { return route_list.some(route => !!matchPath(path, { path: route, exact: true })); @@ -36,17 +36,14 @@ const Error = Loadable({ }, }); -const Routes = ({ - onUnmountPortfolio, - error, - has_error, - history, - is_logged_in, - is_logging_in, - passthrough, - setPromptHandler, - setTradeMountingPolicy, -}) => { +const Routes = observer(({ history, passthrough }) => { + const { client, common, ui, portfolio } = useStore(); + const { setSkipPrePostLifecycle: setTradeMountingPolicy } = useTraderStore(); + const { error, has_error } = common; + const { onUnmount: onUnmountPortfolio } = portfolio; + const { is_logged_in, is_logging_in } = client; + const { setPromptHandler } = ui; + React.useEffect(() => { if (setPromptHandler) { setPromptHandler(true, (route_to, action) => { @@ -101,30 +98,11 @@ const Routes = ({ if (has_error) return ; return ; -}; +}); Routes.propTypes = { - error: MobxPropTypes.objectOrObservableObject, - has_error: PropTypes.bool, history: PropTypes.object, - is_logged_in: PropTypes.bool, - is_logging_in: PropTypes.bool, - onUnmountPortfolio: PropTypes.func, passthrough: PropTypes.object, - setPromptHandler: PropTypes.func, - setTradeMountingPolicy: PropTypes.func, }; -// need to wrap withRouter around connect -// to prevent updates on from being blocked -export default withRouter( - connect(({ client, common, modules, ui, portfolio }) => ({ - onUnmountPortfolio: portfolio.onUnmount, - error: common.error, - has_error: common.has_error, - is_logged_in: client.is_logged_in, - is_logging_in: client.is_logging_in, - setPromptHandler: ui.setPromptHandler, - setTradeMountingPolicy: modules.trade.setSkipPrePostLifecycle, - }))(Routes) -); +export default withRouter(Routes); diff --git a/packages/trader/src/App/Containers/trade-footer-extensions.jsx b/packages/trader/src/App/Containers/trade-footer-extensions.jsx index cf3ace658170..702950f5ebca 100644 --- a/packages/trader/src/App/Containers/trade-footer-extensions.jsx +++ b/packages/trader/src/App/Containers/trade-footer-extensions.jsx @@ -3,16 +3,13 @@ import React from 'react'; import { withRouter } from 'react-router-dom'; import { routes } from '@deriv/shared'; import TogglePositions from 'App/Components/Elements/TogglePositions'; -import { connect } from 'Stores/connect'; +import { observer, useStore } from '@deriv/stores'; -const TradeFooterExtensions = ({ - active_positions_count, - is_logged_in, - is_positions_drawer_on, - location, - populateFooterExtensions, - togglePositionsDrawer, -}) => { +const TradeFooterExtensions = observer(() => { + const { client, portfolio, ui } = useStore(); + const { is_logged_in } = client; + const { active_positions_count } = portfolio; + const { is_positions_drawer_on, populateFooterExtensions, togglePositionsDrawer } = ui; React.useEffect(() => populateFooter()); // eslint-disable-next-line react-hooks/exhaustive-deps React.useEffect(() => () => populateFooterExtensions([]), []); @@ -41,21 +38,10 @@ const TradeFooterExtensions = ({ }; return null; -}; +}); TradeFooterExtensions.propTypes = { - active_positions_count: PropTypes.number, - is_logged_in: PropTypes.bool, - is_positions_drawer_on: PropTypes.bool, location: PropTypes.object, - populateFooterExtensions: PropTypes.func, - togglePositionsDrawer: PropTypes.func, }; -export default connect(({ client, ui, portfolio }) => ({ - active_positions_count: portfolio.active_positions_count, - is_logged_in: client.is_logged_in, - is_positions_drawer_on: ui.is_positions_drawer_on, - populateFooterExtensions: ui.populateFooterExtensions, - togglePositionsDrawer: ui.togglePositionsDrawer, -}))(withRouter(TradeFooterExtensions)); +export default withRouter(TradeFooterExtensions); diff --git a/packages/trader/src/App/Containers/trade-header-extensions.jsx b/packages/trader/src/App/Containers/trade-header-extensions.tsx similarity index 55% rename from packages/trader/src/App/Containers/trade-header-extensions.jsx rename to packages/trader/src/App/Containers/trade-header-extensions.tsx index 023c69f1bd6f..4ff760b9bdb8 100644 --- a/packages/trader/src/App/Containers/trade-header-extensions.jsx +++ b/packages/trader/src/App/Containers/trade-header-extensions.tsx @@ -1,31 +1,34 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { when } from 'mobx'; import { MobileWrapper } from '@deriv/components'; import { isMobile, routes, WS } from '@deriv/shared'; -import { connect, MobxContentProvider } from 'Stores/connect'; import PopulateHeader from './populate-header'; +import { observer, useStore } from '@deriv/stores'; +import TraderProviders from '../../trader-providers'; +import { TCoreStores } from '@deriv/stores/types'; + +type TradeHeaderExtensionsProps = { + store: TCoreStores; +}; + +const TradeHeaderExtensions = observer(({ store }: TradeHeaderExtensionsProps) => { + const { client, modules, ui, portfolio } = useStore(); + const { populateHeaderExtensions } = ui; + const { onMount: onMountPositions } = portfolio; + const { is_logged_in, is_populating_account_list } = client; + const { onMountCommon: onMountCashier, setAccountSwitchListener } = modules.cashier.general_store; -const TradeHeaderExtensions = ({ - populateHeaderExtensions, - store, - is_logged_in, - is_populating_account_list, - onMountPositions, - onMountCashier, - setAccountSwitchListener, -}) => { const show_positions_toggle = location.pathname !== routes.mt5; const show_component = is_logged_in && show_positions_toggle; const populateHeaderfunction = React.useCallback(() => { - const header_items = show_component && ( + const header_items = show_component ? ( - + - + - ); + ) : null; populateHeaderExtensions(header_items); }, [populateHeaderExtensions, store, show_positions_toggle, is_populating_account_list]); @@ -63,23 +66,6 @@ const TradeHeaderExtensions = ({ }); return null; -}; - -TradeHeaderExtensions.propTypes = { - populateHeaderExtensions: PropTypes.func, - store: PropTypes.object, - is_logged_in: PropTypes.bool, - is_populating_account_list: PropTypes.bool, - onMountPositions: PropTypes.func, - onMountCashier: PropTypes.func, - setAccountSwitchListener: PropTypes.func, -}; +}); -export default connect(({ client, modules, ui, portfolio }) => ({ - populateHeaderExtensions: ui.populateHeaderExtensions, - is_logged_in: client.is_logged_in, - is_populating_account_list: client.is_populating_account_list, - onMountPositions: portfolio.onMount, - onMountCashier: modules.cashier.general_store.onMountCommon, - setAccountSwitchListener: modules.cashier.general_store.setAccountSwitchListener, -}))(TradeHeaderExtensions); +export default TradeHeaderExtensions; diff --git a/packages/trader/src/App/Containers/trade-settings-extensions.jsx b/packages/trader/src/App/Containers/trade-settings-extensions.tsx similarity index 67% rename from packages/trader/src/App/Containers/trade-settings-extensions.jsx rename to packages/trader/src/App/Containers/trade-settings-extensions.tsx index 01572245934f..024aac254eb7 100644 --- a/packages/trader/src/App/Containers/trade-settings-extensions.jsx +++ b/packages/trader/src/App/Containers/trade-settings-extensions.tsx @@ -1,9 +1,14 @@ -import PropTypes from 'prop-types'; import React from 'react'; import Loadable from 'react-loadable'; import { UILoader } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { connect, MobxContentProvider } from 'Stores/connect'; +import { observer, useStore } from '@deriv/stores'; +import TraderProviders from '../../trader-providers'; +import { TCoreStores, TPopulateSettingsExtensionsMenuItem } from '@deriv/stores/types'; + +type TTradeSettingsExtensionsProps = { + store: TCoreStores; +}; const ChartSettingContainer = Loadable({ loader: () => @@ -19,15 +24,17 @@ const ChartSettingContainer = Loadable({ // loading: UILoader, // }); -const renderItemValue = (props, store) => ( - +const renderItemValue = (props: T, store: TCoreStores) => ( + - + ); -const TradeSettingsExtensions = ({ populateSettingsExtensions, store }) => { +const TradeSettingsExtensions = observer(({ store }: TTradeSettingsExtensionsProps) => { + const { ui } = useStore(); + const { populateSettingsExtensions } = ui; const populateSettings = () => { - const menu_items = [ + const menu_items: Array | null = [ { icon: 'IcChart', label: localize('Charts'), @@ -49,13 +56,6 @@ const TradeSettingsExtensions = ({ populateSettingsExtensions, store }) => { React.useEffect(() => populateSettings()); return null; -}; - -TradeSettingsExtensions.propTypes = { - populateSettingsExtensions: PropTypes.func, - store: PropTypes.object, -}; +}); -export default connect(({ ui }) => ({ - populateSettingsExtensions: ui.populateSettingsExtensions, -}))(TradeSettingsExtensions); +export default TradeSettingsExtensions; diff --git a/packages/trader/src/App/app.tsx b/packages/trader/src/App/app.tsx index fcb19bcecbea..5fd47961ec4b 100644 --- a/packages/trader/src/App/app.tsx +++ b/packages/trader/src/App/app.tsx @@ -1,9 +1,9 @@ import React from 'react'; import Loadable from 'react-loadable'; import Routes from 'App/Containers/Routes/routes.jsx'; -import TradeHeaderExtensions from 'App/Containers/trade-header-extensions.jsx'; +import TradeHeaderExtensions from 'App/Containers/trade-header-extensions'; import TradeFooterExtensions from 'App/Containers/trade-footer-extensions.jsx'; -import TradeSettingsExtensions from 'App/Containers/trade-settings-extensions.jsx'; +import TradeSettingsExtensions from 'App/Containers/trade-settings-extensions'; import { NetworkStatusToastErrorPopup } from 'Modules/Trading/Containers/toast-popup.jsx'; import initStore from './init-store'; import 'Sass/app.scss';