Working system

src/components/view/board/BoardView.tsx

@@ -7,12 +7,6 @@ import { PlusIcon } from "lucide-react";
 import BoardTask from "./Task";
 import { TaskViewProps } from "../TaskView";
 
-const statusLabels: Record<string, string> = {
-  todo: "To do",
-  inprogress: "In progress",
-  done: "Done",
-};
-
 export default function BoardView({
   tags,
   tasks,
@@ -23,35 +17,37 @@ export default function BoardView({
     const { draggableId, source, destination } = result;
     if (!destination) return;
 
-    setTasks((tasks) => {
-      const taskIndex = tasks.findIndex((task) => task.id === draggableId);
-      const task = tasks[taskIndex];
-      tasks.splice(taskIndex, 1);
+    const task = Object.values(tasks).find((t) => t.id === draggableId);
+    if (!task) return;
 
-      const destinationGroupStartIndex = tasks.findIndex(
-        (t) => t.status === destination.droppableId
-      );
-
-      const insertIndex =
-        destinationGroupStartIndex === -1
-          ? tasks.length
-          : destinationGroupStartIndex + destination.index;
-
-      tasks.splice(insertIndex, 0, {
+    setTasks({
+      ...tasks,
+      [task.id]: {
         ...task,
-        status: destination.droppableId,
-      });
-
-      return tasks;
+        statusId: destination.droppableId,
+        updatedAt: Date.now(),
+      },
     });
   }
 
+  // Group tasks by status, using statuses from first available todo entity
+  const tasksArray = Object.values(tasks);
+  const statusIds = new Set(tasksArray.map((t) => t.statusId));
+
+  // Sort tasks by creation date within each status
+  const tasksByStatus = Array.from(statusIds).map((statusId) => ({
+    statusId,
+    tasks: tasksArray
+      .filter((t) => t.statusId === statusId)
+      .sort((a, b) => a.createdAt - b.createdAt),
+  }));
+
   return (
     <div className="w-full h-full flex flex-col gap-6">
       <DragDropContext onDragEnd={onDragEnd}>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
-          {Object.keys(statusLabels).map((status) => (
-            <Droppable key={status} droppableId={status}>
+          {tasksByStatus.map(({ statusId, tasks: statusTasks }) => (
+            <Droppable key={statusId} droppableId={statusId}>
               {(provided) => (
                 <Card
                   ref={provided.innerRef}
@@ -60,12 +56,12 @@ export default function BoardView({
                 >
                   <CardHeader>
                     <CardTitle className="flex items-center justify-between">
-                      <span>{statusLabels[status]}</span>
+                      <span>{statusId}</span>
                       <Button
                         size="sm"
                         className="ml-auto"
                         variant="outline"
-                        onClick={() => createTask(status)}
+                        onClick={() => createTask(statusId)}
                       >
                         <PlusIcon />
                       </Button>
@@ -73,31 +69,29 @@ export default function BoardView({
                   </CardHeader>
                   <CardContent>
                     <div className="flex flex-col gap-3">
-                      {tasks
-                        .filter((task) => task.status === status)
-                        .map((task, index) => (
-                          <Draggable
-                            key={task.id}
-                            draggableId={task.id}
-                            index={index}
-                          >
-                            {(provided) => (
-                              <BoardTask
-                                setTask={(t) =>
-                                  setTasks((cols) =>
-                                    cols.map((c) => (c.id === t.id ? t : c))
-                                  )
-                                }
-                                provided={provided}
-                                task={task}
-                                tags={tags}
-                              />
-                            )}
-                          </Draggable>
-                        ))}
+                      {statusTasks.map((task, index) => (
+                        <Draggable
+                          key={task.id}
+                          draggableId={task.id}
+                          index={index}
+                        >
+                          {(provided) => (
+                            <BoardTask
+                              setTask={(t) =>
+                                setTasks({
+                                  ...tasks,
+                                  [t.id]: t,
+                                })
+                              }
+                              provided={provided}
+                              task={task}
+                              tags={tags}
+                            />
+                          )}
+                        </Draggable>
+                      ))}
                       {provided.placeholder}
-                      {tasks.filter((task) => task.status === status).length ===
-                        0 && (
+                      {statusTasks.length === 0 && (
                         <p className="text-sm text-muted-foreground">
                           No tasks
                         </p>