move middleware to root and refactor

Author: brookslybrand

Diff for: app/api/sidebar.ts

@@ -0,0 +1,53 @@
+import { setMenuCollapseState } from "~/modules/menu-collapse.server";
+import type { Route } from "./+types/update-menu-collapse";
+import type { Info as RootInfo } from "../+types/root";
+import { useRouteLoaderData, useSubmit } from "react-router";
+import invariant from "tiny-invariant";
+import { useCallback } from "react";
+
+export async function action({ request }: Route.ActionArgs) {
+  let formData = await request.formData();
+
+  let category = formData.get("category");
+  if (!category || typeof category !== "string") {
+    return new Response("Name is required", { status: 400 });
+  }
+
+  let open = formData.get("open");
+  if (open !== "true" && open !== "false") {
+    return new Response("Open must be true or false", { status: 400 });
+  }
+
+  let parsedOpen = open === "true";
+
+  setMenuCollapseState(category, parsedOpen);
+  return parsedOpen;
+}
+
+export function useMenuCollapse(category?: string) {
+  const submit = useSubmit();
+  const rootLoaderData = useRouteLoaderData<RootInfo["loaderData"]>("root");
+
+  invariant(rootLoaderData, "No root loader data found");
+
+  const isCollapsed = category
+    ? rootLoaderData.menuCollapseState[category] ?? true
+    : true;
+
+  const submitMenuCollapse = useCallback(
+    (open: boolean) => {
+      if (!category) return;
+      submit(
+        { category, open: String(open) },
+        {
+          navigate: false,
+          method: "post",
+          action: "/_update-menu-collapse",
+        }
+      );
+    },
+    [category, submit]
+  );
+
+  return [isCollapsed, submitMenuCollapse] as const;
+}

Diff for: app/api/update-menu-collapse.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link, useFetcher, useSubmit } from "react-router";
+import { Link } from "react-router";
 import classNames from "classnames";
 
 import iconsHref from "~/icons.svg";
@@ -8,7 +8,7 @@ import type { MenuDoc } from "~/modules/gh-docs/.server/docs";
 import { useNavigation } from "~/hooks/use-navigation";
 import { useDelayedValue } from "~/hooks/use-delayed-value";
 import { useHeaderData } from "../docs-header/use-header-data";
