Testing functionality of the workspace storing and receiving

src/app/workspace/page.tsx

@@ -2,25 +2,40 @@
 
 import Router from "@/components/Router";
 import AppSidebar, { SidebarTrigger } from "@/components/sidebar/AppSidebar";
-import useWorkspace from "@/hooks/workspace";
+import { useWorkspace } from "@/hooks/workspace";
 import { ChevronRight } from "lucide-react";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { EntityId } from "@/lib/types";
 
 export default function Workspace() {
-  const workspace = useWorkspace();
+  const [currentWorkspace, setCurrentWorkspace] = useState<string>();
 
-  return (
-    <AppSidebar workspace={workspace}>
+  const { workspace, loadWorkspace } = useWorkspace();
+
+  const [route, setRoute] = useState<EntityId>();
+
+  useEffect(() => {
+    setCurrentWorkspace(Cookies.get("workspace"));
+  }, []);
+
+  useEffect(() => {
+    loadWorkspace(currentWorkspace);
+  }, [currentWorkspace]);
+
+  return workspace ? (
+    <AppSidebar workspace={workspace} setRoute={setRoute}>
       <SidebarTrigger className="w-full px-4">
         <div className="px-4">
           <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
             {workspace.name}
             <ChevronRight className="h-5" />
-            {workspace.entities[workspace.route].name}
+            {workspace.entities[route || ""]?.name}
           </header>
         </div>
       </SidebarTrigger>
 
       <Router workspace={workspace} />
     </AppSidebar>
-  );
+  ) : null;
 }

src/components/sidebar/AppSidebar.tsx

@@ -16,14 +16,16 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { ChevronDown } from "lucide-react";
-import { Workspace } from "@/hooks/workspace";
+import { EntityId, SetState, Workspace } from "@/lib/types";
 
 export default function AppSidebar({
   children,
   workspace,
+  setRoute,
 }: Readonly<{
   children: React.ReactNode;
   workspace: Workspace;
+  setRoute: SetState<EntityId | undefined>;
 }>) {
   return (
     <SidebarProvider>
@@ -51,8 +53,13 @@ export default function AppSidebar({
         </SidebarHeader>
         <SidebarContent>
           <SidebarMenu>
-            {workspace.entityLayout.map((entity, i) => (
-              <EntitySwitch entity={entity} workspace={workspace} key={i} />
+            {workspace.layout.map((entity, i) => (
+              <EntitySwitch
+                entity={entity}
+                workspace={workspace}
+                key={i}
+                setRoute={setRoute}
+              />
             ))}
           </SidebarMenu>
         </SidebarContent>

src/components/sidebar/Entity.tsx

@@ -9,7 +9,7 @@ import {
 } from "../ui/sidebar";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
 import { ChevronDown } from "lucide-react";
-import { Workspace } from "@/hooks/workspace";
+import { EntityId, SetState, Workspace } from "@/lib/types";
 
 export type SidebarEntity =
   | {
@@ -25,9 +25,11 @@ export type SidebarEntity =
 export default function EntitySwitch({
   entity,
   workspace,
+  setRoute,
 }: {
   entity: SidebarEntity;
   workspace: Workspace;
+  setRoute: SetState<EntityId | undefined>;
 }) {
   if (entity.kind === "group") {
     return (
@@ -45,7 +47,12 @@ export default function EntitySwitch({
             <SidebarGroupContent>
               <SidebarMenu>
                 {entity.children?.map((entity, i) => (
-                  <EntitySwitch entity={entity} workspace={workspace} key={i} />
+                  <EntitySwitch
+                    entity={entity}
+                    workspace={workspace}
+                    key={i}
+                    setRoute={setRoute}
+                  />
                 ))}
               </SidebarMenu>
             </SidebarGroupContent>
@@ -58,7 +65,7 @@ export default function EntitySwitch({
       <SidebarMenuItem>
         <SidebarMenuButton
           onClick={() => {
-            workspace.setRoute(entity.id);
+            setRoute(entity.id);
           }}
         >
           {workspace.entities[entity.id].name}

src/hooks/workspace.ts

@@ -5,25 +5,37 @@ import {
 } from "@/lib/workspace";
 import { useEffect, useState } from "react";
 
-export function useWorkspace(workspaceId: string) {
-  const [workspace, setWorkspace] = useState<Workspace>(() =>
-    loadWorkspaceFromLocalStorage(workspaceId),
-  );
+export function useWorkspace() {
+  const [workspace, setWorkspace] = useState<Workspace>();
 
   const updateEntity = (entityId: EntityId, updater: (e: Entity) => Entity) => {
-    setWorkspace((prev) => ({
-      ...prev,
-      entities: {
-        ...prev.entities,
-        [entityId]: updater(prev.entities[entityId]),
-      },
-      updatedAt: Date.now(),
-    }));
+    setWorkspace((prev) =>
+      prev
+        ? {
+            ...prev,
+            entities: {
+              ...prev.entities,
+              [entityId]: updater(prev.entities[entityId]),
+            },
+            updatedAt: Date.now(),
+          }
+        : undefined,
+    );
+  };
+
+  const loadWorkspace = (workspaceId: string | undefined) => {
+    if (!workspaceId) {
+      return setWorkspace(undefined);
+    }
+
+    const w = loadWorkspaceFromLocalStorage(workspaceId);
+    setWorkspace(w);
+    return w;
   };
 
   useEffect(() => {
-    saveWorkspaceToLocalStorage(workspace);
+    if (workspace) saveWorkspaceToLocalStorage(workspace);
   }, [workspace]);
 
-  return { workspace, updateEntity };
+  return { workspace, loadWorkspace, updateEntity };
 }