Router

src/components/Router.tsx

@@ -1,44 +1,94 @@
 "use client";
 
-import { Workspace } from "@/hooks/workspace";
-import { Task } from "@/lib/types";
+import { Route, Task, Workspace } 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 }) {
-  const entity = workspace.entities[workspace.route];
-  switch (entity.kind) {
-    case "todo":
-      const createTask = (status: string) => {
+export default function Router({
+  route,
+  workspace,
+  setWorkspace,
+}: {
+  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={{
-            website: { color: "yellow", name: "Website" },
-            api: { color: "purple", name: "API" },
-            app: { color: "blue", name: "App" },
-          }}
+          tags={entity.tags}
         />
       );
-    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">
-          <DocView key={entity.name} doc={entity.doc} setDoc={entity.setDoc} />
+        <div className="h-full w-3xl mx-auto bg-card rounded-2xl p-6 border">
+          <DocView key={entity.id} doc={entity.content} setDoc={setDoc} />
         </div>
       );
+    }
+
+    default:
+      return null;
   }
 }