Testing functionality of the workspace storing and receiving

This commit is contained in:
2026-02-27 21:37:42 +01:00
parent 1a51dc8467
commit 3c17c73390
6 changed files with 86 additions and 26 deletions
+17
View File
@@ -32,9 +32,11 @@
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@types/js-cookie": "^3.0.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"js-cookie": "^3.0.5",
"lucide-react": "^0.553.0",
"next": "16.0.1",
"react": "19.2.0",
@@ -2221,6 +2223,12 @@
"tailwindcss": "4.1.17"
}
},
"node_modules/@types/js-cookie": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
"integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
"license": "MIT"
},
"node_modules/@types/node": {
"version": "20.19.25",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz",
@@ -2429,6 +2437,15 @@
"jiti": "lib/jiti-cli.mjs"
}
},
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"license": "MIT",
"engines": {
"node": ">=14"
}
},
"node_modules/lightningcss": {
"version": "1.30.2",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+2
View File
@@ -32,9 +32,11 @@
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@types/js-cookie": "^3.0.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"js-cookie": "^3.0.5",
"lucide-react": "^0.553.0",
"next": "16.0.1",
"react": "19.2.0",
+21 -6
View File
@@ -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;
}
+10 -3
View File
@@ -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>
+10 -3
View File
@@ -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}
+20 -8
View File
@@ -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) => ({
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 };
}