Improved task structure

src/components/view/board/BoardView.tsx

@@ -18,19 +18,12 @@ const id = (prefix = "t") =>
   `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 
 export default function BoardView() {
-  const [columns, setColumns] = useState<Record<string, Task[]>>({
+  const [tasks, setTasks] = useState<Task[]>([]);
-    todo: [],
-    inprogress: [],
-    done: [],
-  });
 
   useEffect(() => {
-    setColumns({
+    setTasks([
-      todo: [
+      { id: id(), title: "Buy groceries", status: "todo" },
-        { id: id(), title: "Buy groceries" },
+      { id: id(), title: "Plan sprint", status: "todo" },
-        { id: id(), title: "Plan sprint" },
-      ],
-      inprogress: [
       {
         id: id(),
         title: "Build header",
@@ -42,35 +35,36 @@ export default function BoardView() {
           { name: "App", color: "purple" },
           { name: "Rust", color: "orange" },
         ],
+        status: "inprogress",
       },
-      ],
+    ]);
-      done: [],
-    });
   }, []);
 
   function onDragEnd(result: any) {
-    const { source, destination } = result;
+    const { draggableId, source, destination } = result;
     if (!destination) return;
 
-    const sourceCol = source.droppableId;
+    setTasks((tasks) => {
-    const destCol = destination.droppableId;
+      const taskIndex = tasks.findIndex((task) => task.id === draggableId);
+      const task = tasks[taskIndex];
+      tasks.splice(taskIndex, 1);
 
-    if (sourceCol === destCol) {
+      const destinationGroupStartIndex = tasks.findIndex(
-      const items = Array.from(columns[sourceCol]);
+        (t) => t.status === destination.droppableId
-      const [moved] = items.splice(source.index, 1);
+      );
-      items.splice(destination.index, 0, moved);
+
-      setColumns({ ...columns, [sourceCol]: items });
+      const insertIndex =
-    } else {
+        destinationGroupStartIndex === -1
-      const sourceItems = Array.from(columns[sourceCol]);
+          ? tasks.length
-      const destItems = Array.from(columns[destCol]);
+          : destinationGroupStartIndex + destination.index;
-      const [moved] = sourceItems.splice(source.index, 1);
+
-      destItems.splice(destination.index, 0, moved);
+      tasks.splice(insertIndex, 0, {
-      setColumns({
+        ...task,
-        ...columns,
+        status: destination.droppableId,
-        [sourceCol]: sourceItems,
+      });
-        [destCol]: destItems,
+
+      return tasks;
     });
-    }
   }
 
   return (
@@ -93,11 +87,12 @@ export default function BoardView() {
                         className="ml-auto"
                         variant="outline"
                         onClick={() => {
-                          const t: Task = { id: id(), title: "New task" };
+                          const t: Task = {
-                          setColumns((c) => ({
+                            id: id(),
-                            ...c,
+                            title: "New task",
-                            [colKey]: [...c[colKey], t],
+                            status: colKey,
-                          }));
+                          };
+                          setTasks((c) => [...c, t]);
                         }}
                       >
                         <PlusIcon />
@@ -106,7 +101,9 @@ export default function BoardView() {
                   </CardHeader>
                   <CardContent>
                     <div className="flex flex-col gap-3">
-                      {columns[colKey].map((task, index) => (
+                      {tasks
+                        .filter((task) => task.status === colKey)
+                        .map((task, index) => (
                           <Draggable
                             key={task.id}
                             draggableId={task.id}
@@ -115,10 +112,9 @@ export default function BoardView() {
                             {(provided) => (
                               <BoardTask
                                 setTask={(t) =>
-                                setColumns((cols) => {
+                                  setTasks((cols) =>
-                                  cols[colKey][index] = t;
+                                    cols.map((c) => (c.id === t.id ? t : c))
-                                  return cols;
+                                  )
-                                })
                                 }
                                 provided={provided}
                                 task={task}
@@ -127,7 +123,8 @@ export default function BoardView() {
                           </Draggable>
                         ))}
                       {provided.placeholder}
-                      {columns[colKey].length === 0 && (
+                      {tasks.filter((task) => task.status === colKey).length ===
+                        0 && (
                         <p className="text-sm text-muted-foreground">
                           No tasks
                         </p>

src/lib/types.ts

@@ -3,6 +3,7 @@ import { Color } from "./ui/color";
 export type Task = {
   id: string;
   title: string;
+  status: string;
   description?: string;
   tags?: { name: string; color: Color }[];
 };