Progress bar,pcp done!

wizelineacademy · Jun 7, 2024 · dff955b · dff955b
1 parent 0202fb5
commit dff955b
Showing 1 changed file with 95 additions and 18 deletions.
diff --git a/app/(base)/pcp/page.tsx b/app/(base)/pcp/page.tsx
@@ -30,6 +30,8 @@ const statusOptions = [
 
 const PCP = () => {
   const [projectId, setProjectId] = useState<number>();
+  const queryClient = useQueryClient();
+  const [progressPercentage, setProgressPercentage] = useState<number>(0);
 
   const projectsQuery = useQuery({
     queryKey: ["projects"],
@@ -49,14 +51,38 @@ const PCP = () => {
     retry: false,
     refetchOnWindowFocus: false,
   });
+  const { data: tasksData } = useQuery({
+    queryKey: ["tasks", projectId],
+    queryFn: () => getUserTasksForCurrentSprintByProjectId(projectId || 0),
+    retry: false,
+    refetchOnWindowFocus: false,
+    enabled: !!projectId,
+  });
+
+  useEffect(() => {
+    if (tasksData) {
+      const doneTasks = tasksData.filter(
+        (task) => task.status === "DONE",
+      ).length;
+      const totalTasks = tasksData.length;
+      setProgressPercentage((doneTasks / totalTasks) * 100);
+    } else {
+      setProgressPercentage(0);
+    }
+  }, [tasksData]);
+
+  useEffect(() => {
+    if (projectId) {
+      queryClient.invalidateQueries({ queryKey: ["tasks", projectId] });
+      queryClient.invalidateQueries({ queryKey: ["sprintSurvey", projectId] });
+    }
+  }, [projectId, queryClient]);
 
   const scheduledAt = sprintSurveyQuery.data?.scheduledAt;
   const formattedDate = scheduledAt
     ? new Date(scheduledAt).toLocaleDateString("es-ES")
     : "";
 
-  const progressPercentage = 100;
-
   if (
     projectsQuery.isError ||
     (projectsQuery.data && projectsQuery.data.length === 0)
@@ -113,30 +139,76 @@ const PCP = () => {
 
       {projectId && (
         <>
-          <PCPTasks projectId={projectId} />
+          <PCPTasks
+            projectId={projectId}
+            setProgressPercentage={setProgressPercentage}
+          />
           <PCPResources projectId={projectId} />
         </>
       )}
     </div>
   );
 };
 
-const PCPTasks = ({ projectId }: { projectId: number }) => {
+const PCPTasks = ({
+  projectId,
+  setProgressPercentage,
+}: {
+  projectId: number;
+  setProgressPercentage: (percentage: number) => void;
+}) => {
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
   const openDialog = () => {
     setIsDialogOpen(true);
   };
   const closeDialog = () => {
     setIsDialogOpen(false);
   };
+  const queryClient = useQueryClient();
 
-  const tasksQuery = useQuery({
+  const {
+    data: tasksData,
+    error: tasksError,
+    isLoading: tasksLoading,
+  } = useQuery({
     queryKey: ["tasks", projectId],
     queryFn: () => getUserTasksForCurrentSprintByProjectId(projectId),
     retry: false,
     refetchOnWindowFocus: false,
   });
 
+  useEffect(() => {
+    if (tasksData) {
+      const doneTasks = tasksData.filter(
+        (task) => task.status === "DONE",
+      ).length;
+      const totalTasks = tasksData.length;
+      setProgressPercentage((doneTasks / totalTasks) * 100);
+    } else {
+      setProgressPercentage(0);
+    }
+  }, [tasksData, setProgressPercentage]);
+
+  const mutation = useMutation({
+    mutationFn: updateTask,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["tasks", projectId] });
+      await queryClient.invalidateQueries({
+        queryKey: ["tasks-history", projectId],
+      });
+
+      const tasks = queryClient.getQueryData<SelectPipTask[]>([
+        "tasks",
+        projectId,
+      ]);
+      if (tasks) {
+        const doneTasks = tasks.filter((task) => task.status === "DONE").length;
+        const totalTasks = tasks.length;
+        setProgressPercentage((doneTasks / totalTasks) * 100);
+      }
+    },
+  });
+
   return (
     <section id="pip-tasks" className="mt-5 w-full">
       <div className="mb-6">
@@ -150,16 +222,21 @@ const PCPTasks = ({ projectId }: { projectId: number }) => {
           </button>
         </div>
 
-        {tasksQuery.isLoading ? (
+        {tasksLoading ? (
           <p>loading...</p>
-        ) : tasksQuery.isError ? (
-          <NoDataCard text={tasksQuery.error.message} />
+        ) : tasksError ? (
+          <NoDataCard text={tasksError.message} />
         ) : (
-          tasksQuery.data && (
+          tasksData && (
             <div className="mt-2">
               <div className="mb-10 mt-2 flex flex-row gap-12 overflow-x-auto whitespace-nowrap pb-3">
-                {tasksQuery.data.map((task) => (
-                  <PCPTask key={task.id} task={task} projectId={projectId} />
+                {tasksData.map((task) => (
+                  <PCPTask
+                    key={task.id}
+                    task={task}
+                    projectId={projectId}
+                    mutateAsync={mutation.mutateAsync}
+                  />
                 ))}
               </div>
             </div>
@@ -303,19 +380,19 @@ const PCPTasksDialogContent = ({ projectId }: { projectId: number }) => {
 const PCPTask = ({
   task,
   projectId,
+  mutateAsync,
 }: {
   task: SelectPipTask;
   projectId: number;
+  mutateAsync: (data: {
+    taskId: number;
+    newStatus: "PENDING" | "IN_PROGRESS" | "DONE";
+  }) => Promise<void>;
 }) => {
-  const queryClient = useQueryClient();
-
-  const { mutateAsync } = useMutation({
-    mutationFn: updateTask,
-  });
-
-  const selectedStatus =
+  const selectedStatus: { label: string; color: string; value: string } =
     statusOptions.find((option) => option.value === task.status) ||
     statusOptions[0];
+  const queryClient = useQueryClient(); // Asegúrate de obtener queryClient aquí
 
   return (
     <div className="box-border h-48 w-52 shrink-0 rounded-xl bg-white p-4 shadow-lg">