Merge pull request #13488 from overleaf/ds-user-tabs-page

Admin panel - Users Tabs page react migration

GitOrigin-RevId: c0de37bf6bc6b54b41b2865039247b8bf65720d0

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