working example of session sidebar state

Author: brookslybrand

app/api/sidebar.ts

@@ -0,0 +1,16 @@
+import { setSidebarState } from "~/modules/sidebar-state.server";
+import type { Route } from "./+types/sidebar";
+
+export async function action({ request }: Route.ActionArgs) {
+  console.log("action!");
+  let formData = await request.formData();
+  let name = formData.get("name");
+  let open = formData.get("open");
+  if (!name || typeof name !== "string") {
+    return new Response("Name is required", { status: 400 });
+  }
+  if (open === "true" || open === "false") {
+    setSidebarState(name, open === "true");
+  }
+  return open === "true";
+}

app/components/docs-menu/menu.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link } from "react-router";
+import { Link, useFetcher, useSubmit } from "react-router";
 import classNames from "classnames";
 
 import iconsHref from "~/icons.svg";
@@ -8,6 +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";
 
 export function Menu({ menu }: { menu?: MenuDoc[] }) {
   // github might be down but the menu but the doc could be cached in memory, so
@@ -90,9 +91,14 @@ function MenuCategoryDetails({
   slug,
   children,
 }: MenuCategoryDetailsType) {
+  const submit = useSubmit();
+  const sidebarState = useSidebarState(slug!);
+
+  console.log({ slug, sidebarState });
+
   let { isActive } = useNavigation(slug);
   // By default only the active path is open
-  const [isOpen, setIsOpen] = React.useState(true);
+  const [isOpen, setIsOpen] = React.useState(sidebarState);
 
   // Auto open the details element, necessary when navigating from the index page
   React.useEffect(() => {
@@ -106,10 +112,16 @@ function MenuCategoryDetails({
       className={classNames(className, "relative flex flex-col")}
       open={isOpen}
       onToggle={(e) => {
+        const open = e.currentTarget.open;
         // Synchronize the DOM's state with React state to prevent the
         // details element from being closed after navigation and re-evaluation
         // of useIsActivePath
-        setIsOpen(e.currentTarget.open);
+        setIsOpen(open);
+
+        submit(
+          { name: slug!, open: String(open) },
+          { navigate: false, method: "post", action: "/_sidebar" }
+        );
       }}
     >
       {children}

app/modules/sidebar-state.server.ts

@@ -0,0 +1,55 @@
+import {
+  createCookieSessionStorage,
+  type MiddlewareFunctionArgs,
+  type Session,
+} from "react-router";
+import { createContext, provide, pull } from "@ryanflorence/async-provider";
+
+let storage = createCookieSessionStorage({
+  cookie: {
+    name: "_sidebar-state",
+    maxAge: 60 * 60 * 24 * 365,
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+  },
+});
+
+let context = createContext<Session>();
+
+export const sidebarSessionMiddleware = async ({
+  request,
+  next,
+}: MiddlewareFunctionArgs) => {
+  let cookieHeader = request.headers.get("Cookie");
+  let session = await storage.getSession(cookieHeader);
+  // Setting the cookie and wrapping the response in the context
+  return provide([[context, session]], async () => {
+    try {
+      let res = (await next()) as Response;
+      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 sidebarSession() {
+  return pull(context);
+}
+
+export function setSidebarState(key: string, value: boolean) {
+  let session = sidebarSession();
+  let state = session.get("sidebar-state") || {};
+  state[key] = value;
+  session.set("sidebar-state", state);
+}
+
+export function getSidebarState(): Record<string, boolean> {
+  let session = sidebarSession();
+  let state = session.get("sidebar-state") || {};
+  return state;
+}

app/pages/doc.tsx

@@ -3,7 +3,7 @@ import { CACHE_CONTROL } from "~/http";
 import { seo } from "~/seo";
 import semver from "semver";
 
-import type { HeadersArgs } from "react-router";
+import { type HeadersArgs } from "react-router";
 
 import { getDocTitle, getDocsSearch, getRobots } from "~/ui/meta";
 import { DocLayout } from "~/components/doc-layout";
@@ -39,6 +39,7 @@ 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 });

app/pages/docs-layout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router";
+import { Outlet, useRouteLoaderData } from "react-router";
 import classNames from "classnames";
 
 import { Header } from "~/components/docs-header/docs-header";
@@ -12,8 +12,15 @@ 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 loader = async ({ params }: Route.LoaderArgs) => {
+export let middleware = [sidebarSessionMiddleware];
+
+export async function loader({ params }: Route.LoaderArgs) {
   let splat = params["*"];
   let firstSegment = splat?.split("/")[0];
   let refParam = params.ref
@@ -31,8 +38,10 @@ export let loader = async ({ params }: Route.LoaderArgs) => {
     getHeaderData("en", ref, refParam),
   ]);
 
-  return { menu, header };
-};
+  const sidebarState = getSidebarState();
+
+  return { menu, header, sidebarState };
+}
 
 export default function DocsLayout({ loaderData }: Route.ComponentProps) {
   const { menu } = loaderData;
@@ -73,3 +82,12 @@ 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;
+}

app/routes.ts

@@ -9,6 +9,7 @@ const routes: RouteConfig = [
   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" }),

package-lock.json

@@ -23,8 +23,9 @@
   "dependencies": {
     "@docsearch/css": "^3.8.2",
     "@docsearch/react": "^3.8.2",
-    "@react-router/express": "^7.1.1",
-    "@react-router/node": "^7.1.1",
+    "@react-router/express": "0.0.0-experimental-beaa4f52a",
+    "@react-router/node": "0.0.0-experimental-beaa4f52a",
+    "@ryanflorence/async-provider": "^0.0.1",
     "@types/express": "^5.0.0",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.3.2",
@@ -45,7 +46,7 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.1.1",
+    "react-router": "0.0.0-experimental-beaa4f52a",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
@@ -63,7 +64,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@react-router/dev": "7.1.1",
+    "@react-router/dev": "0.0.0-experimental-beaa4f52a",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/eslint": "^8.56.6",
     "@types/express-serve-static-core": "^5.0.2",