taskphase crate and delete

src/pages/taskmanager/components/Column.tsx

@@ -11,6 +11,7 @@ import Task from "./Task";
 
 type Props = {
   column: ColumnType;
+  projectId: string;
   tasks: TaskType[];
   draggedTaskId: string | null;
   draggedColumnId: string | null;
@@ -26,6 +27,7 @@ type Props = {
 
 const Column: FC<Props> = ({
   column,
+  projectId,
   tasks,
   draggedTaskId,
   draggedColumnId,
@@ -129,16 +131,19 @@ const Column: FC<Props> = ({
   };
 
   const handleDeleteColumn = () => {
-    deleteTaskPhase.mutate(column.id, {
-      onSuccess: () => {
-        onColumnDeleted?.(column.id);
-        setIsDeleteConfirmOpen(false);
-        toast.success(t("taskmanager.column_deleted"));
+    deleteTaskPhase.mutate(
+      { id: column.id, projectId },
+      {
+        onSuccess: () => {
+          onColumnDeleted?.(column.id);
+          setIsDeleteConfirmOpen(false);
+          toast.success(t("taskmanager.column_deleted"));
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
       },
-      onError: (error: ErrorType) => {
-        toast.error(error.response?.data?.error.message[0]);
-      },
-    });
+    );
   };
 
   return (

src/pages/taskmanager/project/types/ProjectTypes.ts

@@ -37,6 +37,8 @@ export type ProjectTaskType = unknown;
 export type ProjectTaskPhaseType = {
   id: string;
   name: string;
+  order: number;
+  color: string;
   tasks: ProjectTaskType[];
 };
 

src/pages/taskmanager/task-phase/hooks/useTaskPhaseData.ts

@@ -11,6 +11,7 @@ export const useCreateTaskPhase = () => {
       queryClient.invalidateQueries({
         queryKey: ["task-phases", variables.projectId],
       });
+      queryClient.invalidateQueries({ queryKey: ["project", variables.projectId] });
     },
   });
 };
@@ -19,9 +20,9 @@ export const useDeleteTaskPhase = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (id: string) => api.deleteTaskPhase(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["task-phases"] });
+    mutationFn: ({ id }: { id: string; projectId: string }) => api.deleteTaskPhase(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["project", variables.projectId] });
     },
   });
 };

src/pages/taskmanager/workspace.tsx

@@ -1,5 +1,6 @@
-import { useMemo, useState, type FC } from "react";
+import { useEffect, useMemo, useState, type FC } from "react";
 import { useParams } from "react-router-dom";
+import PageLoading from "../../components/PageLoading";
 import AddNewColumn from "./components/AddNewColumn";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
@@ -7,14 +8,29 @@ import TaskDetailModal from "./components/task-detail/TaskDetailModal";
 import tasksData from "./data/tasks.json";
 import { useGetProject } from "./project/hooks/useProjectData";
 import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes";
-import type { Task, WorkspaceData } from "./types";
+import type { Column as ColumnType, Task } from "./types";
 import { reorderColumns } from "./utils/reorderColumns";
 import { reorderTasks } from "./utils/reorderTasks";
 
 const Workspace: FC = () => {
   const { slug: projectId = "" } = useParams<{ slug: string }>();
-  const { data: project } = useGetProject(projectId);
-  const [columns, setColumns] = useState((tasksData as WorkspaceData).columns);
+  const { data: project, isPending } = useGetProject(projectId);
+  const [columns, setColumns] = useState<ColumnType[]>([]);
+
+  useEffect(() => {
+    if (!project?.data?.taskPhases) return;
+
+    setColumns(
+      [...project.data.taskPhases]
+        .sort((a, b) => a.order - b.order)
+        .map((phase) => ({
+          id: phase.id,
+          title: phase.name,
+          color: phase.color,
+          order: phase.order,
+        })),
+    );
+  }, [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);
@@ -77,6 +93,10 @@ const Workspace: FC = () => {
 
   const selectedTaskColumn = selectedTask ? columns.find((column) => column.id === selectedTask.columnId) : null;
 
+  if (isPending) {
+    return <PageLoading />;
+  }
+
   return (
     <div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
@@ -86,6 +106,7 @@ const Workspace: FC = () => {
             <Column
               key={column.id}
               column={column}
+              projectId={projectId}
               tasks={tasksByColumn[column.id] ?? []}
               draggedTaskId={draggedTaskId}
               draggedColumnId={draggedColumnId}