Shafin/bot 185/refactor remove connect journal load modal local

packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss

@@ -15,7 +15,6 @@
 
     .toolbar__section {
         justify-content: end;
-
         @include mobile {
             column-gap: 1rem;
         }
@@ -196,7 +195,6 @@
 
         &--tour-active {
             width: 78%;
-
             @include mobile {
                 width: 100%;
             }

packages/bot-web-ui/src/components/journal/journal.tsx

@@ -1,24 +1,28 @@
 import { DataList, Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
+import { observer } from '@deriv/stores';
 import classnames from 'classnames';
 import { contract_stages } from 'Constants/contract-stage';
+import { useDBotStore } from 'Stores/useDBotStore';
 import React from 'react';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/index';
 import { JournalItem, JournalLoader, JournalTools } from './journal-components';
-import { TCheckedFilters, TFilterMessageValues, TJournalDataListArgs, TJournalProps } from './journal.types';
-import { isMobile } from '@deriv/shared';
+import { TCheckedFilters, TFilterMessageValues, TJournalDataListArgs } from './journal.types';
 
-const Journal = ({
-    contract_stage,
-    filtered_messages,
-    is_stop_button_visible,
-    unfiltered_messages,
-    ...props
-}: TJournalProps) => {
+const Journal = observer(() => {
+    const { journal, run_panel } = useDBotStore();
+    const {
+        checked_filters,
+        filterMessage,
+        filters,
+        filtered_messages,
+        is_filter_dialog_visible,
+        toggleFilterDialog,
+        unfiltered_messages,
+    } = journal;
+    const { is_stop_button_visible, contract_stage } = run_panel;
     const filtered_messages_length = Array.isArray(filtered_messages) && filtered_messages.length;
     const unfiltered_messages_length = Array.isArray(unfiltered_messages) && unfiltered_messages.length;
-    const { checked_filters } = props;
     const is_mobile = isMobile();
 
     return (
@@ -27,7 +31,13 @@ const Journal = ({
                 'run-panel-tab__content': !is_mobile,
             })}
         >
-            <JournalTools {...props} />
+            <JournalTools
+                checked_filters={checked_filters}
+                filters={filters}
+                filterMessage={filterMessage}
+                is_filter_dialog_visible={is_filter_dialog_visible}
+                toggleFilterDialog={toggleFilterDialog}
+            />
             <div className='journal__item-list'>
                 {filtered_messages_length ? (
                     <DataList
@@ -86,16 +96,6 @@ const Journal = ({
             </div>
         </div>
     );
-};
+});
 
-export default connect(({ journal, run_panel }: RootStore) => ({
-    checked_filters: journal.checked_filters,
-    filterMessage: journal.filterMessage,
-    filters: journal.filters,
-    filtered_messages: journal.filtered_messages,
-    is_filter_dialog_visible: journal.is_filter_dialog_visible,
-    toggleFilterDialog: journal.toggleFilterDialog,
-    unfiltered_messages: journal.unfiltered_messages,
-    is_stop_button_visible: run_panel.is_stop_button_visible,
-    contract_stage: run_panel.contract_stage,
-}))(Journal);
+export default Journal;

packages/bot-web-ui/src/components/load-modal/load-modal.tsx

@@ -1,39 +1,29 @@
 import { MobileFullPageModal, Modal, Tabs } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { observer } from '@deriv/stores';
 import { tabs_title } from 'Constants/load-modal';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/root-store';
+import { useDBotStore } from 'Stores/useDBotStore';
 import React from 'react';
 import GoogleDrive from '../dashboard/dashboard-component/load-bot-preview/google-drive';
 import Local from './local';
 import LocalFooter from './local-footer';
 import Recent from './recent';
 import RecentFooter from './recent-footer';
 
-type TLoadModalProps = {
-    active_index: number;
-    is_load_modal_open: boolean;
-    loaded_local_file: string;
-    onEntered: () => void;
-    recent_strategies: any[];
-    setActiveTabIndex: () => void;
-    setPreviewOnPopup: (show: boolean) => void;
-    tab_name: string;
-    toggleLoadModal: () => void;
-};
-
-const LoadModal = ({
-    active_index,
-    is_load_modal_open,
-    loaded_local_file,
-    onEntered,
-    recent_strategies,
-    setActiveTabIndex,
-    setPreviewOnPopup,
-    tab_name,
-    toggleLoadModal,
-}: TLoadModalProps) => {
+const LoadModal = observer(() => {
+    const { load_modal, dashboard } = useDBotStore();
+    const {
+        active_index,
+        is_load_modal_open,
+        loaded_local_file,
+        onEntered,
+        recent_strategies,
+        setActiveTabIndex,
+        toggleLoadModal,
+        tab_name,
+    } = load_modal;
+    const { setPreviewOnPopup } = dashboard;
     const header_text = localize('Load strategy');
 
     if (isMobile()) {
@@ -100,16 +90,6 @@ const LoadModal = ({
             )}
         </Modal>
     );
-};
+});
 
-export default connect(({ load_modal, dashboard }: RootStore) => ({
-    active_index: load_modal.active_index,
-    is_load_modal_open: load_modal.is_load_modal_open,
-    loaded_local_file: load_modal.loaded_local_file,
-    onEntered: load_modal.onEntered,
-    recent_strategies: load_modal.recent_strategies,
-    setActiveTabIndex: load_modal.setActiveTabIndex,
-    tab_name: load_modal.tab_name,
-    toggleLoadModal: load_modal.toggleLoadModal,
-    setPreviewOnPopup: dashboard.setPreviewOnPopup,
-}))(LoadModal);
+export default LoadModal;

packages/bot-web-ui/src/components/load-modal/local-footer.tsx

@@ -1,27 +1,14 @@
 import { Button } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
+import { observer } from '@deriv/stores';
 import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/root-store';
+import { useDBotStore } from 'Stores/useDBotStore';
 import React from 'react';
 
-type TLocalFooterProps = {
-    is_open_button_loading: boolean;
-    loadFileFromLocal: () => void;
-    setLoadedLocalFile: (loaded_local_file: boolean | null) => void;
-    setOpenSettings: (toast_message: string, show_toast?: boolean) => void;
-    setPreviewOnPopup: (show: boolean) => void;
-    toggleLoadModal: () => void;
-};
-
-const LocalFooter = ({
-    is_open_button_loading,
-    loadFileFromLocal,
-    setLoadedLocalFile,
-    setOpenSettings,
-    setPreviewOnPopup,
-    toggleLoadModal,
-}: TLocalFooterProps) => {
+const LocalFooter = observer(() => {
+    const { load_modal, dashboard } = useDBotStore();
+    const { is_open_button_loading, loadFileFromLocal, setLoadedLocalFile, toggleLoadModal } = load_modal;
+    const { setOpenSettings, setPreviewOnPopup } = dashboard;
     const is_mobile = isMobile();
     const Wrapper = is_mobile ? Button.Group : React.Fragment;
 
@@ -45,13 +32,6 @@ const LocalFooter = ({
             />
         </Wrapper>
     );
-};
+});
 
-export default connect(({ load_modal, dashboard }: RootStore) => ({
-    is_open_button_loading: load_modal.is_open_button_loading,
-    loadFileFromLocal: load_modal.loadFileFromLocal,
-    setLoadedLocalFile: load_modal.setLoadedLocalFile,
-    setOpenSettings: dashboard.setOpenSettings,
-    setPreviewOnPopup: dashboard.setPreviewOnPopup,
-    toggleLoadModal: load_modal.toggleLoadModal,
-}))(LocalFooter);
+export default LocalFooter;

packages/bot-web-ui/src/components/load-modal/local.tsx

@@ -1,32 +1,18 @@
 import { Button, Icon } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/root-store';
+import { observer } from '@deriv/stores';
+import { useDBotStore } from 'Stores/useDBotStore';
 import React from 'react';
 import LocalFooter from './local-footer';
 import WorkspaceControl from './workspace-control';
 import classNames from 'classnames';
 
-type TLocalComponentProps = {
-    active_tab: number;
-    has_started_bot_builder_tour: boolean;
-    handleFileChange: (
-        e: React.MouseEvent | React.FormEvent<HTMLFormElement> | DragEvent,
-        is_body?: boolean
-    ) => boolean;
-    is_open_button_loading: boolean;
-    loaded_local_file: string;
-    setLoadedLocalFile: (loaded_local_file: boolean | null) => void;
-};
+const LocalComponent = observer(() => {
+    const { dashboard, load_modal } = useDBotStore();
+    const { active_tab, has_started_bot_builder_tour } = dashboard;
+    const { handleFileChange, loaded_local_file, setLoadedLocalFile } = load_modal;
 
-const LocalComponent = ({
-    active_tab,
-    has_started_bot_builder_tour,
-    handleFileChange,
-    loaded_local_file,
-    setLoadedLocalFile,
-}: TLocalComponentProps) => {
     const file_input_ref = React.useRef(null);
     const [is_file_supported, setIsFileSupported] = React.useState(true);
     const is_mobile = isMobile();
@@ -104,15 +90,6 @@ const LocalComponent = ({
             </div>
         </div>
     );
-};
+});
 
-const Local = connect(({ load_modal, dashboard }: RootStore) => ({
-    active_tab: dashboard.active_tab,
-    has_started_bot_builder_tour: dashboard.has_started_bot_builder_tour,
-    handleFileChange: load_modal.handleFileChange,
-    is_open_button_loading: load_modal.is_open_button_loading,
-    loaded_local_file: load_modal.loaded_local_file,
-    setLoadedLocalFile: load_modal.setLoadedLocalFile,
-}))(LocalComponent);
-
-export default Local;
+export default LocalComponent;

packages/core/src/Stores/client-store.js

@@ -988,7 +988,7 @@ export default class ClientStore extends BaseStore {
         }
     };
 
-     getIsMarketTypeMatching = (account, market_type) => {
+    getIsMarketTypeMatching = (account, market_type) => {
         if (market_type === 'synthetic') {
             return account.market_type === market_type || account.market_type === 'gaming';
         } else if (market_type === 'all') {