From 6cc8d292eb00c1b11e88863b0bd9043cdc0ba1d9 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 13 Jun 2023 01:28:31 +0800 Subject: [PATCH 1/5] fix: previous-active-route --- .../src/components/dashboard/dashboard.tsx | 14 ++++++++++++++ packages/core/src/Stores/ui-store.js | 8 ++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index 88491d3d57ac..a9459ffafacc 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; 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'; @@ -88,6 +89,19 @@ const Dashboard = ({ 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; + const active_hash_tab = url_hashed_values?.split('#')[1] || active_tab; + + React.useEffect(() => { + if (init_render.current) { + setActiveTab(Number(active_hash_tab)); + init_render.current = false; + } else { + window.location.hash = active_tab; + } + }, [active_tab]); const setTourStatus = (status: { [key: string]: string }) => { if (status) { diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js index fbb0e5385e22..34ab6547fb2f 100644 --- a/packages/core/src/Stores/ui-store.js +++ b/packages/core/src/Stores/ui-store.js @@ -6,6 +6,7 @@ import BaseStore from './base-store'; 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 @@ export default class UIStore extends BaseStore { 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 @@ export default class UIStore extends BaseStore { 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 @@ export default class UIStore extends BaseStore { 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; } From 334f0f68c0ab0bda2ecf5c1e42e6effd110ebd82 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 13 Jun 2023 01:40:15 +0800 Subject: [PATCH 2/5] fix: for mobile view --- packages/bot-web-ui/src/components/dashboard/dashboard.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index a9459ffafacc..8692d6aafc1e 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -97,6 +97,9 @@ const Dashboard = ({ React.useEffect(() => { if (init_render.current) { setActiveTab(Number(active_hash_tab)); + if (is_mobile) { + handleTabChange(Number(active_hash_tab)); + } init_render.current = false; } else { window.location.hash = active_tab; From 8e32282425718d619377d0947495bff3c7814717 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 13 Jun 2023 10:20:47 +0800 Subject: [PATCH 3/5] fix: added NaN check --- .../src/components/dashboard/dashboard.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index 8692d6aafc1e..019bb39f2975 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -92,7 +92,17 @@ const Dashboard = ({ const init_render = React.useRef(true); const { ui } = useStore(); const { url_hashed_values } = ui; - const active_hash_tab = url_hashed_values?.split('#')[1] || active_tab; + + let tab_value = active_tab; + const GetHashedValue = (tab: number) => { + tab_value = Number(url_hashed_values?.split('#')[1]); + 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) { From 5b06104ad9959aa0dbc717bba81b399f232cf128 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 13 Jun 2023 10:25:45 +0800 Subject: [PATCH 4/5] fix: refactored code --- .../bot-web-ui/src/components/dashboard/dashboard.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index 019bb39f2975..9fe2c66f4822 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -97,9 +97,7 @@ const Dashboard = ({ const GetHashedValue = (tab: number) => { tab_value = Number(url_hashed_values?.split('#')[1]); if (isNaN(tab_value) || isNaN(tab)) return active_tab; - if (tab_value > 4 || tab > 4) { - return active_tab; - } + if (tab_value > 4 || tab > 4) return active_tab; return tab_value; }; const active_hash_tab = GetHashedValue(active_tab); @@ -107,9 +105,7 @@ const Dashboard = ({ React.useEffect(() => { if (init_render.current) { setActiveTab(Number(active_hash_tab)); - if (is_mobile) { - handleTabChange(Number(active_hash_tab)); - } + if (is_mobile) handleTabChange(Number(active_hash_tab)); init_render.current = false; } else { window.location.hash = active_tab; From 934db659e5ad7c9cb5fb9b112dd9f187c922d945 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Wed, 14 Jun 2023 12:07:12 +0800 Subject: [PATCH 5/5] fix: removed numbers and addded tab names --- .../src/components/dashboard/dashboard.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index 9fe2c66f4822..4173b0a8efc3 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -82,7 +82,7 @@ const Dashboard = ({ 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 = ''; @@ -95,7 +95,11 @@ const Dashboard = ({ let tab_value = active_tab; const GetHashedValue = (tab: number) => { - tab_value = Number(url_hashed_values?.split('#')[1]); + 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; @@ -108,7 +112,12 @@ const Dashboard = ({ if (is_mobile) handleTabChange(Number(active_hash_tab)); init_render.current = false; } else { - window.location.hash = active_tab; + 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]); @@ -233,7 +242,8 @@ const Dashboard = ({ 'dashboard__container--active': has_tour_started && active_tab === DASHBOARD && is_mobile, })} > - + {(active_tab === DASHBOARD || active_tab === BOT_BUILDER) && } + {has_tour_started && active_tab === DASHBOARD && (is_mobile ? (