Jim/93667/replace connect with use store in trade header extensions t…

…rade settings extensions progress slider stream routes (binary-com#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

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);

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(),
+        },
     };
 };
 

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: <T extends object>(props: T) => JSX.Element;
+};
+
 type TAccount = NonNullable<Authorize['account_list']>[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<TPopulateSettingsExtensionsMenuItem> | 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;
 };

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 <div />;
     }
@@ -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;

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 <Error {...error} />;
 
     return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} passthrough={passthrough} />;
-};
+});
 
 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 <BinaryRoutes /> 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);

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);

packages/trader/src/App/Containers/trade-header-extensions.jsx → 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 ? (
             <MobileWrapper>
-                <MobxContentProvider store={store}>
+                <TraderProviders store={store}>
                     <PopulateHeader />
-                </MobxContentProvider>
+                </TraderProviders>
             </MobileWrapper>
-        );
+        ) : 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;

packages/trader/src/App/Containers/trade-settings-extensions.jsx → 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) => (
-    <MobxContentProvider store={store}>
+const renderItemValue = <T extends object>(props: T, store: TCoreStores) => (
+    <TraderProviders store={store}>
         <ChartSettingContainer {...props} />
-    </MobxContentProvider>
+    </TraderProviders>
 );
 
-const TradeSettingsExtensions = ({ populateSettingsExtensions, store }) => {
+const TradeSettingsExtensions = observer(({ store }: TTradeSettingsExtensionsProps) => {
+    const { ui } = useStore();
+    const { populateSettingsExtensions } = ui;
     const populateSettings = () => {
-        const menu_items = [
+        const menu_items: Array<TPopulateSettingsExtensionsMenuItem> | 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;

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';