feature/IO-3291-Tasks-Notifications: Checkpoint

client/src/components/task-center/task-center.container.jsx

@@ -1,15 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useMutation, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { useSocket } from "../../contexts/SocketIO/useSocket";
 import { useIsEmployee } from "../../utils/useIsEmployee";
-import { useNotification } from "../../contexts/Notifications/notificationContext";
-import { MUTATION_TOGGLE_TASK_COMPLETED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries";
+import { QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries";
 import TaskCenterComponent from "./task-center.component";
 import dayjs from "../../utils/day";
-import { setModalContext } from "../../redux/modals/modals.actions"; // Import setModalContext
+import { setModalContext } from "../../redux/modals/modals.actions";
 
 const POLL_INTERVAL = 60; // seconds
 
@@ -24,20 +23,28 @@ const mapDispatchToProps = (dispatch) => ({
 
 const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskUpsertContext }) => {
   const [tasks, setTasks] = useState([]);
-  const [showIncompleteOnly, setShowIncompleteOnly] = useState(true);
   const [loading, setLoading] = useState(false);
   const { isConnected } = useSocket();
   const isEmployee = useIsEmployee(bodyshop, currentUser);
-  const notification = useNotification();
-  const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id;
 
-  const where = useMemo(() => {
-    return {
+  // Compute assignedToId with useMemo to ensure stability
+  const assignedToId = useMemo(() => {
+    const employee = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email);
+    if (employee?.id) {
+      console.log("AssignedToId computed:", employee.id); // Debug log
+      return employee.id;
+    }
+    return null;
+  }, [bodyshop, currentUser]);
+
+  const where = useMemo(
+    () => ({
       assigned_to: { _eq: assignedToId },
       deleted: { _eq: false },
-      ...(showIncompleteOnly ? { completed: { _eq: false } } : {})
-    };
-  }, [assignedToId, showIncompleteOnly]);
+      completed: { _eq: false }
+    }),
+    [assignedToId]
+  );
 
   const {
     data,
@@ -50,49 +57,24 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
       where,
       offset: 0,
       limit: 50,
-      order: [{ created_at: "desc" }]
+      order: [{ due_date: "asc_nulls_last" }, { created_at: "desc" }]
     },
-    skip: !bodyshop?.id || !assignedToId || !isEmployee,
+    // Skip query if any required data is missing
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
     fetchPolicy: "cache-and-network",
-    pollInterval: isConnected ? 0 : dayjs.duration(POLL_INTERVAL, "seconds").asMilliseconds()
+    pollInterval: isConnected ? 0 : dayjs.duration(POLL_INTERVAL, "seconds").asMilliseconds(),
+    // Log errors for debugging
+    onError: (error) => {
+      console.error("Query error:", error);
+    }
   });
 
-  const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
-
   useEffect(() => {
     if (data?.tasks) {
       setTasks(data.tasks);
     }
   }, [data]);
 
-  const handleToggleIncomplete = (val) => {
-    setShowIncompleteOnly(val);
-  };
-
-  const handleMarkAllComplete = async () => {
-    setLoading(true);
-    try {
-      const incompleteTasks = tasks.filter((t) => !t.completed);
-      await Promise.all(
-        incompleteTasks.map((task) =>
-          toggleTaskCompleted({
-            variables: {
-              id: task.id,
-              completed: true,
-              completed_at: dayjs().toISOString()
-            }
-          })
-        )
-      );
-      notification.success({ message: "Tasks marked complete" });
-      refetch();
-    } catch (err) {
-      notification.error({ message: "Failed to mark tasks complete" });
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const handleTaskClick = useCallback(
     (id) => {
       const task = tasks.find((t) => t.id === id);
@@ -105,7 +87,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
         });
       }
     },
-    [tasks, setModalContext]
+    [tasks, setTaskUpsertContext]
   );
 
   return (
@@ -114,10 +96,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
       onClose={onClose}
       tasks={tasks}
       loading={loading || queryLoading}
-      showIncompleteOnly={showIncompleteOnly}
-      toggleIncomplete={handleToggleIncomplete}
-      markAllComplete={handleMarkAllComplete}
-      onTaskClick={handleTaskClick} // Pass the updated handler
+      onTaskClick={handleTaskClick}
     />
   );
 };