Router

src/app/workspace/page.tsx

@@ -42,7 +42,7 @@ export default function Workspace() {
         </div>
       </SidebarTrigger>
 
-      <Router workspace={workspace} />
+      <Router workspace={workspace} route={route} />
     </AppSidebar>
   ) : (
     <main

src/components/Router.tsx

@@ -1,44 +1,94 @@
 "use client";
 
-import { Workspace } from "@/hooks/workspace";
+import { Route, Task, Workspace } from "@/lib/types";
-import { Task } from "@/lib/types";
 import TaskView from "./view/TaskView";
 import DocView from "./view/DocView";
+import { OutputData } from "@editorjs/editorjs";
 
 const id = (prefix = "t") =>
   `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 
-export default function Router({ workspace }: { workspace: Workspace }) {
+export default function Router({
-  const entity = workspace.entities[workspace.route];
+  route,
-  switch (entity.kind) {
+  workspace,
-    case "todo":
+  setWorkspace,
-      const createTask = (status: string) => {
+}: {
+  route: Route;
+  workspace: Workspace;
+  setWorkspace: React.Dispatch<React.SetStateAction<Workspace>>;
+}) {
+  const entityId = route.entity;
+  const entity = entityId ? workspace.entities[entityId] : null;
+
+  if (!entity || !entityId) return null;
+
+  const updateEntity = (updater: (e: any) => any) => {
+    setWorkspace((prev) => {
+      const updated = updater(prev.entities[entityId]);
+
+      return {
+        ...prev,
+        updatedAt: Date.now(),
+        entities: {
+          ...prev.entities,
+          [entityId]: updated,
+        },
+      };
+    });
+  };
+
+  switch (entity.type) {
+    case "todo": {
+      const createTask = (statusId: string) => {
         const task: Task = {
           id: id(),
           title: "New task",
-          status: status,
+          statusId,
+          tagIds: [],
+          createdAt: new Date().getTime(),
+          updatedAt: new Date().getTime(),
         };
-        entity.setTasks((c: Task[]) => [...c, task]);
+
+        updateEntity((e) => ({
+          ...e,
+          tasks: [...e.tasks, task],
+        }));
+      };
+
+      const setTasks = (tasks: Task[]) => {
+        updateEntity((e) => ({
+          ...e,
+          tasks,
+        }));
       };
 
       return (
         <TaskView
-          key={entity.name}
+          key={entity.id}
           tasks={entity.tasks}
-          setTasks={entity.setTasks}
+          setTasks={setTasks}
           createTask={createTask}
-          tags={{
+          tags={entity.tags}
-            website: { color: "yellow", name: "Website" },
-            api: { color: "purple", name: "API" },
-            app: { color: "blue", name: "App" },
-          }}
         />
       );
-    case "doc":
+    }
+
+    case "doc": {
+      const setDoc = (doc: OutputData) => {
+        updateEntity((e) => ({
+          ...e,
+          doc,
+        }));
+      };
+
       return (
-        <div className="h-full w-3xl mx-auto bg-accent/20 rounded-2xl p-4">
+        <div className="h-full w-3xl mx-auto bg-card rounded-2xl p-6 border">
-          <DocView key={entity.name} doc={entity.doc} setDoc={entity.setDoc} />
+          <DocView key={entity.id} doc={entity.content} setDoc={setDoc} />
         </div>
       );
     }
+
+    default:
+      return null;
+  }
 }

src/components/view/TaskView.tsx

@@ -1,15 +1,20 @@
 "use client";
 
-import { SetState, Task } from "@/lib/types";
+import { Tag, TagId, Task, TaskId } from "@/lib/types";
 import { Color } from "@/lib/ui/color";
 import BoardView from "./board/BoardView";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { TableView } from "./table/TableView";
 
 export type TaskViewProps = {
-  tags: Record<string, { color: Color; name: string }>;
+  tags: Record<TagId, Tag>;
-  tasks: Task[];
+
-  setTasks: SetState<Task[]>;
+  tasks: Record<TaskId, Task>;
+
+  /** Replace entire task array */
+  setTasks: (tasks: Task[]) => void;
+
+  /** Create a new task with a status */
   createTask: (status: string) => void;
 };
 
@@ -20,13 +25,14 @@ export default function TaskView({
   createTask,
 }: TaskViewProps) {
   return (
-    <div className="px-6 pt-3">
+    <div className="px-6 pt-4">
-      <Tabs defaultValue="board">
+      <Tabs defaultValue="board" className="w-full">
-        <TabsList>
+        <TabsList className="mb-4">
           <TabsTrigger value="board">Board</TabsTrigger>
           <TabsTrigger value="table">Table</TabsTrigger>
         </TabsList>
-        <TabsContent value="board">
+
+        <TabsContent value="board" className="mt-0">
           <BoardView
             tasks={tasks}
             setTasks={setTasks}
@@ -34,7 +40,8 @@ export default function TaskView({
             tags={tags}
           />
         </TabsContent>
-        <TabsContent value="table">
+
+        <TabsContent value="table" className="mt-0">
           <TableView
             tasks={tasks}
             setTasks={setTasks}