refactor: update SidePeek composition

components/TempDesignSystem/SidePeek/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import { useIsSSR } from "@react-aria/ssr"
-import { Children, cloneElement, PropsWithChildren } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import React, { Children, cloneElement, useEffect, useState } from "react"
 import {
   Dialog,
   DialogTrigger,
@@ -9,15 +10,54 @@ import {
   ModalOverlay,
 } from "react-aria-components"
 
-import { SidePeekProps } from "./types"
+import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
 
 import styles from "./sidePeek.module.css"
 
-export default function SidePeek({
-  children,
-  onClose,
-  activeContent,
-}: PropsWithChildren<SidePeekProps>) {
+function SidePeek({ children }: React.PropsWithChildren) {
+  // TODO: to make this more reusable,
+  // should the param logic be moved up/out so this component can be
+  // controlled by e.g. URL segments
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [activeSidePeek, setActiveSidePeek] =
+    useState<SidePeekContentKey | null>(() => {
+      const sidePeekParam = searchParams.get(
+        "open"
+      ) as SidePeekContentKey | null
+      return sidePeekParam || null
+    })
+
+  useEffect(() => {
+    const sidePeekParam = searchParams.get("open") as SidePeekContentKey | null
+    if (sidePeekParam !== activeSidePeek) {
+      setActiveSidePeek(sidePeekParam)
+    }
+  }, [searchParams, activeSidePeek])
+
+  function handleClose(isOpen: boolean) {
+    if (!isOpen) {
+      setActiveSidePeek(null)
+
+      const nextSearchParams = new URLSearchParams(searchParams.toString())
+      nextSearchParams.delete("open")
+
+      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
+    }
+  }
+
+  const sidePeekChildren = Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+    return cloneElement(child as React.ReactElement, {
+      isActive:
+        (child.props.contentKey as SidePeekContentKey) === activeSidePeek,
+      onClose: handleClose,
+    })
+  })
+
   const isSSR = useIsSSR()
   return isSSR ? (
     <div>{children}</div>
@@ -25,24 +65,16 @@ export default function SidePeek({
     <DialogTrigger>
       <ModalOverlay
         className={styles.overlay}
-        isOpen={!!activeContent}
-        onOpenChange={onClose}
+        isOpen={!!activeSidePeek}
+        onOpenChange={handleClose}
         isDismissable
       >
         <Modal className={styles.sidePeek}>
-          <Dialog className={styles.dialog}>
-            {({ close }) => (
-              <>
-                {Children.map(children, (child) => {
-                  return cloneElement(child as React.ReactElement, {
-                    onClose: close,
-                  })
-                })}
-              </>
-            )}
-          </Dialog>
+          <Dialog className={styles.dialog}>{sidePeekChildren}</Dialog>
         </Modal>
       </ModalOverlay>
     </DialogTrigger>
   )
 }
+
+export default SidePeek