feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -7,9 +7,10 @@ import { useSocket } from "../../contexts/SocketIO/useSocket";
 import { useIsEmployee } from "../../utils/useIsEmployee";
 import TaskCenterComponent from "./task-center.component";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import { QUERY_MY_ACTIVE_TASKS_PAGINATED } from "../../graphql/tasks.queries";
+import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from "../../graphql/tasks.queries";
 
 const POLL_INTERVAL = 60 * 1000; // milliseconds
+const LIMIT = 50; // Tasks per page for no-due-date tasks
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -30,35 +31,55 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
     return employee?.id || null;
   }, [bodyshop, currentUser]);
 
-  const { data, loading, fetchMore } = useQuery(QUERY_MY_ACTIVE_TASKS_PAGINATED, {
+  // Query 1: Tasks with due dates
+  const { data: dueDateData, loading: dueLoading } = useQuery(QUERY_TASKS_WITH_DUE_DATES, {
     variables: {
       bodyshop: bodyshop?.id,
       assigned_to: assignedToId,
-      offset: 0,
-      limit: 50,
-      order: [{ due_date: "asc_nulls_last" }, { created_at: "desc" }]
+      order: [{ due_date: "asc" }, { created_at: "desc" }]
     },
     skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
     fetchPolicy: "cache-and-network",
     pollInterval: isConnected ? 0 : POLL_INTERVAL
   });
 
-  useEffect(() => {
-    if (data?.tasks) {
-      setTasks(data.tasks);
-    }
-  }, [data]);
+  // Query 2: Tasks with no due date (paginated)
+  const {
+    data: noDueDateData,
+    loading: noDueLoading,
+    fetchMore
+  } = useQuery(QUERY_TASKS_NO_DUE_DATE_PAGINATED, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ created_at: "desc" }],
+      limit: LIMIT,
+      offset: 0
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : POLL_INTERVAL
+  });
 
+  // Combine tasks from both queries
+  useEffect(() => {
+    const dueDateTasks = dueDateData?.tasks || [];
+    const noDueDateTasks = noDueDateData?.tasks || [];
+    setTasks([...dueDateTasks, ...noDueDateTasks]);
+  }, [dueDateData, noDueDateData]);
+
+  // Handle pagination for no-due-date tasks
   const handleLoadMore = () => {
     fetchMore({
       variables: {
-        offset: tasks.length
+        offset: noDueDateData?.tasks?.length || 0
       },
       updateQuery: (prev, { fetchMoreResult }) => {
         if (!fetchMoreResult) return prev;
         return {
           ...prev,
-          tasks: [...prev.tasks, ...fetchMoreResult.tasks]
+          tasks: [...prev.tasks, ...fetchMoreResult.tasks],
+          tasks_aggregate: fetchMoreResult.tasks_aggregate
         };
       }
     });
@@ -87,10 +108,10 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
       visible={visible}
       onClose={onClose}
       tasks={tasks}
-      loading={loading}
+      loading={dueLoading || noDueLoading}
       onTaskClick={handleTaskClick}
       onLoadMore={handleLoadMore}
-      totalTasks={data?.tasks_aggregate?.aggregate?.count || 0}
+      totalTasks={noDueDateData?.tasks_aggregate?.aggregate?.count || 0}
       createNewTask={createNewTask}
     />
   );