Preserve Gigs tab in URL hash (#385)

Author: michaelmwu

apps/admin_dashboard/src/main.tsx

@@ -82,6 +82,7 @@ type View =
   | "audit"
   | "configuration"
 type SortDirection = "asc" | "desc"
+type GigTab = "gigs" | "leads"
 
 type User = {
   subject: string
@@ -666,6 +667,19 @@ function detailIdFromPath(expectedView: "gigs" | "projects" = "gigs") {
   }
 }
 
+function gigTabFromHash(hash = window.location.hash): GigTab {
+  return hash.replace(/^#/, "") === "leads" ? "leads" : "gigs"
+}
+
+function updateGigTabHash(tab: GigTab) {
+  const hash = tab === "leads" ? "#leads" : "#gigs"
+  window.history.replaceState(
+    window.history.state,
+    "",
+    `${window.location.pathname}${window.location.search}${hash}`,
+  )
+}
+
 async function requestJson<T>(url: string, options: RequestInit = {}): Promise<T> {
   const method = String(options.method || "GET").toUpperCase()
   const headers = new Headers(options.headers)
@@ -908,7 +922,7 @@ function App() {
   const [gigQuery, setGigQuery] = useState("")
   const [gigIncludeHistorical, setGigIncludeHistorical] = useState(false)
   const [gigLimit, setGigLimit] = useState(100)
-  const [activeGigTab, setActiveGigTab] = useState<"gigs" | "leads">("gigs")
+  const [activeGigTab, setActiveGigTab] = useState<GigTab>(gigTabFromHash)
   const [gigLeadStatus, setGigLeadStatus] = useState("pending")
   const [projectQuery, setProjectQuery] = useState("")
   const [projectStatus, setProjectStatus] = useState(initialProjectDetailId ? "" : "Open")
@@ -975,6 +989,7 @@ function App() {
     if (normalized !== "projects") setSelectedProjectId("")
     if (normalized === "gigs" && push) setSelectedGigId("")
     if (normalized === "projects" && push) setSelectedProjectId("")
+    if (normalized === "gigs") setActiveGigTab(push ? "gigs" : gigTabFromHash())
     setViewState(normalized)
     if (push) {
       window.history.pushState({ view: normalized }, "", routes[normalized])
@@ -984,6 +999,11 @@ function App() {
   }
   navigateRef.current = navigate
 
+  function selectGigTab(tab: GigTab) {
+    setActiveGigTab(tab)
+    updateGigTabHash(tab)
+  }
+
   function crmContactUrl(contactId?: string) {
     if (!crmBaseUrl || !contactId) return ""
     return `${crmBaseUrl}/#Contact/view/${encodeURIComponent(contactId)}`
@@ -1717,7 +1737,7 @@ function App() {
         },
       )
       showToast("Posted lead to Discord", "ok")
-      setActiveGigTab("gigs")
+      selectGigTab("gigs")
       setGigStatus("")
       setGigQuery("")
       await loadGigLeads()
@@ -2344,6 +2364,12 @@ function App() {
     return () => window.removeEventListener("popstate", onPopState)
   }, [])
 
+  useEffect(() => {
+    const onHashChange = () => setActiveGigTab(gigTabFromHash())
+    window.addEventListener("hashchange", onHashChange)
+    return () => window.removeEventListener("hashchange", onHashChange)
+  }, [])
+
   useEffect(() => {
     if (!toast.message) return undefined
     const timeout = window.setTimeout(() => setToast({ message: "" }), 4500)
@@ -2776,7 +2802,7 @@ function App() {
               canIncludeHistorical={can("people:read")}
               crmContactUrl={crmContactUrl}
               crmAttachmentUrl={crmAttachmentUrl}
-              setActiveTab={setActiveGigTab}
+              setActiveTab={selectGigTab}
               setStatus={setGigStatus}
               setQuery={setGigQuery}
               setLeadStatus={setGigLeadStatus}

apps/api/src/five08/backend/static/dashboard/.vite/manifest.json

@@ -1,6 +1,6 @@
 {
   "index.html": {
-    "file": "assets/index-LL0oAOC_.js",
+    "file": "assets/index-_nigGMGP.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,

apps/api/src/five08/backend/static/dashboard/assets/index-LL0oAOC_.js

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>508 Operations Dashboard</title>
-    <script type="module" crossorigin src="/dashboard/assets/index-LL0oAOC_.js"></script>
+    <script type="module" crossorigin src="/dashboard/assets/index-_nigGMGP.js"></script>
     <link rel="stylesheet" crossorigin href="/dashboard/assets/index-2UypYUrJ.css">
   </head>
   <body>

apps/api/src/five08/backend/static/dashboard/assets/index-_nigGMGP.js

@@ -862,7 +862,15 @@ def sync_route(route: Any) -> None:
                 "status=" not in urlparse(url).query for url in gig_list_requests
             )
             page.locator("#gigLeadsTab").click()
+            expect(page).to_have_url(f"{dashboard_server}/dashboard/gigs#leads")
+            page.reload()
             page.get_by_text("Contract React Build").wait_for()
+            page.get_by_role("link", name="People").click()
+            expect(page).to_have_url(f"{dashboard_server}/dashboard/people")
+            page.get_by_role("link", name="Gigs").click()
+            expect(page).to_have_url(f"{dashboard_server}/dashboard/gigs")
+            expect(page.locator("#gigsTab")).to_have_attribute("aria-pressed", "true")
+            page.locator("#gigLeadsTab").click()
             expect(
                 page.get_by_text("Full-time or part-time / contract · LLM")
             ).to_be_visible()