WIP

Author: aidansunbury

packages/trpc-ui/src/react-app/Root.tsx

@@ -10,7 +10,10 @@ import {
   useHeaders,
 } from "@src/react-app/components/contexts/HeadersContext";
 import { HotKeysContextProvider } from "@src/react-app/components/contexts/HotKeysContext";
-import { SiteNavigationContextProvider } from "@src/react-app/components/contexts/SiteNavigationContext";
+import {
+  SiteNavigationContextProvider,
+  useSiteNavigationContext,
+} from "@src/react-app/components/contexts/SiteNavigationContext";
 
 import { useLocalStorage } from "@src/react-app/components/hooks/useLocalStorage";
 import type { RenderOptions } from "@src/render";
@@ -52,11 +55,15 @@ export function RootComponent({
           <SiteNavigationContextProvider>
             <HotKeysContextProvider>
               <RenderOptionsProvider options={options} router={parsedRouter}>
-                {/* <SearchOverlay> */}
-                <div className="relative flex h-full w-full flex-1 flex-col">
-                  <AppInnards rootRouter={rootRouter} options={options} />
-                </div>
-                {/* </SearchOverlay> */}
+                <SearchOverlay>
+                  <div className="relative flex h-full w-full flex-1 flex-col">
+                    <AppInnards
+                      rootRouter={rootRouter}
+                      options={options}
+                      parsedRouter={parsedRouter}
+                    />
+                  </div>
+                </SearchOverlay>
               </RenderOptionsProvider>
             </HotKeysContextProvider>
           </SiteNavigationContextProvider>
@@ -69,8 +76,10 @@ export function RootComponent({
 function AppInnards({
   rootRouter,
   options,
+  parsedRouter,
 }: {
   rootRouter: ParsedRouter;
+  parsedRouter: ParsedTRPCRouter;
   options: RenderOptions;
 }) {
   const { router } = useRenderOptions();
@@ -79,24 +88,24 @@ function AppInnards({
     "trpc-panel.show-minimap",
     true,
   );
-  // const { openAndNavigateTo } = useSiteNavigationContext();
+  const { openAndNavigateTo } = useSiteNavigationContext();
 
   const [path] = useQueryState("path", parseAsArrayOf(parseAsString, "."));
 
-  // useEffect(() => {
-  //   openAndNavigateTo(path ?? [], true);
-  // }, []);
+  useEffect(() => {
+    openAndNavigateTo(path ?? [], true);
+  }, []);
   const allPaths = useAllPaths();
 
   return (
     <div className="relative flex flex-1 flex-col">
       <TopBar open={sidebarOpen} setOpen={setSidebarOpen} />
       <div className="flex flex-1 flex-row bg-mainBackground">
-        {/* <SideNav
-          rootRouter={rootRouter}
+        <SideNav
           open={sidebarOpen}
           setOpen={setSidebarOpen}
-        /> */}
+          parsedRoouter={parsedRouter}
+        />
         <div
           className="flex flex-1 flex-col items-center overflow-scroll"
           style={{

packages/trpc-ui/src/react-app/components/SearchInputOverlay.tsx

@@ -48,7 +48,7 @@ function SearchInput() {
   const searchText = useSearch((s) => s.searchText);
   const setSearchText = useSearch((s) => s.setSearchText);
   const finish = useSearch((s) => s.finish);
-  // const { openAndNavigateTo } = useSiteNavigationContext();
+  const { openAndNavigateTo } = useSiteNavigationContext();
   const paths = useAllPaths();
   const results = useFuzzySort({
     paths: paths.pathsArray,
@@ -128,7 +128,7 @@ function SearchInput() {
   function pathSelectedHandler(index: number) {
     const selected = results[index];
     if (!selected) return;
-    // openAndNavigateTo(selected.target.split("."), true);
+    openAndNavigateTo(selected.target.split("."), true);
     finish();
   }
 

packages/trpc-ui/src/react-app/components/SideNav.tsx

@@ -8,44 +8,53 @@ import {
 import { colorSchemeForNode } from "@src/react-app/components/style-utils";
 import React, { useCallback } from "react";
 import type { ParsedRouter } from "../../parse/parseRouter";
+import type {
+  ParsedTRPCRouter,
+  Router,
+  RouterOrProcedure,
+} from "@src/parseV2/types";
+import { useCollapsableIsShowing } from "@src/react-app/components/contexts/SiteNavigationContext";
 export function SideNav({
-  rootRouter,
+  // rootRouter,
   open,
-}: // setOpen,
-{
+  parsedRoouter,
+}: {
   open: boolean;
-  rootRouter: ParsedRouter;
+  // rootRouter: ParsedRouter;
+  parsedRoouter: ParsedTRPCRouter;
   setOpen: (value: boolean) => void;
 }) {
   return open ? (
     <div
       style={{ maxHeight: "calc(100vh - 4rem)" }}
       className="flex min-w-[16rem] flex-col items-start space-y-2 overflow-scroll border-r-2 border-r-panelBorder bg-actuallyWhite p-2 pr-4 shadow-sm"
     >
-      <SideNavItem node={rootRouter} path={[]} />
+      {Object.entries(parsedRoouter).map(([key, routerOrProcedure]) => {
+        return <SideNavItem node={routerOrProcedure} key={key} />;
+      })}
     </div>
   ) : null;
 }
 
+//* Fix
 function SideNavItem({
   node,
-  path,
+  // path,
 }: {
-  node: ParsedRouter | ParsedProcedure;
-  path: string[];
+  node: RouterOrProcedure;
+  // path: string[];
 }) {
-  // const { markForScrollTo } = useSiteNavigationContext();
-  // const shown = useCollapsableIsShowing(path) || path.length === 0;
-  const shown = false;
+  const { markForScrollTo } = useSiteNavigationContext();
+  const shown = useCollapsableIsShowing(node.path) || node.path.length === 0;
 
-  // const onClick = useCallback(function onClick() {
-  //   collapsables.toggle(path);
-  //   markForScrollTo(path);
-  // }, []);
+  const onClick = useCallback(function onClick() {
+    collapsables.toggle(node.path);
+    markForScrollTo(node.path);
+  }, []);
 
   return (
     <>
-      {path.length > 0 && (
+      {node.path.length > 0 && (
         <button
           type="button"
           className={`flex w-full flex-row items-center justify-between font-bold ${
@@ -55,10 +64,10 @@ function SideNavItem({
         >
           <span className="flex flex-row items-start">
             <ItemTypeIcon colorScheme={colorSchemeForNode(node)} />
-            {path[path.length - 1]}
+            {node.path[node.path.length - 1]}
           </span>
 
-          {node.nodeType === "router" ? (
+          {node.type === "router" ? (
             <Chevron
               className={"ml-2 h-3 w-3 " + ""}
               direction={shown ? "down" : "right"}
@@ -68,20 +77,10 @@ function SideNavItem({
           )}
         </button>
       )}
-      {shown && node.nodeType === "router" && (
+      {shown && node.type === "router" && (
         <div className="flex flex-col items-start space-y-2 self-stretch pl-2">
           {Object.entries(node.children).map(([key, node]) => {
-            return (
-              <SideNavItem
-                path={
-                  node.nodeType === "procedure"
-                    ? node.pathFromRootRouter
-                    : node.path
-                }
-                node={node}
-                key={key}
-              />
-            );
+            return <SideNavItem node={node} key={key} />;
           })}
         </div>
       )}