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>