Add compare versions drawer, fix route meta

- route meta previously was only derived from the deepest matched route, even if that route did not define a route handle but an ancestor did - it will now use the most deeply nested matched route's metadata
solomonhawk · Nov 14, 2024 · d3ae725 · d3ae725
1 parent b483e3f
commit d3ae725
Show file tree

Hide file tree

Showing 19 changed files with 715 additions and 352 deletions.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -2,7 +2,8 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- @TODO: favicon -->
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Manifold</title>
     <meta id="meta-description" name="description" content="Manifold" />

diff --git a/apps/web/src/features/dialog-manager/index.ts b/apps/web/src/features/dialog-manager/index.ts
@@ -5,6 +5,7 @@ import { FindDependencyDialog } from "~features/editor/components/find-dependenc
 import { PreviewDependencyDialog } from "~features/editor/components/preview-dependency-dialog";
 import { TableDeleteDialog } from "~features/table/components/table-delete-dialog";
 import { TablePublishDialog } from "~features/table/components/table-publish-dialog";
+import { CompareVersionsDialog } from "~features/table-version/components/compare-versions-dialog";
 
 /**
  * @NOTE: Workaround for TypeScript not being able to infer the correct type of
@@ -51,6 +52,10 @@ export const DIALOGS = {
     ID: "PREVIEW_DEPENDENCY",
     COMPONENT: NiceModal.create(PreviewDependencyDialog),
   },
+  COMPARE_VERSIONS: {
+    ID: "COMPARE_VERSIONS",
+    COMPONENT: NiceModal.create(CompareVersionsDialog),
+  },
 } as const;
 
 for (const dialog of Object.values(DIALOGS)) {

diff --git a/apps/web/src/features/editor/components/preview-dependency-dialog/index.tsx b/apps/web/src/features/editor/components/preview-dependency-dialog/index.tsx
@@ -12,7 +12,11 @@ import {
   DrawerHeader,
   DrawerTitle,
 } from "@manifold/ui/components/ui/drawer";
+import { useCallback } from "react";
 import { GoX } from "react-icons/go";
+import { useBlocker } from "react-router-dom";
+
+import { useRouteChange } from "~features/routing/hooks/use-route-change";
 
 type Props = {
   dependency: RouterOutput["table"]["findDependencies"][number];
@@ -27,6 +31,16 @@ export function PreviewDependencyDialog({
 }: Props) {
   const modal = useModal();
 
+  /**
+   * Prevent navigation when the modal is open
+   */
+  useBlocker(modal.visible);
+
+  /**
+   * Close the modal when a route change would occur
+   */
+  useRouteChange(useCallback(() => modal.hide(), [modal]));
+
   return (
     <Drawer
       open={modal.visible}
@@ -36,7 +50,7 @@ export function PreviewDependencyDialog({
       // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus
     >
-      <DrawerContent>
+      <DrawerContent className="top-0">
         <div className="w-full flex-1 overflow-y-auto">
           <div className="mx-auto w-full max-w-xl">
             <DrawerHeader>

diff --git a/apps/web/src/features/routing/components/route-meta.ts b/apps/web/src/features/routing/components/route-meta.ts
@@ -1,6 +1,7 @@
 import { isError } from "@tanstack/react-query";
 import { useEffect } from "react";
 import {
+  type Params,
   type UIMatch,
   useMatches,
   useParams,
@@ -18,6 +19,37 @@ const DEFAULT_TITLE = "Manifold | Embrace the chaos";
 const DEFAULT_DESCRIPTION =
   "A tool for curating your collection of random tables.";
 
+type RouteMetaData = { title: string; description: string };
+
+function getRouteMetaData(
+  matchedRoute: UIMatch<unknown, Handle<unknown>>,
+  params: Readonly<Params<string>>,
+) {
+  const { handle, data } = matchedRoute;
+
+  if (handle && data) {
+    return {
+      title: handle.title?.({ params, data }),
+      description: handle.description?.({ params, data }),
+    };
+  }
+
+  return { title: undefined, description: undefined };
+}
+
+function getMostSpecificRouteMetaData(
+  metadata: Partial<RouteMetaData>[],
+): RouteMetaData {
+  return metadata.reduce<RouteMetaData>(
+    (acc, current) => {
+      return {
+        title: current.title || acc.title,
+        description: current.description || acc.description,
+      };
+    },
+    { title: DEFAULT_TITLE, description: DEFAULT_DESCRIPTION },
+  );
+}
 /**
  * When the route changes, updates the document title.
  *
@@ -37,18 +69,14 @@ export function RouteMeta() {
   const params = useParams();
   const matches = useMatches() as UIMatch<unknown, Handle<unknown>>[];
   const error = useRouteError();
-
-  const { handle, data } = matches[matches.length - 1];
-
-  let title = DEFAULT_TITLE;
-  let description = DEFAULT_DESCRIPTION;
+  const allMatchesMeta = matches.map((match) =>
+    getRouteMetaData(match, params),
+  );
+  let { title, description } = getMostSpecificRouteMetaData(allMatchesMeta);
 
   if (error) {
     title = isError(error) ? error.message : "Something went wrong";
     description = "We're not sure what happened, but we're looking into it.";
-  } else if (handle && data) {
-    title = handle.title?.({ params, data }) ?? DEFAULT_TITLE;
-    description = handle.description?.({ params, data }) ?? DEFAULT_DESCRIPTION;
   }
 
   useEffect(() => {

diff --git a/apps/web/src/features/routing/hooks/use-route-change.ts b/apps/web/src/features/routing/hooks/use-route-change.ts
@@ -0,0 +1,15 @@
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+
+import { routerAtom } from "~features/routing/state";
+
+/**
+ * Calls the provided callback when the route changes
+ */
+export function useRouteChange(callback: () => void) {
+  const router = useAtomValue(routerAtom);
+
+  useEffect(() => {
+    return router?.subscribe(() => callback());
+  }, [router, callback]);
+}
diff --git a/apps/web/src/features/routing/index.tsx b/apps/web/src/features/routing/index.tsx
@@ -11,13 +11,14 @@ import {
   protectedLoaderBuilder,
   routerBuilder,
 } from "~features/routing/router";
-import { routesAtom } from "~features/routing/state";
+import { routerAtom, routesAtom } from "~features/routing/state";
 import { trpc } from "~utils/trpc";
 
 export function Router() {
   const session = useAuth();
   const trpcUtils = trpc.useUtils();
   const setRoutes = useSetAtom(routesAtom);
+  const setRouter = useSetAtom(routerAtom);
 
   const guestLoader = useMemo(() => guestLoaderBuilder(session), [session]);
   const protectedLoader = useMemo(
@@ -39,6 +40,14 @@ export function Router() {
     setRoutes(routes);
   }, [routes, setRoutes]);
 
+  /**
+   * Make router instance available for descendents (e.g. Drawers/Dialogs) to
+   * listen to route changes
+   */
+  useEffect(() => {
+    setRouter(routerInstance);
+  }, [routerInstance, setRouter]);
+
   return (
     <>
       <NavigationProgress router={routerInstance} />

diff --git a/apps/web/src/features/routing/router.tsx b/apps/web/src/features/routing/router.tsx
@@ -106,8 +106,20 @@ export function buildAppRoutes({
                   lazy: loadTableDetailRoute(trpcUtils),
                 },
                 {
+                  id: "table-version-detail",
                   path: "v/:version",
                   lazy: loadTableVersionDetailRoute(trpcUtils),
+                  children: [
+                    {
+                      index: true,
+                      lazy: () =>
+                        import("~features/table-version/pages/detail").then(
+                          (mod) => ({
+                            Component: mod.TableVersionDetail,
+                          }),
+                        ),
+                    },
+                  ],
                 },
                 {
                   path: "edit",

diff --git a/apps/web/src/features/routing/state.ts b/apps/web/src/features/routing/state.ts
@@ -1,4 +1,7 @@
 import { atom } from "jotai";
-import { RouteObject } from "react-router-dom";
+import { createBrowserRouter, RouteObject } from "react-router-dom";
 
 export const routesAtom = atom<RouteObject[]>([]);
+export const routerAtom = atom<ReturnType<typeof createBrowserRouter> | null>(
+  null,
+);