-import { useSidebarState } from "~/pages/docs-layout";
+import { useMenuCollapse } from "~/api/update-menu-collapse";
 
 export function Menu({ menu }: { menu?: MenuDoc[] }) {
   // github might be down but the menu but the doc could be cached in memory, so
@@ -91,14 +91,12 @@ function MenuCategoryDetails({
   slug,
   children,
 }: MenuCategoryDetailsType) {
-  const submit = useSubmit();
-  const sidebarState = useSidebarState(slug!);
-
-  console.log({ slug, sidebarState });
+  const [isMenuCollapsed, submitMenuCollapse] = useMenuCollapse(slug!);
 
   let { isActive } = useNavigation(slug);
+
   // By default only the active path is open
-  const [isOpen, setIsOpen] = React.useState(sidebarState);
+  const [isOpen, setIsOpen] = React.useState(isMenuCollapsed);
 
   // Auto open the details element, necessary when navigating from the index page
   React.useEffect(() => {
@@ -118,10 +116,7 @@ function MenuCategoryDetails({
         // of useIsActivePath
         setIsOpen(open);
 
-        submit(
-          { name: slug!, open: String(open) },
-          { navigate: false, method: "post", action: "/_sidebar" }
-        );
+        submitMenuCollapse(open);
       }}
     >
       {children}

Diff for: app/components/docs-menu/menu.tsx

@@ -0,0 +1,56 @@
+import {
+  createCookieSessionStorage,
+  type MiddlewareFunctionArgs,
+  type RouterContext,
+  type Session,
+} from "react-router";
+import { createContext, provide, pull } from "@ryanflorence/async-provider";
+
+type MenuCollapseState = {
+  "menu-collapse-state"?: Record<string, boolean>;
+};
+
+let storage = createCookieSessionStorage<MenuCollapseState>({
+  cookie: {
+    name: "_menu-collapse-state",
+    maxAge: 60 * 60 * 24 * 365,
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+  },
+});
+
+let menuCollapseStateContext = createContext<Session<MenuCollapseState>>();
+
+export let menuCollapseStateMiddleware = async ({
+  request,
+  next,
+}: MiddlewareFunctionArgs<RouterContext, Response>) => {
+  let cookieHeader = request.headers.get("Cookie");
+  let session = await storage.getSession(cookieHeader);
+  // Setting the cookie and wrapping the response in the context
+  return provide([[menuCollapseStateContext, session]], async () => {
+    try {
+      let res = await next();
+      res.headers.append("Set-Cookie", await storage.commitSession(session));
+      return res;
+    } catch (e) {
+      console.log("session middleware error", request.url);
+      console.log(e);
+      return new Response("Oops, something went wrong.", { status: 500 });
+    }
+  });
+};
+
+export function setMenuCollapseState(category: string, value: boolean) {
+  let session = pull(menuCollapseStateContext);
+  let state = session.get("menu-collapse-state") || {};
+  state[category] = value;
+  session.set("menu-collapse-state", state);
+}
+
+export function getMenuCollapseState() {
+  let session = pull(menuCollapseStateContext);
+  let state = session.get("menu-collapse-state") || {};
+  return state;
+}

Diff for: app/modules/menu-collapse.server.ts

@@ -3,8 +3,6 @@ import { CACHE_CONTROL } from "~/http";
 import { seo } from "~/seo";
 import semver from "semver";
 
-import { type HeadersArgs } from "react-router";
-
 import { getDocTitle, getDocsSearch, getRobots } from "~/ui/meta";
 import { DocLayout } from "~/components/doc-layout";
 import type { Route } from "./+types/doc";
@@ -39,14 +37,13 @@ export let loader = async ({ request, params }: Route.LoaderArgs) => {
     if (!doc) {
       throw new Response("Not Found", { status: 404 });
     }
-
     return { doc };
   } catch (_) {
     throw new Response("Not Found", { status: 404 });
   }
 };
 
-export function headers({ parentHeaders }: HeadersArgs) {
+export function headers({ parentHeaders }: Route.HeadersArgs) {
   parentHeaders.set("Cache-Control", CACHE_CONTROL.doc);
   return parentHeaders;
 }

Diff for: app/modules/sidebar-state.server.ts

@@ -1,4 +1,4 @@
-import { Outlet, useRouteLoaderData } from "react-router";
+import { Outlet } from "react-router";
 import classNames from "classnames";
 
 import { Header } from "~/components/docs-header/docs-header";
@@ -12,13 +12,6 @@ import type { Route } from "./+types/docs-layout";
 import semver from "semver";
 import { useRef } from "react";
 import { useCodeBlockCopyButton } from "~/ui/utils";
-import {
-  getSidebarState,
-  sidebarSessionMiddleware,
-} from "~/modules/sidebar-state.server";
-import invariant from "tiny-invariant";
-
-export let middleware = [sidebarSessionMiddleware];
 
 export async function loader({ params }: Route.LoaderArgs) {
   let splat = params["*"];
@@ -38,9 +31,7 @@ export async function loader({ params }: Route.LoaderArgs) {
     getHeaderData("en", ref, refParam),
   ]);
 
-  const sidebarState = getSidebarState();
-
-  return { menu, header, sidebarState };
+  return { menu, header };
 }
 
 export default function DocsLayout({ loaderData }: Route.ComponentProps) {
@@ -82,12 +73,3 @@ export default function DocsLayout({ loaderData }: Route.ComponentProps) {
     </div>
   );
 }
-
-export function useSidebarState(slug: string) {
-  const loaderData =
-    useRouteLoaderData<Route.ComponentProps["loaderData"]>("docs");
-
-  invariant(loaderData, "No loader data found");
-
-  return loaderData.sidebarState[slug] ?? true;
-}

Diff for: app/pages/doc.tsx

@@ -17,22 +17,29 @@ import {
 import { isHost } from "./modules/http-utils/is-host";
 import iconsHref from "~/icons.svg";
 import { DocSearch } from "./modules/docsearch";
+import type { Route } from "./+types/root";
+import {
+  getMenuCollapseState,
+  menuCollapseStateMiddleware,
+} from "./modules/menu-collapse.server";
 
 import "~/styles/tailwind.css";
 import "@docsearch/css/dist/style.css";
 import "~/styles/docsearch.css";
 // FIXUP: Styles need to all be imported in root until this is fixed:
 // https://github.com/remix-run/react-router/issues/12382
 import "~/styles/docs.css";
-import type { Route } from "./+types/root";
+
+export let middleware = [menuCollapseStateMiddleware];
 
 export async function loader({ request }: LoaderFunctionArgs) {
   await middlewares(request);
 
   let colorScheme = await parseColorScheme(request);
   let isProductionHost = isHost("reactrouter.com", request);
+  const menuCollapseState = getMenuCollapseState();
 
-  return { colorScheme, isProductionHost };
+  return { colorScheme, isProductionHost, menuCollapseState };
 }
 
 export function headers() {

Diff for: app/pages/docs-layout.tsx

@@ -5,11 +5,12 @@ const routes: RouteConfig = [
   route("/brand", "pages/brand.tsx"),
   route("/healthcheck", "pages/healthcheck.tsx"),
   route("/color-scheme", "actions/color-scheme.ts"),
+  // Update the menu collapse session
+  route("_update-menu-collapse", "api/update-menu-collapse.ts"),
 
   route("", "pages/docs-layout.tsx", { id: "docs" }, [
     route("home", "pages/doc.tsx", { id: "home" }),
     route("*", "pages/doc.tsx"),
-    route("_sidebar", "api/sidebar.ts"),
   ]),
 
   route("/:ref", "pages/docs-index.tsx", { id: "docs-index" }),