Farzin/85855/Refactor ToggleMenuDrawer component to use useStore hook

packages/core/build/loaders-config.js

@@ -2,7 +2,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
 const js_loaders = [
-    '@deriv/shared/src/loaders/react-import-loader.js',
     '@deriv/shared/src/loaders/deriv-account-loader.js',
     '@deriv/shared/src/loaders/deriv-cashier-loader.js',
     '@deriv/shared/src/loaders/deriv-cfd-loader.js',

packages/core/package.json

@@ -96,8 +96,10 @@
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/deriv-charts": "1.0.1",
+        "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",
         "@deriv/reports": "^1.0.0",
+        "@deriv/stores": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
@@ -127,7 +129,7 @@
         "react-dom": "^17.0.2",
         "react-i18next": "^11.11.0",
         "react-loadable": "^5.5.0",
-       "framer-motion":"^6.5.1",
+        "framer-motion": "^6.5.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-tiny-popover": "^7.0.1",

packages/core/src/App/Containers/Layout/header/dashboard-header.jsx

@@ -39,7 +39,7 @@ const LoggedInHeader = ({ is_dark_mode }) => {
                     <React.Fragment>
                         <Icon icon={'IcNotificationClear'} height={20} width={17} />
                         <div className='dashboard-header__right--logged-in-separator' />
-                        <ToggleMenuDrawer alignment={'right'} is_logged_in should_allow_authentication title={''} />
+                        <ToggleMenuDrawer />
                     </React.Fragment>
                 )}
             </div>
