diff --git a/src/utils/TabNavigation.ts b/src/utils/TabNavigation.ts index 42657938cc9343e9c9e3057c77dd2ab5133e5e90..2445b1d094dd7358b56739b8caf141cb1396a82c 100644 --- a/src/utils/TabNavigation.ts +++ b/src/utils/TabNavigation.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { openFromOtherPage } from './openFromOtherpAge'; import { handleScroll } from './handleScroll'; import { openNestedTab } from './openNestedTab'; @@ -9,14 +9,25 @@ import { openTabInCollapsible } from './opentabincollapsible'; // Custom Hook for central tab navigation export const useTabNavigation = () => { const location = useLocation(); + const navigate = useNavigate(); const [activeTab, setActiveTab] = useState<string | null>(null); const [activeSubTab, setActiveSubTab] = useState<string | null>(null); const [, setActiveCollapsible] = useState<string | null>(null); // tab change and url update - + const handleTabChange = (tabId: string, subTabId?: string) => { + setActiveTab(tabId); + setActiveSubTab(subTabId || null); + + // updatung the url + let newUrl = `${location.pathname}?tab=${tabId}`; + if (subTabId) { + newUrl += `&subTab=${subTabId}`; + } + navigate(newUrl, { replace: true }); + } useEffect(() => { console.log("Use Effect") const params = new URLSearchParams(location.search); @@ -26,7 +37,11 @@ export const useTabNavigation = () => { const scrollToId = params.get('scrollTo'); const changeTo = params.get('changeTo'); const colTab = params.get('colTab'); + // const navigate = useNavigate(); + + + // scrolls to a specific collapsible element if (collapseId) { setActiveCollapsible(collapseId); @@ -77,11 +92,13 @@ export const useTabNavigation = () => { } } + + setActiveTab(tabId); setActiveSubTab(subTabId || null); }, [location.search]); - return { activeTab, activeSubTab }; + return { activeTab, activeSubTab, handleTabChange}; };