overlay router

src/components/overlays/OverlayDisplay.tsx

@@ -3,7 +3,7 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 import { Transition } from "@/components/Transition";
-import { useOverlayRouter } from "@/hooks/useOverlayRouter";
+import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
 
 export interface OverlayProps {
   id: string;
@@ -16,11 +16,21 @@ export function OverlayDisplay(props: { children: ReactNode }) {
 }
 
 export function Overlay(props: OverlayProps) {
-  const router = useOverlayRouter(props.id);
+  const router = useInternalOverlayRouter(props.id);
+  const refRouter = useRef(router);
   const [portalElement, setPortalElement] = useState<Element | null>(null);
   const ref = useRef<HTMLDivElement>(null);
   const target = useRef<Element | null>(null);
 
+  // close router on first mount, we dont want persist routes for overlays
+  useEffect(() => {
+    const r = refRouter.current;
+    r.close();
+    return () => {
+      r.close();
+    };
+  }, []);
+
   useEffect(() => {
     function listen(e: MouseEvent) {
       target.current = e.target as Element;

src/components/overlays/OverlayPage.tsx

@@ -3,32 +3,37 @@ import { ReactNode } from "react";
 
 import { Transition } from "@/components/Transition";
 import { useIsMobile } from "@/hooks/useIsMobile";
+import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
 
 interface Props {
+  id: string;
+  path: string;
   children?: ReactNode;
-  show?: boolean;
   className?: string;
   height?: number;
   width?: number;
-  active?: boolean; // true if a child view is loaded
 }
 
 export function OverlayPage(props: Props) {
+  const router = useInternalOverlayRouter(props.id);
+  const backwards = router.showBackwardsTransition(props.path);
+  const show = router.isCurrentPage(props.path);
+
   const { isMobile } = useIsMobile();
   const width = !isMobile ? `${props.width}px` : "100%";
   return (
     <Transition
-      animation={props.active ? "slide-full-left" : "slide-full-right"}
+      animation={backwards ? "slide-full-left" : "slide-full-right"}
       className="absolute inset-0"
       durationClass="duration-[400ms]"
-      show={props.show}
+      show={show}
     >
       <div
         className={classNames([
           props.className,
           "grid grid-rows-[auto,minmax(0,1fr)]",
         ])}
-        data-floating-page={props.show ? "true" : undefined}
+        data-floating-page={show ? "true" : undefined}
         style={{
           height: props.height ? `${props.height}px` : undefined,
           maxHeight: "70vh",

src/hooks/useOverlayRouter.ts

@@ -1,59 +1,80 @@
+import { useCallback } from "react";
+
 import { useQueryParam } from "@/hooks/useQueryParams";
+import { useOverlayStore } from "@/stores/overlay/store";
 
-export function useOverlayRouter(id: string) {
+function splitPath(path: string, prefix?: string): string[] {
+  const parts = [prefix ?? "", ...path.split("/")];
+  return parts.filter((v) => v.length > 0);
+}
+
+function joinPath(path: string[]): string {
+  return `/${path.join("/")}`;
+}
+
+export function useInternalOverlayRouter(id: string) {
   const [route, setRoute] = useQueryParam("r");
-  const routeParts = (route ?? "").split("/").filter((v) => v.length > 0);
+  const transition = useOverlayStore((s) => s.transition);
-  const routerActive = routeParts.length > 0 && routeParts[0] === id;
+  const setTransition = useOverlayStore((s) => s.setTransition);
+  const routerActive = !!route && route.startsWith(`/${id}`);
 
   function navigate(path: string) {
-    const newRoute = [id, ...path.split("/").filter((v) => v.length > 0)];
+    const oldRoute = route;
-    setRoute(newRoute.join("/"));
+    const newRoute = joinPath(splitPath(path, id));
+    setTransition({
+      from: oldRoute ?? "/",
+      to: newRoute,
+    });
+    setRoute(newRoute);
   }
 
-  function isActive(page: string) {
+  function showBackwardsTransition(path: string) {
-    if (page === "/") return true;
+    if (!transition) return false;
-    const index = routeParts.indexOf(page);
+    const current = joinPath(splitPath(path, id));
-    if (index === -1) return false; // not active
-    if (index === routeParts.length - 1) return false; // active but latest route so shouldnt be counted as active
-    return true;
-  }
 
-  function isCurrentPage(page: string) {
+    if (current === transition.to && transition.from.startsWith(transition.to))
-    return routerActive && route === `/${id}${page}`;
+      return true;
+    if (
+      current === transition.from &&
+      transition.to.startsWith(transition.from)
+    )
+      return true;
+    return false;
   }
 
-  function isLoaded(page: string) {
+  function isCurrentPage(path: string) {
-    if (page === "/") return true;
+    return routerActive && route === joinPath(splitPath(path, id));
-    return route.includes(page);
   }
 
   function isOverlayActive() {
     return routerActive;
   }
 
-  function pageProps(page: string) {
+  const close = useCallback(() => {
-    return {
+    setTransition(null);
-      show: isCurrentPage(page),
-      active: isActive(page),
-    };
-  }
-
-  function close() {
     setRoute(null);
-  }
+  }, [setRoute, setTransition]);
 
-  function open() {
+  const open = useCallback(() => {
+    setTransition(null);
     setRoute(`/${id}`);
-  }
+  }, [id, setRoute, setTransition]);
 
   return {
+    showBackwardsTransition,
+    isCurrentPage,
     isOverlayActive,
     navigate,
     close,
-    isLoaded,
-    isCurrentPage,
-    pageProps,
-    isActive,
     open,
   };
 }
+
+export function useOverlayRouter(id: string) {
+  const router = useInternalOverlayRouter(id);
+  return {
+    open: router.open,
+    close: router.close,
+    navigate: router.navigate,
+  };
+}

src/hooks/useQueryParams.ts

@@ -16,11 +16,13 @@ export function useQueryParams() {
   return queryParams;
 }
 
-export function useQueryParam(param: string) {
+export function useQueryParam(
+  param: string
+): [string | null, (a: string | null) => void] {
   const params = useQueryParams();
   const location = useLocation();
   const router = useHistory();
-  const currentValue = params[param];
+  const currentValue = params[param] ?? null;
 
   const set = useCallback(
     (value: string | null) => {
@@ -34,5 +36,5 @@ export function useQueryParam(param: string) {
     [param, location, router]
   );
 
-  return [currentValue, set] as const;
+  return [currentValue, set];
 }

src/pages/developer/TestView.tsx

@@ -6,7 +6,6 @@ import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 // simple empty view, perfect for putting in tests
 export default function TestView() {
   const router = useOverlayRouter("test");
-  const pages = ["", "/one", "/two"];
 
   return (
     <OverlayDisplay>
@@ -19,21 +18,57 @@ export default function TestView() {
         >
           Open
         </button>
+        <OverlayAnchor id="test">
+          <div className="h-20 w-20 bg-white" />
+        </OverlayAnchor>
+        <Overlay id="test">
+          <OverlayPage id="test" path="/">
+            <div className="bg-blue-900 p-4">
+              <p>HOME</p>
               <button
                 type="button"
                 onClick={() => {
-            router.navigate(pages[Math.floor(pages.length * Math.random())]);
+                  router.navigate("/two");
                 }}
               >
-          random page
+                open page two
               </button>
-        <OverlayAnchor id="test">
+              <button
-          <div className="h-20 w-20 bg-white" />
+                type="button"
-        </OverlayAnchor>
+                onClick={() => {
-        <Overlay id="test">
+                  router.navigate("/one");
-          <OverlayPage {...router.pageProps("")}>Home</OverlayPage>
+                }}
-          <OverlayPage {...router.pageProps("/one")}>Page one</OverlayPage>
+              >
-          <OverlayPage {...router.pageProps("/two")}>Page two</OverlayPage>
+                open page one
+              </button>
+            </div>
+          </OverlayPage>
+          <OverlayPage id="test" path="/one">
+            <div className="bg-blue-900 p-4">
+              <p>ONE</p>
+              <button
+                type="button"
+                onClick={() => {
+                  router.navigate("/");
+                }}
+              >
+                back home
+              </button>
+            </div>
+          </OverlayPage>
+          <OverlayPage id="test" path="/two">
+            <div className="bg-blue-900 p-4">
+              <p>TWO</p>
+              <button
+                type="button"
+                onClick={() => {
+                  router.navigate("/");
+                }}
+              >
+                back home
+              </button>
+            </div>
+          </OverlayPage>
         </Overlay>
       </div>
     </OverlayDisplay>

src/stores/overlay/store.ts

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+export interface OverlayTransition {
+  from: string;
+  to: string;
+}
+
+interface OverlayStore {
+  transition: null | OverlayTransition;
+  setTransition(newTrans: OverlayTransition | null): void;
+}
+
+export const useOverlayStore = create(
+  immer<OverlayStore>((set) => ({
+    transition: null,
+    setTransition(newTrans) {
+      set((s) => {
+        s.transition = newTrans;
+      });
+    },
+  }))
+);