Remove collapse state middleware (#214)

Author: brookslybrand

app/actions/menu-collapse/route.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link, useSubmit } from "react-router";
+import { Link } from "react-router";
 import { clsx } from "clsx";
 
 import iconsHref from "~/icons.svg";
@@ -8,7 +8,6 @@ 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 { useDocsLayoutRouteLoaderData } from "~/hooks/use-docs-layout";
 
 export function Menu({
   menu,
@@ -50,7 +49,7 @@ function MenuCategory({ category }: { category: MenuDoc }) {
   }
 
   return (
-    <MenuCategoryDetails className="group" slug={category.slug}>
+    <MenuCategoryDetails className="group">
       <MenuSummary>
         {category.attrs.title}
         <svg aria-hidden className="hidden h-5 w-5 group-open:block">
@@ -91,67 +90,17 @@ function MenuHeading({ label }: { label: string }) {
 
 type MenuCategoryDetailsType = {
   className?: string;
-  slug?: string;
   children: React.ReactNode;
 };
 
-function MenuCategoryDetails({
-  className,
-  slug,
-  children,
-}: MenuCategoryDetailsType) {
-  const [isOpen, submitMenuCollapse] = useMenuCollapse(slug);
-
+function MenuCategoryDetails({ className, children }: MenuCategoryDetailsType) {
   return (
-    <details
-      className={clsx(className, "relative flex flex-col")}
-      open={isOpen}
-      onToggle={(e) => {
-        submitMenuCollapse(e.currentTarget.open);
-      }}
-    >
+    <details className={clsx(className, "relative flex flex-col")} open>
       {children}
     </details>
   );
 }
 
-function useMenuCollapse(category?: string) {
-  const menuCollapseState = useDocsLayoutRouteLoaderData()?.menuCollapseState;
-  const [isOpen, setIsOpen] = React.useState(
-    menuCollapseState?.[category ?? ""] ?? true,
-  );
-  const submit = useSubmit();
-
-  const submitMenuCollapse = React.useCallback(
-    (open: boolean) => {
-      // Fire and forget, assume that the submit will succeed and just update
-      setIsOpen(open);
-
-      if (!category) return;
-
-      return submit(
-        { category, open },
-        {
-          navigate: false,
-          method: "post",
-          action: "/menu-collapse",
-        },
-      );
-    },
-    [category, submit],
-  );
-
-  // Auto-expand when navigating to a page within this category
-  let { isActive } = useNavigation(category);
-  React.useEffect(() => {
-    if (isActive) {
-      submitMenuCollapse(true);
-    }
-  }, [isActive, submitMenuCollapse]);
-
-  return [isOpen, submitMenuCollapse] as const;
-}
-
 let sortDocs = (a: MenuDoc, b: MenuDoc) =>
   (a.attrs.order || Infinity) - (b.attrs.order || Infinity);
 

app/actions/menu-collapse/server.ts

@@ -13,16 +13,9 @@ import semver from "semver";
 import { useRef } from "react";
 import { useCodeBlockCopyButton } from "~/ui/utils";
 
-import {
-  menuCollapseContext,
-  // menuCollapseStateMiddleware,
-} from "~/actions/menu-collapse/server";
-
 import docsCss from "~/styles/docs.css?url";
 
-// export let unstable_middleware = [menuCollapseStateMiddleware];
-
-export async function loader({ request, params, context }: Route.LoaderArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
   let url = new URL(request.url);
   if (!url.pathname.endsWith("/")) {
     url.pathname += "/";
@@ -62,17 +55,9 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
     getHeaderData("en", ref, refParam),
   ]);
 
-  // Only retain the menu collapse state on the main branch to avoid bleeding
-  // to other branches
-  let menuCollapseState =
-    header.currentGitHubRef === "main"
-      ? menuCollapseContext(context).get()
-      : {};
-
   return {
     menu,
     header,
-    menuCollapseState,
   };
 }
 

app/components/docs-menu/menu.tsx

@@ -7,7 +7,6 @@ const routes: RouteConfig = [
   route("/color-scheme", "actions/color-scheme/route.ts"),
 
   route("", "pages/docs-layout.tsx", { id: "docs" }, [
-    route("/menu-collapse", "actions/menu-collapse/route.ts"),
     route("home.md", "pages/doc.tsx", { id: "home-md" }),
     route("home", "pages/doc.tsx", { id: "home" }),
     route("changelog.md", "pages/doc.tsx", { id: "changelog-md" }),