feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -0,0 +1,116 @@
+// client/src/components/task-center/task-center.container.jsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMutation, 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 TaskCenterComponent from "./task-center.component";
+import dayjs from "../../utils/day";
+
+const POLL_INTERVAL = 60; // seconds
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
+  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 {
+      assigned_to: { _eq: assignedToId },
+      deleted: { _eq: false },
+      ...(showIncompleteOnly ? { completed: { _eq: false } } : {})
+    };
+  }, [assignedToId, showIncompleteOnly]);
+
+  const {
+    data,
+    loading: queryLoading,
+    refetch
+  } = useQuery(QUERY_MY_TASKS_PAGINATED, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      where,
+      offset: 0,
+      limit: 50,
+      order: [{ created_at: "desc" }]
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : dayjs.duration(POLL_INTERVAL, "seconds").asMilliseconds()
+  });
+
+  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);
+      if (task) {
+        window.location.href = `/manage/jobs/${task.jobid}`;
+      }
+    },
+    [tasks]
+  );
+
+  return (
+    <TaskCenterComponent
+      visible={visible}
+      onClose={onClose}
+      tasks={tasks}
+      loading={loading || queryLoading}
+      showIncompleteOnly={showIncompleteOnly}
+      toggleIncomplete={handleToggleIncomplete}
+      markAllComplete={handleMarkAllComplete}
+      onTaskClick={handleTaskClick}
+    />
+  );
+};
+
+export default connect(mapStateToProps)(TaskCenterContainer);