From 3c17c733905c17933c8180fd97d42e5043c770e9 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Fri, 27 Feb 2026 21:37:42 +0100 Subject: [PATCH] Testing functionality of the workspace storing and receiving --- package-lock.json | 17 ++++++++++++ package.json | 2 ++ src/app/workspace/page.tsx | 27 ++++++++++++++---- src/components/sidebar/AppSidebar.tsx | 13 +++++++-- src/components/sidebar/Entity.tsx | 13 +++++++-- src/hooks/workspace.ts | 40 +++++++++++++++++---------- 6 files changed, 86 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8114a5f..dfe0640 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index e4a9286..544fbbc 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/workspace/page.tsx b/src/app/workspace/page.tsx index 5e945c9..2eb3af4 100644 --- a/src/app/workspace/page.tsx +++ b/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(); - return ( - + const { workspace, loadWorkspace } = useWorkspace(); + + const [route, setRoute] = useState(); + + useEffect(() => { + setCurrentWorkspace(Cookies.get("workspace")); + }, []); + + useEffect(() => { + loadWorkspace(currentWorkspace); + }, [currentWorkspace]); + + return workspace ? ( +
{workspace.name} - {workspace.entities[workspace.route].name} + {workspace.entities[route || ""]?.name}
- ); + ) : null; } diff --git a/src/components/sidebar/AppSidebar.tsx b/src/components/sidebar/AppSidebar.tsx index 0993702..3e31d16 100644 --- a/src/components/sidebar/AppSidebar.tsx +++ b/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; }>) { return ( @@ -51,8 +53,13 @@ export default function AppSidebar({ - {workspace.entityLayout.map((entity, i) => ( - + {workspace.layout.map((entity, i) => ( + ))} diff --git a/src/components/sidebar/Entity.tsx b/src/components/sidebar/Entity.tsx index 0ac8a64..7260165 100644 --- a/src/components/sidebar/Entity.tsx +++ b/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; }) { if (entity.kind === "group") { return ( @@ -45,7 +47,12 @@ export default function EntitySwitch({ {entity.children?.map((entity, i) => ( - + ))} @@ -58,7 +65,7 @@ export default function EntitySwitch({ { - workspace.setRoute(entity.id); + setRoute(entity.id); }} > {workspace.entities[entity.id].name} diff --git a/src/hooks/workspace.ts b/src/hooks/workspace.ts index 8dd9510..5d1b435 100644 --- a/src/hooks/workspace.ts +++ b/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(() => - loadWorkspaceFromLocalStorage(workspaceId), - ); +export function useWorkspace() { + const [workspace, setWorkspace] = useState(); 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 }; }