cleanup

Author: brookslybrand

app/api/update-menu-collapse.ts

@@ -3,7 +3,7 @@ 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";
+import { useCallback, useState } from "react";
 
 export async function action({ request }: Route.ActionArgs) {
   let formData = await request.formData();
@@ -25,19 +25,22 @@ export async function action({ request }: Route.ActionArgs) {
 }
 
 export function useMenuCollapse(category?: string) {
-  const submit = useSubmit();
   const rootLoaderData = useRouteLoaderData<RootInfo["loaderData"]>("root");
-
   invariant(rootLoaderData, "No root loader data found");
 
-  const isCollapsed = category
+  const isMenuOpen = category
     ? rootLoaderData.menuCollapseState[category] ?? true
     : true;
+  const [isOpen, setIsOpen] = useState(isMenuOpen);
+  const submit = useSubmit();
 
   const submitMenuCollapse = useCallback(
     (open: boolean) => {
+      // fire and forget, assume that the submit will succeed and just update the ephemeral state
+      setIsOpen(open);
+
       if (!category) return;
-      submit(
+      return submit(
         { category, open: String(open) },
         {
           navigate: false,
@@ -49,5 +52,5 @@ export function useMenuCollapse(category?: string) {
     [category, submit]
   );
 
-  return [isCollapsed, submitMenuCollapse] as const;
+  return [isOpen, submitMenuCollapse] as const;
 }

app/components/docs-menu/menu.tsx

@@ -91,31 +91,22 @@ function MenuCategoryDetails({
   slug,
   children,
 }: MenuCategoryDetailsType) {
-  const [isMenuCollapsed, submitMenuCollapse] = useMenuCollapse(slug!);
+  const [isOpen, submitMenuCollapse] = useMenuCollapse(slug!);
 
+  // Auto open the details element if on the active path
   let { isActive } = useNavigation(slug);
-
-  // By default only the active path is open
-  const [isOpen, setIsOpen] = React.useState(isMenuCollapsed);
-
-  // Auto open the details element, necessary when navigating from the index page
   React.useEffect(() => {
     if (isActive) {
-      setIsOpen(true);
+      submitMenuCollapse(true);
     }
-  }, [isActive]);
+  }, [isActive, submitMenuCollapse]);
 
   return (
     <details
       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(open);
-
         submitMenuCollapse(open);
       }}
     >

app/modules/menu-collapse.server.ts

@@ -12,6 +12,7 @@ type MenuCollapseState = {
 
 let storage = createCookieSessionStorage<MenuCollapseState>({
   cookie: {
+    secrets: ["doesn't matter it's just menu collapse state"],
     name: "_menu-collapse-state",
     maxAge: 60 * 60 * 24 * 365,
     httpOnly: true,