Rupato/358/rerender-previous-active-tab-on-reload

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

@@ -3,6 +3,7 @@
 import { initTrashCan } from '@deriv/bot-skeleton/src/scratch/hooks/trashcan';
 import { DesktopWrapper, Dialog, MobileWrapper, Tabs } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import Chart from 'Components/chart';
 import { DBOT_TABS, TAB_IDS } from 'Constants/bot-contents';
@@ -81,13 +82,44 @@
     setTourDialogVisibility,
     setHasTourEnded,
 }: TDashboard) => {
-    const { DASHBOARD, BOT_BUILDER, CHART } = DBOT_TABS;
+    const { DASHBOARD, BOT_BUILDER, CHART, TUTORIAL } = DBOT_TABS;
     const is_tour_complete = React.useRef(true);
     let bot_tour_token: string | number = '';
     let onboard_tour_token: string | number = '';
     let storage = '';
     let tour_status: { [key: string]: string };
     const is_mobile = isMobile();
+    const init_render = React.useRef(true);
+    const { ui } = useStore();
+    const { url_hashed_values } = ui;
+
+    let tab_value = active_tab;
+    const GetHashedValue = (tab: number) => {
+        tab_value = url_hashed_values?.split('#')[1];
+        if (tab_value === 'dashboard') return DASHBOARD;
+        if (tab_value === 'bot_builder') return BOT_BUILDER;
+        if (tab_value === 'chart') return CHART;
+        if (tab_value === 'tutorial') return TUTORIAL;
+        if (isNaN(tab_value) || isNaN(tab)) return active_tab;
+        if (tab_value > 4 || tab > 4) return active_tab;
+        return tab_value;
+    };
+    const active_hash_tab = GetHashedValue(active_tab);
+
+    React.useEffect(() => {
+        if (init_render.current) {
+            setActiveTab(Number(active_hash_tab));
+            if (is_mobile) handleTabChange(Number(active_hash_tab));
+            init_render.current = false;
+        } else {
+            let active_tab_name = 'dashboard';
+            if (active_tab === 0) active_tab_name = 'dashboard';
+            if (active_tab === 1) active_tab_name = 'bot_builder';
+            if (active_tab === 2) active_tab_name = 'chart';
+            if (active_tab === 3) active_tab_name = 'tutorial';
+            window.location.hash = active_tab_name;
+        }
+    }, [active_tab]);
 
     const setTourStatus = (status: { [key: string]: string }) => {
         if (status) {
@@ -210,7 +242,8 @@
                         'dashboard__container--active': has_tour_started && active_tab === DASHBOARD && is_mobile,
                     })}
                 >
-                    <TourTriggrerDialog />
+                    {(active_tab === DASHBOARD || active_tab === BOT_BUILDER) && <TourTriggrerDialog />}
+
                     {has_tour_started &&
                         active_tab === DASHBOARD &&
                         (is_mobile ? (

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

@@ -6,6 +6,7 @@
 const store_name = 'ui_store';
 
 export default class UIStore extends BaseStore {
+    url_hashed_values = '';
     is_account_settings_visible = false;
     is_positions_drawer_on = false;
     is_reports_visible = false;
@@ -317,6 +318,7 @@
             is_mobile: computed,
             is_tablet: computed,
             is_warning_scam_message_modal_visible: computed,
+            url_hashed_values: observable,
             notifyAppInstall: action.bound,
             onChangeUiStore: action.bound,
             openAccountNeededModal: action.bound,
@@ -341,6 +343,7 @@
             setCurrentFocus: action.bound,
             setDarkMode: action.bound,
             setHasOnlyForwardingContracts: action.bound,
+            setHashedValue: action.bound,
             setIsAcuityModalOpen: action.bound,
             setIsClosingCreateRealAccountModal: action.bound,
             setIsNativepickerVisible: action.bound,
@@ -439,7 +442,12 @@
         this.is_new_account = localStorage.getItem('isNewAccount') || false;
     }
 
+    setHashedValue(url_hashed_values) {
+        this.url_hashed_values = url_hashed_values;
+    }
+
     init(notification_messages) {
+        this.setHashedValue(window.location.hash);
         this.notification_messages_ui = notification_messages;
     }