organize project page components

client/src/pages/Projects/components/Project/TasksList.tsx

@@ -0,0 +1,48 @@
+import { List, ListSubheader } from "@mui/material";
+import { useAuth } from "../../../../hooks/useAuth";
+import { useProject } from "../../../../hooks/useProject";
+import { Task, TasksListItem } from "./TasksListItem";
+
+export type TaskListProps = {
+  title: string;
+  tasks: Task[];
+};
+
+export const TasksList = ({ title, tasks }: TaskListProps) => {
+  const { apiClient } = useAuth();
+  const { tasksMutate, project } = useProject();
+
+  const handleCheck = (taskId: number) => {
+    apiClient(`projects/${project.id}/tasks/${taskId}/finish`).then((res) => {
+      tasksMutate();
+    });
+  };
+
+  const handleDelete = (taskId: number) => {
+    apiClient(`projects/${project.id}/tasks/${taskId}`, {
+      method: "DELETE",
+    }).then((res) => {
+      tasksMutate();
+    });
+  };
+
+  return (
+    <List
+      dense
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          {title}
+        </ListSubheader>
+      }
+    >
+      {tasks.map((task) => (
+        <TasksListItem
+          key={task.id}
+          task={task}
+          onCheck={handleCheck}
+          onDelete={handleDelete}
+        />
+      ))}
+    </List>
+  );
+};