@@ -94,7 +94,7 @@ const LoggedOutHeader = () => {
                 {isMobile() && (
                     <React.Fragment>
                         <div className='dashboard-header__right--logged-out-separator' />
-                        <ToggleMenuDrawer alignment={'right'} should_allow_authentication title={''} />
+                        <ToggleMenuDrawer />
                     </React.Fragment>
                 )}
             </div>

packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-
 import { Button, DesktopWrapper, Icon, MobileWrapper, Money, Popover, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
-import { PlatformSwitcher, ToggleNotifications } from 'App/Components/Layout/Header';
+import { ToggleNotifications } from 'App/Components/Layout/Header';
 import { getPlatformInformation, isMobile, routes } from '@deriv/shared';
 import { useHistory, withRouter } from 'react-router-dom';
-
 import { BinaryLink } from 'App/Components/Routes';
 import PropTypes from 'prop-types';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
@@ -97,34 +95,21 @@ const AccountBalance = ({ balance, currency }) => {
 };
 
 const DashboardPlatformHeader = ({
-    account_status,
     app_routing_history,
     balance,
     currency,
     disableApp,
     enableApp,
     header_extension,
-    is_dark_mode,
     is_logged_in,
     is_mt5_allowed,
     is_notifications_visible,
-    is_onramp_tab_visible,
-    is_p2p_enabled,
-    is_payment_agent_transfer_visible,
-    is_payment_agent_visible,
-    is_account_transfer_visible,
     is_settings_modal_on,
-    is_virtual,
-    location,
-    logoutClient,
     notifications_count,
-    setDarkMode,
     settings_extension,
-    should_allow_authentication,
     toggleNotifications,
     toggleSettingsModal,
 }) => {
-    const toggle_menu_drawer_ref = React.useRef(null);
     const filterPlatformsForClients = payload =>
         payload.filter(config => {
             if (config.link_to === routes.mt5) {
@@ -137,33 +122,7 @@ const DashboardPlatformHeader = ({
         <header className='dashboard-platform-header'>
             <div className='dashboard-platform-header__menu-left'>
                 <MobileWrapper>
-                    <ToggleMenuDrawer
-                        ref={toggle_menu_drawer_ref}
-                        should_allow_authentication={should_allow_authentication}
-                        account_status={account_status}
-                        enableApp={enableApp}
-                        disableApp={disableApp}
-                        location={location}
-                        logoutClient={logoutClient}
-                        is_dark_mode={is_dark_mode}
-                        is_logged_in={is_logged_in}
-                        is_p2p_enabled={is_p2p_enabled}
-                        is_payment_agent_transfer_visible={is_payment_agent_transfer_visible}
-                        is_onramp_tab_visible={is_onramp_tab_visible}
-                        is_payment_agent_visible={is_payment_agent_visible}
-                        is_account_transfer_visible={is_account_transfer_visible}
-                        is_virtual={is_virtual}
-                        toggleTheme={setDarkMode}
-                        platform_header={getPlatformInformation(app_routing_history).header}
-                        platform_switcher={
-                            <PlatformSwitcher
-                                app_routing_history={app_routing_history}
-                                is_mobile
-                                platform_config={filterPlatformsForClients(platform_config)}
-                                toggleDrawer={toggle_menu_drawer_ref.current?.toggleDrawer}
-                            />
-                        }
-                    />
+                    <ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
                     {header_extension && is_logged_in && <div>{header_extension}</div>}
                 </MobileWrapper>
                 <DesktopWrapper>
@@ -204,55 +163,32 @@ const DashboardPlatformHeader = ({
 };
 
 DashboardPlatformHeader.propTypes = {
-    account_status: PropTypes.object,
     app_routing_history: PropTypes.array,
     balance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     currency: PropTypes.string,
     disableApp: PropTypes.func,
     enableApp: PropTypes.func,
     header_extension: PropTypes.any,
-    is_dark_mode: PropTypes.bool,
     is_logged_in: PropTypes.bool,
     is_mt5_allowed: PropTypes.bool,
     is_notifications_visible: PropTypes.bool,
-    is_onramp_tab_visible: PropTypes.bool,
-    is_p2p_enabled: PropTypes.bool,
-    is_payment_agent_transfer_visible: PropTypes.bool,
-    is_payment_agent_visible: PropTypes.bool,
-    is_account_transfer_visible: PropTypes.bool,
-    is_virtual: PropTypes.bool,
-    logoutClient: PropTypes.func,
     notifications_count: PropTypes.number,
-    setDarkMode: PropTypes.func,
-    should_allow_authentication: PropTypes.bool,
     toggleNotifications: PropTypes.func,
     toggleSettingsModal: PropTypes.func,
-    location: PropTypes.object,
     settings_extension: PropTypes.array,
     is_settings_modal_on: PropTypes.bool,
 };
 
-export default connect(({ client, common, modules, notifications, ui }) => ({
-    account_status: client.account_status,
+export default connect(({ client, common, notifications, ui }) => ({
     app_routing_history: common.app_routing_history,
     balance: client.balance,
     currency: client.currency,
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
     header_extension: ui.header_extension,
-    is_dark_mode: ui.is_dark_mode_on,
     is_logged_in: client.is_logged_in,
     is_mt5_allowed: client.is_mt5_allowed,
     is_notifications_visible: notifications.is_notifications_visible,
-    is_onramp_tab_visible: modules.cashier.onramp.is_onramp_tab_visible,
-    is_p2p_enabled: modules.cashier.general_store.is_p2p_enabled,
-    is_payment_agent_transfer_visible: modules.cashier.payment_agent_transfer.is_payment_agent_transfer_visible,
-    is_payment_agent_visible: modules.cashier.payment_agent.is_payment_agent_visible,
-    is_account_transfer_visible: modules.cashier.account_transfer.is_account_transfer_visible,
-    is_virtual: client.is_virtual,
-    logoutClient: client.logout,
     notifications_count: notifications.notifications.length,
-    setDarkMode: ui.setDarkMode,
-    should_allow_authentication: client.should_allow_authentication,
     toggleNotifications: notifications.toggleNotificationsModal,
 }))(withRouter(DashboardPlatformHeader));

packages/core/src/App/Containers/Layout/header/default-header.jsx

@@ -1,7 +1,6 @@
 import { AccountActions, MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
 import { DesktopWrapper, Icon, MobileWrapper, Text } from '@deriv/components';
-import { PlatformContext, getDecimalPlaces, getPlatformInformation, isMobile, platforms, routes } from '@deriv/shared';
-
+import { PlatformContext, getDecimalPlaces, isMobile, platforms, routes } from '@deriv/shared';
 import { AccountsInfoLoader } from 'App/Components/Layout/Header/Components/Preloader';
 import { BinaryLink } from 'App/Components/Routes';
 import { Localize } from '@deriv/translations';
@@ -18,7 +17,6 @@ import { withRouter } from 'react-router-dom';
 
 const DefaultHeader = ({
     acc_switcher_disabled_message,
-    account_status,
     account_type,
     addNotificationMessage,
     app_routing_history,
@@ -34,39 +32,25 @@ const DefaultHeader = ({
     is_acc_switcher_on,
     is_app_disabled,
     is_bot_allowed,
-    is_dark_mode,
     is_dxtrade_allowed,
     is_eu,
     is_logged_in,
     is_logging_in,
     is_mt5_allowed,
     is_notifications_visible,
-    is_onramp_tab_visible,
-    is_p2p_enabled,
-    is_payment_agent_transfer_visible,
-    is_payment_agent_visible,
-    is_account_transfer_visible,
     is_route_modal_on,
     is_virtual,
-    is_risky_client,
-    location,
-    logoutClient,
     menu_items,
     notifications_count,
     openRealAccountSignup,
     platform,
     replaceCashierMenuOnclick,
     removeNotificationMessage,
-    setDarkMode,
-    should_allow_authentication,
     toggleAccountsDialog,
     toggleNotifications,
-    changeCurrentLanguage,
     is_trading_assessment_for_existing_user_enabled,
-    active_account_landing_company,
     is_landing_company_loaded,
 }) => {
-    const toggle_menu_drawer_ref = React.useRef(null);
     const addUpdateNotification = () => addNotificationMessage(client_notifications.new_version_available);
     const removeUpdateNotification = React.useCallback(
         () => removeNotificationMessage({ key: 'new_version_available' }),
@@ -173,39 +157,7 @@ const DefaultHeader = ({
                         />
                     </DesktopWrapper>
                     <MobileWrapper>
-                        <ToggleMenuDrawer
-                            changeCurrentLanguage={changeCurrentLanguage}
-                            ref={toggle_menu_drawer_ref}
-                            should_allow_authentication={should_allow_authentication}
-                            account_status={account_status}
-                            enableApp={enableApp}
-                            disableApp={disableApp}
-                            location={location}
-                            logoutClient={logoutClient}
-                            is_dark_mode={is_dark_mode}
-                            is_logged_in={is_logged_in}
-                            is_p2p_enabled={is_p2p_enabled}
-                            is_payment_agent_transfer_visible={is_payment_agent_transfer_visible}
-                            is_onramp_tab_visible={is_onramp_tab_visible}
-                            is_payment_agent_visible={is_payment_agent_visible}
-                            is_account_transfer_visible={is_account_transfer_visible}
-                            is_virtual={is_virtual}
-                            is_risky_client={is_risky_client}
-                            toggleTheme={setDarkMode}
-                            platform_header={getPlatformInformation(app_routing_history).header}
-                            active_account_landing_company={active_account_landing_company}
-                            platform_switcher={
-                                <PlatformSwitcher
-                                    app_routing_history={app_routing_history}
-                                    is_mobile
-                                    is_landing_company_loaded={is_landing_company_loaded}
-                                    is_logged_in={is_logged_in}
-                                    is_logging_in={is_logging_in}
-                                    platform_config={filterPlatformsForClients(platform_config)}
-                                    toggleDrawer={toggle_menu_drawer_ref.current?.toggleDrawer}
-                                />
-                            }
-                        />
+                        <ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
                         {header_extension && is_logged_in && (
                             <div className='header__menu-left-extensions'>{header_extension}</div>
                         )}
@@ -277,8 +229,6 @@ const DefaultHeader = ({
 DefaultHeader.propTypes = {
     acc_switcher_disabled_message: PropTypes.string,
     account_type: PropTypes.string,
-    should_allow_authentication: PropTypes.bool,
-    account_status: PropTypes.object,
     addNotificationMessage: PropTypes.func,
     app_routing_history: PropTypes.array,
     balance: PropTypes.string,
@@ -291,44 +241,30 @@ DefaultHeader.propTypes = {
     is_acc_switcher_on: PropTypes.bool,
     is_app_disabled: PropTypes.bool,
     is_bot_allowed: PropTypes.bool,
-    is_dark_mode: PropTypes.bool,
     is_eu: PropTypes.bool,
     is_logged_in: PropTypes.bool,
     is_logging_in: PropTypes.bool,
     is_mt5_allowed: PropTypes.bool,
     is_dxtrade_allowed: PropTypes.bool,
     is_notifications_visible: PropTypes.bool,
-    is_account_transfer_visible: PropTypes.bool,
     is_route_modal_on: PropTypes.bool,
     is_virtual: PropTypes.bool,
     is_trading_assessment_for_existing_user_enabled: PropTypes.bool,
-    is_risky_client: PropTypes.bool,
-    logoutClient: PropTypes.func,
     notifications_count: PropTypes.number,
     openRealAccountSignup: PropTypes.func,
     platform: PropTypes.string,
     removeNotificationMessage: PropTypes.func,
     replaceCashierMenuOnclick: PropTypes.func,
-    setDarkMode: PropTypes.func,
     toggleAccountsDialog: PropTypes.func,
     toggleNotifications: PropTypes.func,
     country_standpoint: PropTypes.object,
     history: PropTypes.object,
-    is_onramp_tab_visible: PropTypes.bool,
-    is_p2p_enabled: PropTypes.bool,
-    is_payment_agent_transfer_visible: PropTypes.bool,
-    is_payment_agent_visible: PropTypes.bool,
-    location: PropTypes.object,
     menu_items: PropTypes.array,
-    changeCurrentLanguage: PropTypes.func,
 };
 
 export default connect(({ client, common, ui, menu, modules, notifications }) => ({
-    changeCurrentLanguage: common.changeCurrentLanguage,
     acc_switcher_disabled_message: ui.account_switcher_disabled_message,
-    account_status: client.account_status,
     account_type: client.account_type,
-    should_allow_authentication: client.should_allow_authentication,
     addNotificationMessage: notifications.addNotificationMessage,
     app_routing_history: common.app_routing_history,
     balance: client.balance,
@@ -342,32 +278,22 @@ export default connect(({ client, common, ui, menu, modules, notifications }) =>
     is_acc_switcher_on: !!ui.is_accounts_switcher_on,
     is_app_disabled: ui.is_app_disabled,
     is_bot_allowed: client.is_bot_allowed,
-    is_dark_mode: ui.is_dark_mode_on,
     is_eu: client.is_eu,
     is_logged_in: client.is_logged_in,
     is_logging_in: client.is_logging_in,
     is_mt5_allowed: client.is_mt5_allowed,
     is_dxtrade_allowed: client.is_dxtrade_allowed,
     is_notifications_visible: notifications.is_notifications_visible,
-    is_p2p_enabled: modules.cashier.general_store.is_p2p_enabled,
-    is_payment_agent_transfer_visible: modules.cashier.payment_agent_transfer.is_payment_agent_transfer_visible,
-    is_onramp_tab_visible: modules.cashier.onramp.is_onramp_tab_visible,
-    is_payment_agent_visible: modules.cashier.payment_agent.is_payment_agent_visible,
-    is_account_transfer_visible: modules.cashier.account_transfer.is_account_transfer_visible,
     is_route_modal_on: ui.is_route_modal_on,
     is_virtual: client.is_virtual,
-    is_risky_client: client.is_risky_client,
-    logoutClient: client.logout,
     menu_items: menu.extensions,
     notifications_count: notifications.notifications.length,
     openRealAccountSignup: ui.openRealAccountSignup,
     replaceCashierMenuOnclick: modules.cashier.general_store.replaceCashierMenuOnclick,
     platform: common.platform,
     removeNotificationMessage: notifications.removeNotificationMessage,
-    setDarkMode: ui.setDarkMode,
     toggleAccountsDialog: ui.toggleAccountsDialog,
     toggleNotifications: notifications.toggleNotificationsModal,
     is_trading_assessment_for_existing_user_enabled: ui.is_trading_assessment_for_existing_user_enabled,
-    active_account_landing_company: client.landing_company_shortcode,
     is_landing_company_loaded: client.is_landing_company_loaded,
 }))(withRouter(DefaultHeader));