task list and create

src/pages/taskmanager/workspace.tsx

@@ -5,8 +5,9 @@ import AddNewColumn from "./components/AddNewColumn";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
 import TaskDetailModal from "./components/task-detail/TaskDetailModal";
-import tasksData from "./data/tasks.json";
 import { useGetProject } from "./project/hooks/useProjectData";
+import { mapTaskItemToTask } from "./task/utils/mapTaskItemToTask";
+import type { TaskItemType } from "./task/types/TaskTypes";
 import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes";
 import type { Column as ColumnType, Task } from "./types";
 import { reorderColumns } from "./utils/reorderColumns";
@@ -16,6 +17,10 @@ const Workspace: FC = () => {
   const { slug: projectId = "" } = useParams<{ slug: string }>();
   const { data: project, isPending } = useGetProject(projectId);
   const [columns, setColumns] = useState<ColumnType[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
+  const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
 
   useEffect(() => {
     if (!project?.data?.taskPhases) return;
@@ -31,10 +36,18 @@ const Workspace: FC = () => {
         })),
     );
   }, [project?.data?.taskPhases]);
-  const [tasks, setTasks] = useState<Task[]>(tasksData.tasks as Task[]);
-  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
-  const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
-  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+
+  useEffect(() => {
+    if (!project?.data?.taskPhases) return;
+
+    const apiTasks = project.data.taskPhases.flatMap((phase) =>
+      (phase.tasks ?? []).map((task, index) =>
+        mapTaskItemToTask(task as TaskItemType, phase.id, index),
+      ),
+    );
+
+    setTasks(apiTasks);
+  }, [project?.data?.taskPhases]);
 
   const tasksByColumn = useMemo(() => {
     return columns.reduce<Record<string, Task[]>>((acc, column) => {
@@ -91,6 +104,13 @@ const Workspace: FC = () => {
     }
   };
 
+  const handleTaskCreated = (task: TaskItemType, taskPhaseId: string) => {
+    setTasks((prev) => [
+      ...prev,
+      mapTaskItemToTask(task, taskPhaseId, prev.filter((item) => item.columnId === taskPhaseId).length),
+    ]);
+  };
+
   const selectedTaskColumn = selectedTask ? columns.find((column) => column.id === selectedTask.columnId) : null;
 
   if (isPending) {
@@ -118,6 +138,7 @@ const Workspace: FC = () => {
               onColumnDrop={handleColumnDrop}
               onTaskClick={setSelectedTask}
               onColumnDeleted={handleColumnDeleted}
+              onTaskCreated={handleTaskCreated}
             />
           ))}