Added useQuery

tesfa/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@tanstack/react-query": "^5.89.0",
+    "@tanstack/react-query-devtools": "^5.90.2",
     "@types/jsonwebtoken": "^9.0.10",
     "datepicker": "^0.0.0",
     "framer-motion": "^12.23.16",
@@ -36,7 +37,7 @@
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/geojson": "^7946.0.16",

tesfa/src/app/hooks/useFetchOrganization.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { fetchProfile } from "../utils/fetchOrganizations";
 
 export type User = {
@@ -12,29 +12,17 @@ export type User = {
 };
 
 const useFetchOrganization = () => {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const refetch = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await fetchProfile();
-      setUser(data);
-      setError(null);
-    } catch (error) {
-      setError((error as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-
-    refetch();
-  }, [refetch]);
-
-  return { user, loading, error, refetch };
+  const {
+    data: user,
+    isLoading: loading,
+    error,
+    refetch,
+  } = useQuery<User>({
+    queryKey: ["organizationProfile"],
+    queryFn: fetchProfile,
+  });
+
+  return { user, loading, error: error ? (error as Error).message : null, refetch };
 };
 
-export default useFetchOrganization;
+export default useFetchOrganization;

tesfa/src/app/hooks/useFetchTaskAssignment.ts

@@ -1,83 +1,99 @@
-import { useState, useEffect, useCallback } from "react";
-import { Task, ApiTask } from "../utils/type";
+"use client"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Task, ApiTask, TaskStatus } from "../utils/type";
 import {
   fetchTaskAssignments,
   updateTaskAssignmentStatus,
+  deleteTaskAssignment,
 } from "../utils/fetchTaskAssignment";
-import { TaskStatus } from "../utils/type";
-import { mapApiTask } from "../utils/fetchTasks";
+import { mapApiTask, fetchTasksForAssignments } from "../utils/fetchTasks";
 import { getToken } from "../utils/getToken";
-import { fetchTasksForAssignments } from '../utils/fetchTasks';
-
 
 export const useFetchTaskAssignments = () => {
-  const [assignedTasks, setAssignedTasks] = useState<Task[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    const getAssignedTasks = async () => {
-      setLoading(true);
-      try {
-        const assignments = await fetchTaskAssignments();
-
-        if (!assignments || assignments.length === 0) {
-          setLoading(false);
-          return;
-        }
-
-        const token = getToken();
-        const headers: HeadersInit = {};
-        if (token) {
-          headers["Authorization"] = `Token ${token}`;
-        }
-        const taskPromises = fetchTasksForAssignments(assignments, headers)
+  const queryClient = useQueryClient();
 
-        const tasksData: ApiTask[] = await Promise.all(taskPromises);
-        const formattedTasks = await Promise.all(tasksData.map(mapApiTask));
-        const tasksWithAssignments = formattedTasks.map((task) => {
-          const assignment = assignments.find(
-            (assignment) => assignment.task === parseInt(task.id)
-          );
-          return {
-            ...task,
-            assignmentId: assignment ? assignment.id : undefined,
-            status: assignment ? assignment.status : "pending",
-          };
-        });
-
-        setAssignedTasks(tasksWithAssignments);
-      } catch (error) {
-        console.error("An error occurred during the fetching process:", error);
-        setError(error as Error);
-      } finally {
-        setLoading(false);
+  const { data: assignedTasks, isLoading: loading, error } = useQuery<Task[]>({
+    queryKey: ["taskAssignments"],
+    queryFn: async () => {
+      const assignments = await fetchTaskAssignments();
+      if (!assignments || assignments.length === 0) {
+        return [];
       }
-    };
-    getAssignedTasks();
-  }, []);
 
-  const updateTaskStatus = useCallback(
-    async (taskId: string, newStatus: TaskStatus) => {
-      const task = assignedTasks.find((task) => task.id === taskId);
-      if (task && task.assignmentId) {
-        try {
-          await updateTaskAssignmentStatus(task.assignmentId, newStatus);
-          setAssignedTasks((prevTasks) =>
-            prevTasks.map((task) =>
-              task.id === taskId ? { ...task, status: newStatus } : task
-            )
-          );
-        } catch (error) {
-          console.error(
-            "Failed to update task status, reverting change.",
-            error
-          );
-        }
+      const token = getToken();
+      const headers: HeadersInit = {};
+      if (token) {
+        headers["Authorization"] = `Token ${token}`;
       }
+      const taskPromises = fetchTasksForAssignments(assignments, headers);
+      const tasksData: ApiTask[] = await Promise.all(taskPromises);
+      const formattedTasks = await Promise.all(tasksData.map(mapApiTask));
+      const tasksWithAssignments = formattedTasks.map((task) => {
+        const assignment = assignments.find(
+          (a) => a.task.toString() === task.id
+        );
+        return {
+          ...task,
+          assignmentId: assignment ? assignment.id : undefined,
+          status: assignment ? assignment.status : "pending",
+        };
+      });
+      return tasksWithAssignments;
     },
-    [assignedTasks]
-  );
+  });
 
-  return { assignedTasks, setAssignedTasks, loading, error, updateTaskStatus };
-};
+    const { mutateAsync: updateTaskStatus } = useMutation({
+      mutationFn: ({ taskId, newStatus }: { taskId: string; newStatus: TaskStatus }) => {
+        const task = assignedTasks?.find((t) => t.id === taskId);
+        if (!task || !task.assignmentId) {
+          throw new Error("Task or assignmentId not found for mutation.");
+        }
+        return updateTaskAssignmentStatus(task.assignmentId, newStatus);
+      },
+      onMutate: async ({ taskId, newStatus }) => {
+        await queryClient.cancelQueries({ queryKey: ["taskAssignments"] });
+        const previousTasks = queryClient.getQueryData<Task[]>(["taskAssignments"]);
+        queryClient.setQueryData<Task[]>(["taskAssignments"], (oldTasks = []) =>
+          oldTasks.map((task) =>
+            task.id === taskId ? { ...task, status: newStatus } : task
+          )
+        );
+        return { previousTasks };
+      },
+      onError: (err, variables, context) => {
+        if (context?.previousTasks) {
+          queryClient.setQueryData(["taskAssignments"], context.previousTasks);
+        }
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey: ["taskAssignments"] });
+      },
+    });
+
+    const { mutateAsync: deleteTask } = useMutation({
+      mutationFn: (assignmentId: number) => deleteTaskAssignment(assignmentId),
+      onMutate: async (assignmentId) => {
+        await queryClient.cancelQueries({ queryKey: ["taskAssignments"] });
+        const previousTasks = queryClient.getQueryData<Task[]>(["taskAssignments"]);
+        queryClient.setQueryData<Task[]>(["taskAssignments"], (oldTasks = []) =>
+          oldTasks.filter((task) => task.assignmentId !== assignmentId)
+        );
+        return { previousTasks };
+      },
+      onError: (err, variables, context) => {
+        if (context?.previousTasks) {
+          queryClient.setQueryData(["taskAssignments"], context.previousTasks);
+        }
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey: ["taskAssignments"] });
+      },
+    });
+  return {
+    assignedTasks: assignedTasks || [],
+    loading,
+    error,
+    updateTaskStatus,
+    deleteTask,
+  };
+};