From 65b83f22722889a8acfd2c2753e6da3790558100 Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Mon, 26 Jun 2023 10:20:33 +0100 Subject: [PATCH] Merge pull request #13488 from overleaf/ds-user-tabs-page Admin panel - Users Tabs page react migration GitOrigin-RevId: c0de37bf6bc6b54b41b2865039247b8bf65720d0 --- .../shared/hooks/use-bookmarkable-tabset.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 services/web/frontend/js/shared/hooks/use-bookmarkable-tabset.js diff --git a/services/web/frontend/js/shared/hooks/use-bookmarkable-tabset.js b/services/web/frontend/js/shared/hooks/use-bookmarkable-tabset.js new file mode 100644 index 0000000000..b483a4aec2 --- /dev/null +++ b/services/web/frontend/js/shared/hooks/use-bookmarkable-tabset.js @@ -0,0 +1,33 @@ +import { useEffect, useState } from 'react' +import { useLocation } from './use-location' + +function useBookmarkableTabSet(defaultState) { + const location = useLocation() + + const [activeTabState, setActiveTabState] = useState(() => { + const url = new URL(window.location.href) + return url.hash.slice(1) || defaultState + }) + + function setActiveTab(eventKey) { + setActiveTabState(eventKey) + location.assign(`#${eventKey}`) + } + + useEffect(() => { + const handlePopstate = () => { + const newUrl = new URL(window.location.href) + setActiveTabState(newUrl.hash.slice(1) || defaultState) + } + + window.addEventListener('popstate', handlePopstate) + + return () => { + window.removeEventListener('popstate', handlePopstate) + } + }) + + return [activeTabState, setActiveTab] +} + +export default useBookmarkableTabSet