From 141ec98103881d0b232d3433c27f6fa7dd5a09d3 Mon Sep 17 00:00:00 2001
From: kensiiwasaki <kensiiwasaki@gmail.com>
Date: Wed, 22 Nov 2023 05:59:00 +0900
Subject: [PATCH] =?UTF-8?q?add:=20list=E3=83=9A=E3=83=BC=E3=82=B8=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/List.tsx | 73 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 app/routes/List.tsx

diff --git a/app/routes/List.tsx b/app/routes/List.tsx
new file mode 100644
index 0000000..de9d6e1
--- /dev/null
+++ b/app/routes/List.tsx
@@ -0,0 +1,73 @@
+import { rootAuthLoader } from "@clerk/remix/ssr.server";
+import { Title } from "@mantine/core";
+import { PrismaClient } from "@prisma/client";
+import { json } from "@remix-run/node";
+import type { ActionFunction, LoaderFunction } from "@remix-run/node";
+import { useFetcher, useLoaderData } from "@remix-run/react";
+
+const prisma = new PrismaClient();
+
+type Task = {
+  id: number;
+  content: string;
+  completed: boolean;
+  createdAt: Date;
+  userId: string;
+};
+
+export const loader: LoaderFunction = (args) => {
+  return rootAuthLoader(args, async ({ request }) => {
+    const { userId } = request.auth;
+
+    const tasks = userId
+      ? await prisma.task.findMany({ where: { userId } })
+      : [];
+
+    return json({ tasks });
+  });
+};
+
+export const action: ActionFunction = async ({ request }) => {
+  const form = await request.formData();
+  const taskId = form.get("taskId");
+  const task = await prisma.task.findUnique({ where: { id: Number(taskId) } });
+  if (task) {
+    await prisma.task.update({
+      where: { id: Number(taskId) },
+      data: { completed: !task.completed },
+    });
+  }
+  return json({ status: "success" });
+};
+
+export default function List() {
+  const { tasks } = useLoaderData<typeof loader>();
+  const fetcher = useFetcher();
+
+  const toggleTaskCompletion = async (taskId: number) => {
+    const formData = new FormData();
+    formData.append("taskId", String(taskId));
+
+    await fetcher.submit(formData, {
+      method: "POST",
+    });
+  };
+
+  return (
+    <div className="listContainer">
+      <Title order={3} size="h1" className="listTitle">
+        LIST
+      </Title>
+      {tasks.map((task: Task) => (
+        <div key={task.id}>
+          <p
+            className={task.completed ? "completed" : ""}
+            onClick={() => toggleTaskCompletion(task.id)}
+          >
+            {task.content}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}