Abstract tasks to a context

src/components/Todo.jsx

@@ -19,8 +19,10 @@ import {
   IconDeleteStroked,
   IconCaretdown,
 } from "@douyinfe/semi-icons";
-import { StateContext, TaskContext } from "../pages/Editor";
+import { StateContext } from "../pages/Editor";
 import { State } from "../data/data";
+import useTasks from "../hooks/useTasks";
+
 export default function Todo() {
   const Priority = {
     NONE: 0,
@@ -36,7 +38,7 @@ export default function Todo() {
   };
   const [activeTask, setActiveTask] = useState(-1);
   const [, setSortOrder] = useState(SortOrder.ORIGINAL);
-  const { tasks, setTasks, updateTask } = useContext(TaskContext);
+  const { tasks, setTasks, updateTask } = useTasks();
   const { setState } = useContext(StateContext);
 
   const priorityLabel = (p) => {

src/context/TasksContext.jsx

@@ -0,0 +1,18 @@
+import { createContext, useState } from "react";
+
+export const TasksContext = createContext(null);
+
+export default function TasksContextProvider({ children }) {
+  const [tasks, setTasks] = useState([]);
+
+  const updateTask = (id, values) =>
+    setTasks((prev) =>
+      prev.map((task, i) => (id === i ? { ...task, ...values } : task))
+    );
+
+  return (
+    <TasksContext.Provider value={{ tasks, setTasks, updateTask }}>
+      {children}
+    </TasksContext.Provider>
+  );
+}

src/hooks/useTasks.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { TasksContext } from "../context/TasksContext";
+
+export default function useTasks() {
+  return useContext(TasksContext);
+}

src/pages/Editor.jsx

@@ -21,9 +21,10 @@ import useNotes from "../hooks/useNotes";
 import NotesContextProvider from "../context/NotesContext";
 import useTypes from "../hooks/useTypes";
 import TypesContextProvider from "../context/TypesContext";
+import useTasks from "../hooks/useTasks";
+import TasksContextProvider from "../context/TasksContext";
 
 export const StateContext = createContext();
-export const TaskContext = createContext();
 
 export default function Editor() {
   return (
@@ -31,15 +32,17 @@ export default function Editor() {
       <TransformContextProvider>
         <UndoRedoContextProvider>
           <SelectContextProvider>
-            <AreasContextProvider>
-              <NotesContextProvider>
-                <TypesContextProvider>
-                  <TablesContextProvider>
-                    <WorkSpace />
-                  </TablesContextProvider>
-                </TypesContextProvider>
-              </NotesContextProvider>
-            </AreasContextProvider>
+            <TasksContextProvider>
+              <AreasContextProvider>
+                <NotesContextProvider>
+                  <TypesContextProvider>
+                    <TablesContextProvider>
+                      <WorkSpace />
+                    </TablesContextProvider>
+                  </TypesContextProvider>
+                </NotesContextProvider>
+              </AreasContextProvider>
+            </TasksContextProvider>
           </SelectContextProvider>
         </UndoRedoContextProvider>
       </TransformContextProvider>
@@ -55,7 +58,7 @@ function WorkSpace() {
   const { types, setTypes } = useTypes();
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
-  const [tasks, setTasks] = useState([]);
+  const { tasks, setTasks } = useTasks();
   const { layout } = useLayout();
   const { areas, setAreas } = useAreas();
   const { settings, setSettings } = useSettings();
@@ -70,11 +73,6 @@ function WorkSpace() {
     if (w > 340) setWidth(w);
   };
 
-  const updateTask = (id, values) =>
-    setTasks((prev) =>
-      prev.map((task, i) => (id === i ? { ...task, ...values } : task))
-    );
-
   useEffect(() => {
     if (
       tables?.length === 0 &&
@@ -209,7 +207,7 @@ function WorkSpace() {
             setNotes(d.notes);
             setAreas(d.areas);
             setTypes(d.types);
-            setTasks(d.todos);
+            setTasks(d.todos ?? []);
             setTransform({ pan: d.pan, zoom: d.zoom });
             window.name = `d ${d.id}`;
           } else {
@@ -233,7 +231,7 @@ function WorkSpace() {
             setRelationships(diagram.references);
             setAreas(diagram.areas);
             setNotes(diagram.notes);
-            setTasks(diagram.todos);
+            setTasks(diagram.todos ?? []);
             setTransform({
               pan: diagram.pan,
               zoom: diagram.zoom,
@@ -261,7 +259,7 @@ function WorkSpace() {
             setTypes(diagram.types);
             setRelationships(diagram.relationships);
             setAreas(diagram.subjectAreas);
-            setTasks(diagram.tasks);
+            setTasks(diagram.todos ?? []);
             setNotes(diagram.notes);
             setTransform({
               zoom: 1,
@@ -310,21 +308,20 @@ function WorkSpace() {
     setAreas,
     setNotes,
     setTypes,
+    setTasks,
   ]);
 
   return (
     <StateContext.Provider value={{ state, setState }}>
       <div className="h-[100vh] flex flex-col overflow-hidden theme">
-        <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
-          <ControlPanel
-            diagramId={id}
-            setDiagramId={setId}
-            title={title}
-            setTitle={setTitle}
-            lastSaved={lastSaved}
-            setLastSaved={setLastSaved}
-          />
-        </TaskContext.Provider>
+        <ControlPanel
+          diagramId={id}
+          setDiagramId={setId}
+          title={title}
+          setTitle={setTitle}
+          lastSaved={lastSaved}
+          setLastSaved={setLastSaved}
+        />
         <div
           className="flex h-full overflow-y-auto"
           onMouseUp={() => setResize(false)}