feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -1,4 +1,3 @@
-// client/src/components/task-center/task-center.component.jsx
 import { Virtuoso } from "react-virtuoso";
 import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
 import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
@@ -6,12 +5,12 @@ import { useTranslation } from "react-i18next";
 import { forwardRef, useEffect, useRef } from "react";
 import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 import day from "../../utils/day.js";
-import "./task-center.styles.scss"; // You can clone this from notification styles for now
+import "./task-center.styles.scss";
 
 const { Text, Title } = Typography;
 
 const TaskCenterComponent = forwardRef(
-  ({ visible, onClose, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
+  ({ visible, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
     const { t } = useTranslation();
     const virtuosoRef = useRef(null);
 
@@ -21,9 +20,12 @@ const TaskCenterComponent = forwardRef(
       }
     }, [showIncompleteOnly]);
 
+    // Filter tasks based on showIncompleteOnly
+    const filteredTasks = showIncompleteOnly ? tasks.filter((task) => !task.completed) : tasks;
+
     const renderTask = (index, task) => {
       const handleClick = () => {
-        onTaskClick(task.id);
+        onTaskClick(task.id); // Use the prop handler
       };
 
       return (
@@ -80,8 +82,8 @@ const TaskCenterComponent = forwardRef(
         <Virtuoso
           ref={virtuosoRef}
           style={{ height: "400px", width: "100%" }}
-          data={tasks}
-          totalCount={tasks.length}
+          data={filteredTasks}
+          totalCount={filteredTasks.length}
           itemContent={renderTask}
         />
       </div>

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

@@ -1,4 +1,3 @@
-// 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";
@@ -10,6 +9,7 @@ import { useNotification } from "../../contexts/Notifications/notificationContex
 import { MUTATION_TOGGLE_TASK_COMPLETED, 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
 
 const POLL_INTERVAL = 60; // seconds
 
@@ -18,7 +18,11 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
+const mapDispatchToProps = (dispatch) => ({
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+});
+
+const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskUpsertContext }) => {
   const [tasks, setTasks] = useState([]);
   const [showIncompleteOnly, setShowIncompleteOnly] = useState(true);
   const [loading, setLoading] = useState(false);
@@ -93,10 +97,15 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
     (id) => {
       const task = tasks.find((t) => t.id === id);
       if (task) {
-        window.location.href = `/manage/jobs/${task.jobid}`;
+        setTaskUpsertContext({
+          context: {
+            taskId: task.id,
+            view: true
+          }
+        });
       }
     },
-    [tasks]
+    [tasks, setModalContext]
   );
 
   return (
@@ -108,9 +117,9 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
       showIncompleteOnly={showIncompleteOnly}
       toggleIncomplete={handleToggleIncomplete}
       markAllComplete={handleMarkAllComplete}
-      onTaskClick={handleTaskClick}
+      onTaskClick={handleTaskClick} // Pass the updated handler
     />
   );
 };
 
-export default connect(mapStateToProps)(TaskCenterContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer);