Replace mock data with API integration in task management

frontend/src/features/task-management/components/TaskManagementTable.tsx

@@ -7,11 +7,13 @@ import TaskManagementTableSection from "./TaskManagementTableSection";
 interface TaskManagementTableProps {
   tasks: Task[];
   clearFilters: () => void;
+  onRowClick?: (taskId: number) => void;
 }
 
 const TaskManagementTable = ({
   tasks,
   clearFilters,
+  onRowClick,
 }: TaskManagementTableProps): React.ReactElement => {
   return (
     <Flex width="100%" overflowX="auto">
@@ -48,7 +50,7 @@ const TaskManagementTable = ({
             </Tr>
           </Tbody>
         ) : (
-          <TaskManagementTableSection tasks={tasks} />
+          <TaskManagementTableSection tasks={tasks} onRowClick={onRowClick} />
         )}
       </Table>
     </Flex>

frontend/src/features/task-management/components/TaskManagementTableSection.tsx

@@ -5,15 +5,22 @@ import { Task } from "../../../types/TaskTypes";
 
 interface TaskManagementTableSectionProps {
   tasks: Task[];
+  onRowClick?: (taskId: number) => void;
 }
 
 const TaskManagementTableSection = ({
   tasks,
+  onRowClick,
 }: TaskManagementTableSectionProps): React.ReactElement => {
   return (
     <Tbody>
       {tasks.map((task) => (
-        <Tr key={task.id}>
+        <Tr
+          key={task.id}
+          onClick={() => onRowClick?.(task.id)}
+          cursor={onRowClick ? "pointer" : "default"}
+          _hover={onRowClick ? { bg: "gray.50" } : undefined}
+        >
           <Td width="20%" py="1rem" px="2.5rem">
             <Text textStyle="body" m={0} noOfLines={1}>
               {task.name}

frontend/src/features/task-management/pages/TaskManagementPage.tsx

@@ -1,16 +1,51 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
+import { Flex, Spinner, useToast } from "@chakra-ui/react";
 import { useHistory } from "react-router-dom";
+import Button from "../../../components/common/Button";
+import { Task } from "../../../types/TaskTypes";
 import TaskManagementTable from "../components/TaskManagementTable";
+import TaskDetailsModal from "../components/TaskDetailsModal";
 import { TableWrapper } from "../../../components/common/table";
-import { mockTasks } from "../../../types/TaskTypes";
-import Button from "../../../components/common/Button";
 import { ADD_TASK_TEMPLATE_PAGE } from "../../../constants/Routes";
+import TaskTemplateAPIClient from "../../../APIClients/TaskTemplateAPIClient";
 
 const TaskManagementPage = (): React.ReactElement => {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const toast = useToast();
+
   const history = useHistory();
   const [filters, setFilters] = useState<Record<string, string[]>>({});
   const [search, setSearch] = useState<string>("");
 
+  const fetchTasks = async () => {
+    setLoading(true);
+    try {
+      const fetchedTasks = await TaskTemplateAPIClient.getAllTaskTemplates();
+      if (fetchedTasks != null) {
+        setTasks(fetchedTasks);
+      }
+    } catch (error) {
+      setErrorMessage(`${error}`);
+      toast({
+        title: "Error",
+        description: "Failed to fetch task templates",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTasks();
+  }, []);
+
   const handleClearFilters = () => {
     setFilters({});
     setSearch("");
@@ -29,7 +64,7 @@
   };
 
   const filteredTasks = useMemo(() => {
-    return mockTasks
+    return tasks
       .filter((task) => {
         return Object.keys(filters).every((key) => {
           const filterVals = filters[key];
@@ -42,33 +77,64 @@
           task.name.toLowerCase().includes(search.toLowerCase()) ||
           task.instructions.toLowerCase().includes(search.toLowerCase()),
       );
-  }, [filters, search]);
+  }, [tasks, filters, search]);
+
+  const handleRowClick = (taskId: number) => {
+    setSelectedTaskId(taskId);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedTaskId(null);
+  };
+
+  if (loading) {
+    return (
+      <Flex justify="center" align="center" height="31.25rem" width="100%">
+        <Spinner size="xl" color="blue.500" />
+      </Flex>
+    );
+  }
 
   return (
-    <TableWrapper
-      filterBarProps={{
-        filterType: "taskManagement",
-        filters,
-        onFilterChange: handleFilterChange,
-        search,
-        onSearchChange: handleSearchChange,
-        searchPlaceholder: "Search for a task...",
-        actionButton: (
-          <Button
-            variant="dark-blue"
-            size="medium"
-            onClick={handleAddTaskTemplate}
-          >
-            Add Task Template
-          </Button>
-        ),
-      }}
-    >
-      <TaskManagementTable
-        tasks={filteredTasks}
-        clearFilters={handleClearFilters}
-      />
-    </TableWrapper>
+    <>
+      <TableWrapper
+        filterBarProps={{
+          filterType: "taskManagement",
+          filters,
+          onFilterChange: handleFilterChange,
+          search,
+          onSearchChange: handleSearchChange,
+          searchPlaceholder: "Search for a task...",
+          actionButton: (
+            <Button
+              variant="dark-blue"
+              size="medium"
+              onClick={handleAddTaskTemplate}
+            >
+              Add Task Template
+            </Button>
+          ),
+        }}
+        errorMessage={errorMessage}
+        onDismissError={() => setErrorMessage(null)}
+      >
+        <TaskManagementTable
+          tasks={filteredTasks}
+          onRowClick={handleRowClick}
+          clearFilters={handleClearFilters}
+        />
+      </TableWrapper>
+
+      {selectedTaskId !== null && (
+        <TaskDetailsModal 
+          taskTemplateId={selectedTaskId}
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
+    </>
   );
 };
 

frontend/src/types/TaskTypes.ts

@@ -60,45 +60,3 @@ export interface TaskTemplateResponseDTO {
   category: TaskCategory;
   instructions?: string;
 }
-
-export const mockTasks: Task[] = [
-  {
-    id: 1,
-    name: "Morning walk",
-    category: TaskCategory.WALK,
-    instructions:
-      "Morning walks with the walker walkwalkwalkwalkwalkwalkwalkwalk…",
-  },
-  {
-    id: 2,
-    name: "Everything is Awesome!",
-    category: TaskCategory.GAMES,
-    instructions:
-      "The focus of Everything is Awesome game is to make the dog feel appreciated and engaged.",
-  },
-  {
-    id: 3,
-    name: "Nap time",
-    category: TaskCategory.PEN_TIME,
-    instructions: "Instructions here blablablabalbblablablablablablalbalb.",
-  },
-  {
-    id: 4,
-    name: "Feeding",
-    category: TaskCategory.HUSBANDRY,
-    instructions:
-      "Feeding the pet instructions here filler text filler text filler text filler text.",
-  },
-  {
-    id: 5,
-    name: "Toilet training",
-    category: TaskCategory.TRAINING,
-    instructions: "Step‐by‐step guide to toilet training your pet goes here.",
-  },
-  {
-    id: 6,
-    name: "blahblahblahblahblahbalhalhalblahblabla…",
-    category: TaskCategory.MISC,
-    instructions: "Instructions here blablablabalbblablablablablablablblabb.",
-  },
-];