Jim/93585/replace connect with usestore in market countdown timer mar…

…ket unavailable trade modals unsupported contract modal (#79) * refactor: remove connect from market-countdown-timer * refactor: remove connect from market-unavailable * refactor: remove connect from trade-modals * refactor: move is_visible prop to market-unavailable * refactor: remove connect from unsupported-contract-modal
jim-deriv · Apr 18, 2023 · b5e4a14 · b5e4a14
1 parent aad42d6
commit b5e4a14
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 111 deletions.
diff --git a/...s/trader/src/App/Components/Elements/Modals/MarketUnavailableModal/market-unavailable.jsx b/...s/trader/src/App/Components/Elements/Modals/MarketUnavailableModal/market-unavailable.jsx
@@ -3,47 +3,43 @@ import React from 'react';
 import { Dialog } from '@deriv/components';
 import { getPlatformSettings } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
+import { observer, useStore } from '@deriv/stores';
 
-const MarketUnavailableModal = ({ disableApp, enableApp, is_loading, is_visible, onCancel, onConfirm }) => (
-    <Dialog
-        className='market-unavailable-modal'
-        title={localize('We’re working on it')}
-        confirm_button_text={localize('Stay on {{platform_name_trader}}', {
-            platform_name_trader: getPlatformSettings('trader').name,
-        })}
-        cancel_button_text={localize('Go to {{platform_name_smarttrader}}', {
-            platform_name_smarttrader: getPlatformSettings('smarttrader').name,
-        })}
-        onConfirm={onConfirm}
-        onCancel={onCancel}
-        is_mobile_full_width={false}
-        is_visible={is_visible}
-        disableApp={disableApp}
-        enableApp={enableApp}
-        is_loading={is_loading}
-    >
-        <Localize
-            i18n_default_text='This market is not yet available on {{platform_name_trader}}, but it is on {{platform_name_smarttrader}}.'
-            values={{
+const MarketUnavailableModal = observer(({ onCancel, onConfirm }) => {
+    const { ui } = useStore();
+    const { disableApp, enableApp, is_loading, has_only_forward_starting_contracts: is_visible } = ui;
+    return (
+        <Dialog
+            className='market-unavailable-modal'
+            title={localize('We’re working on it')}
+            confirm_button_text={localize('Stay on {{platform_name_trader}}', {
                 platform_name_trader: getPlatformSettings('trader').name,
+            })}
+            cancel_button_text={localize('Go to {{platform_name_smarttrader}}', {
                 platform_name_smarttrader: getPlatformSettings('smarttrader').name,
-            }}
-        />
-    </Dialog>
-);
+            })}
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+            is_mobile_full_width={false}
+            is_visible={is_visible}
+            disableApp={disableApp}
+            enableApp={enableApp}
+            is_loading={is_loading}
+        >
+            <Localize
+                i18n_default_text='This market is not yet available on {{platform_name_trader}}, but it is on {{platform_name_smarttrader}}.'
+                values={{
+                    platform_name_trader: getPlatformSettings('trader').name,
+                    platform_name_smarttrader: getPlatformSettings('smarttrader').name,
+                }}
+            />
+        </Dialog>
+    );
+});
 
 MarketUnavailableModal.propTypes = {
-    disableApp: PropTypes.func,
-    enableApp: PropTypes.func,
-    is_loading: PropTypes.bool,
-    is_visible: PropTypes.bool,
     onCancel: PropTypes.func,
     onConfirm: PropTypes.func,
 };
 
-export default connect(({ ui }) => ({
-    disableApp: ui.disableApp,
-    enableApp: ui.enableApp,
-    is_loading: ui.is_loading,
-}))(MarketUnavailableModal);
+export default MarketUnavailableModal;
diff --git a/...rc/App/Components/Elements/Modals/UnsupportedContractModal/unsupported-contract-modal.jsx b/...rc/App/Components/Elements/Modals/UnsupportedContractModal/unsupported-contract-modal.jsx
@@ -2,37 +2,33 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
 import { website_name } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
 
-const UnsupportedContractModal = ({ disableApp, enableApp, is_loading, is_visible, onConfirm, onClose }) => (
-    <Dialog
-        title={localize('We’re working on it')}
-        confirm_button_text={localize('Stay on {{website_domain}}', { website_domain: website_name })}
-        cancel_button_text={localize('Go to Binary.com')}
-        onConfirm={onConfirm}
-        onCancel={onClose}
-        disableApp={disableApp}
-        enableApp={enableApp}
-        is_loading={is_loading}
-        is_closed_on_cancel
-        is_visible={is_visible}
-    >
-        <Localize i18n_default_text='You’ve selected a trade type that is currently unsupported, but we’re working on it.' />
-    </Dialog>
-);
+const UnsupportedContractModal = observer(({ onConfirm, onClose }) => {
+    const { ui } = useStore();
+    const { disableApp, enableApp, is_loading, is_unsupported_contract_modal_visible: is_visible } = ui;
+    return (
+        <Dialog
+            title={localize('We’re working on it')}
+            confirm_button_text={localize('Stay on {{website_domain}}', { website_domain: website_name })}
+            cancel_button_text={localize('Go to Binary.com')}
+            onConfirm={onConfirm}
+            onCancel={onClose}
+            disableApp={disableApp}
+            enableApp={enableApp}
+            is_loading={is_loading}
+            is_closed_on_cancel
+            is_visible={is_visible}
+        >
+            <Localize i18n_default_text='You’ve selected a trade type that is currently unsupported, but we’re working on it.' />
+        </Dialog>
+    );
+});
 
 UnsupportedContractModal.propTypes = {
-    disableApp: PropTypes.func,
-    enableApp: PropTypes.func,
-    is_loading: PropTypes.bool,
-    is_visible: PropTypes.bool,
     onClose: PropTypes.func,
     onConfirm: PropTypes.func,
 };
 
-export default connect(({ ui }) => ({
-    disableApp: ui.disableApp,
-    enableApp: ui.enableApp,
-    is_loading: ui.is_loading,
-}))(UnsupportedContractModal);
+export default UnsupportedContractModal;
diff --git a/packages/trader/src/App/Components/Elements/market-countdown-timer.jsx b/packages/trader/src/App/Components/Elements/market-countdown-timer.jsx
@@ -5,7 +5,8 @@ import moment from 'moment';
 import { Text } from '@deriv/components';
 import { useIsMounted, WS, convertTimeFormat, isMarketClosed } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
+import { observer } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
 
 // check market in coming 7 days
 const days_to_check_before_exit = 7;
@@ -43,7 +44,8 @@ const calculateTimeLeft = remaining_time_to_open => {
         : {};
 };
 
-const MarketCountdownTimer = ({ active_symbols, is_main_page, setIsTimerLoading, onMarketOpen, symbol }) => {
+const MarketCountdownTimer = observer(({ is_main_page, setIsTimerLoading, onMarketOpen, symbol }) => {
+    const { active_symbols } = useTraderStore();
     const isMounted = useIsMounted();
     const [when_market_opens, setWhenMarketOpens] = React.useState({});
     const [time_left, setTimeLeft] = React.useState(calculateTimeLeft(when_market_opens?.remaining_time_to_open));
@@ -195,16 +197,13 @@ const MarketCountdownTimer = ({ active_symbols, is_main_page, setIsTimerLoading,
             <div className='market-is-closed-overlay__separator' />
         </React.Fragment>
     );
-};
+});
 
 MarketCountdownTimer.propTypes = {
-    active_symbols: PropTypes.array,
     is_main_page: PropTypes.bool,
     setIsTimerLoading: PropTypes.func,
     onMarketOpen: PropTypes.func,
     symbol: PropTypes.string.isRequired,
 };
 
-export default connect(({ modules }) => ({
-    active_symbols: modules.trade.active_symbols,
-}))(MarketCountdownTimer);
+export default MarketCountdownTimer;
diff --git a/packages/trader/src/App/Containers/Modals/trade-modals.jsx b/packages/trader/src/App/Containers/Modals/trade-modals.jsx
@@ -1,25 +1,22 @@
 import React from 'react';
 import { getUrlSmartTrader, urlFor } from '@deriv/shared';
-
-import { connect } from 'Stores/connect';
 import UnsupportedContractModal from 'App/Components/Elements/Modals/UnsupportedContractModal';
 import MarketUnavailableModal from 'App/Components/Elements/Modals/MarketUnavailableModal';
 import ServicesErrorModal from 'App/Components/Elements/Modals/ServicesErrorModal';
+import { observer, useStore } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
 
-const TradeModals = ({
-    clearPurchaseInfo,
-    is_unsupported_contract_modal_visible,
-    is_market_unavailable_visible,
-    is_services_error_visible,
-    is_virtual,
-    is_logged_in,
-    toggleUnsupportedContractModal,
-    setHasOnlyForwardingContracts,
-    resetPreviousSymbol,
-    toggleServicesErrorModal,
-    resetPurchase,
-    services_error,
-}) => {
+const TradeModals = observer(() => {
+    const { ui, client, common } = useStore();
+    const { resetPreviousSymbol, clearPurchaseInfo, requestProposal: resetPurchase } = useTraderStore();
+    const { is_virtual, is_logged_in } = client;
+    const { services_error } = common;
+    const {
+        is_services_error_visible,
+        setHasOnlyForwardingContracts,
+        toggleServicesErrorModal,
+        toggleUnsupportedContractModal,
+    } = ui;
     const resetToPreviousMarket = () => {
         setHasOnlyForwardingContracts(false);
         resetPreviousSymbol();
@@ -54,17 +51,9 @@ const TradeModals = ({
 
     return (
         <React.Fragment>
-            <UnsupportedContractModal
-                onConfirm={unsupportedContractOnConfirm}
-                onClose={unsupportedContractOnClose}
-                is_visible={is_unsupported_contract_modal_visible}
-            />
+            <UnsupportedContractModal onConfirm={unsupportedContractOnConfirm} onClose={unsupportedContractOnClose} />
 
-            <MarketUnavailableModal
-                onConfirm={marketUnavailableOnConfirm}
-                onCancel={marketUnavailableOnCancel}
-                is_visible={is_market_unavailable_visible}
-            />
+            <MarketUnavailableModal onConfirm={marketUnavailableOnConfirm} onCancel={marketUnavailableOnCancel} />
 
             <ServicesErrorModal
                 onConfirm={servicesErrorModalOnConfirm}
@@ -75,21 +64,6 @@ const TradeModals = ({
             />
         </React.Fragment>
     );
-};
+});
 
-export default connect(({ ui, modules, common, client }) => ({
-    is_market_unavailable_visible: ui.has_only_forward_starting_contracts,
-    is_services_error_visible: ui.is_services_error_visible,
-    is_unsupported_contract_modal_visible: ui.is_unsupported_contract_modal_visible,
-    is_virtual: client.is_virtual,
-    is_logged_in: client.is_logged_in,
-    proposal_info: modules.trade.proposal_info,
-    purchase_info: modules.trade.purchase_info,
-    resetPreviousSymbol: modules.trade.resetPreviousSymbol,
-    clearPurchaseInfo: modules.trade.clearPurchaseInfo,
-    resetPurchase: modules.trade.requestProposal,
-    services_error: common.services_error,
-    setHasOnlyForwardingContracts: ui.setHasOnlyForwardingContracts,
-    toggleServicesErrorModal: ui.toggleServicesErrorModal,
-    toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
-}))(TradeModals);
+export default TradeModals;