feat(SW-1347): SidePeekProvider is now using '#s-' instead of '?s='

components/SidePeeks/SidePeekProvider/index.tsx

@@ -1,7 +1,9 @@
 "use client"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useRouter } from "next/navigation"
 import { createContext, useEffect, useState } from "react"
 
+import useHash from "@/hooks/useHash"
+
 interface ISidePeekContext {
   handleClose: (isOpen: boolean) => void
   activeSidePeek: string | null
@@ -9,28 +11,24 @@ interface ISidePeekContext {
 
 export const SidePeekContext = createContext<ISidePeekContext | null>(null)
 
-function SidePeekProvider({ children }: React.PropsWithChildren) {
+export default function SidePeekProvider({
+  children,
+}: React.PropsWithChildren) {
   const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(() => {
-    const sidePeekParam = searchParams.get("s")
-    return sidePeekParam || null
-  })
+  const hash = useHash()
+  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(null)
 
   useEffect(() => {
-    const sidePeekParam = searchParams.get("s")
-    if (sidePeekParam !== activeSidePeek) {
-      setActiveSidePeek(sidePeekParam)
+    if (hash?.startsWith("s-")) {
+      setActiveSidePeek(hash.slice(2))
+    } else {
+      setActiveSidePeek(null)
     }
-  }, [searchParams, activeSidePeek])
+  }, [hash, setActiveSidePeek])
 
   function handleClose(isOpen: boolean) {
     if (!isOpen) {
-      const nextSearchParams = new URLSearchParams(searchParams.toString())
-      nextSearchParams.delete("s")
-
-      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
+      router.push(window.location.pathname, { scroll: false })
       setActiveSidePeek(null)
     }
   }
@@ -41,5 +39,3 @@ function SidePeekProvider({ children }: React.PropsWithChildren) {
     </SidePeekContext.Provider>
   )
 }
-
-export default SidePeekProvider