回答をDBに記録するようにした

Author: yuiseki

prisma/migrations/20250222052747_task_answer_comp_pri_key/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - The primary key for the `JGeoGLUEAnswer` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `id` on the `JGeoGLUEAnswer` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "JGeoGLUEAnswer" DROP CONSTRAINT "JGeoGLUEAnswer_pkey",
+DROP COLUMN "id",
+ADD CONSTRAINT "JGeoGLUEAnswer_pkey" PRIMARY KEY ("taskId", "userId");

prisma/schema.prisma

@@ -72,14 +72,14 @@ model JGeoGLUETask {
 }
 
 model JGeoGLUEAnswer {
-  id        String   @id @default(cuid())
   taskId    String
   userId    String
   answer    String
   isCorrect Boolean
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  task      JGeoGLUETask @relation(fields: [taskId], references: [id], onDelete: Cascade)
+  user      User         @relation(fields: [userId], references: [id], onDelete: Cascade)
 
-  task JGeoGLUETask @relation(fields: [taskId], references: [id], onDelete: Cascade)
-  user User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  @@id([taskId, userId])
 }

src/app/api/tasks/answer/route.ts

@@ -0,0 +1,51 @@
+import { auth } from "@/app/auth";
+import { prisma } from "@/app/prisma";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return NextResponse.json(
+        { error: "Please log in to anser to tasks" },
+        { status: 403 }
+      );
+    }
+    if (session.user.id === undefined) {
+      return NextResponse.json(
+        { error: "Please log in to anser to tasks" },
+        { status: 403 }
+      );
+    }
+
+    const body = await req.json();
+    const { answer } = body;
+    const createdAnswer = await prisma.jGeoGLUEAnswer.upsert({
+      where: {
+        taskId_userId: {
+          taskId: answer.taskId,
+          userId: session.user.id,
+        },
+      },
+      update: {
+        answer: answer.answer,
+        isCorrect: answer.isCorrect,
+      },
+      create: {
+        userId: session.user.id,
+        taskId: answer.taskId,
+        answer: answer.answer,
+        isCorrect: answer.isCorrect,
+      },
+    });
+
+    return NextResponse.json(createdAnswer, { status: 201 });
+  } catch (error) {
+    console.error("Error creating JGeoGLUE task:", error);
+    return NextResponse.json(
+      { error: "Failed to create task" },
+      { status: 500 }
+    );
+  }
+}

src/app/q/page.tsx

@@ -58,7 +58,7 @@ export default function Page() {
         </div>
       )}
       {session === null && <RequireLoginCard />}
-      {session?.user && (
+      {session?.user && currentTask && (
         <>
           <div
             style={{

src/components/GeoGLUETaskCard/index.tsx

@@ -1,27 +1,45 @@
-import { GeoEAGTask, GeoETATask } from "@/types/JGeoGLUE";
+import { JGeoGLUETask } from "@prisma/client";
 import { useState } from "react";
 
-const GeoEAGOptions = ["✅ 全く同じ", "🟡 部分的に一致", "❌️ 全く違う"];
+const GeoEAGOptions = [
+  { label: "✅ 全く同じ", value: "全く同じ" },
+  { label: "🟡 部分的に一致", value: "部分的に一致" },
+  { label: "❌️ 全く違う", value: "全く違う" },
+];
 
 const GeoETAOptions = [
-  "🏞️ 都道府県",
-  "🏙️ 市区町村",
-  "🏘️ 町名",
-  "🏠 番地",
-  "🏢 施設名",
-  "🏗️ その他",
+  { label: "🏞️ 都道府県", value: "都道府県" },
+  { label: "🏙️ 市区町村", value: "市区町村" },
+  { label: "🏘️ 町名", value: "町名" },
+  { label: "🏠 番地", value: "番地" },
+  { label: "🏢 施設名", value: "施設名" },
+  { label: "🏗️ その他", value: "その他" },
 ];
 
 export const GeoGLUETaskCard: React.FC<{
-  task: GeoEAGTask | GeoETATask;
+  task: JGeoGLUETask;
   onNext: () => void;
 }> = ({ task, onNext }) => {
   const [answerIsCorrect, setAnswerIsCorrect] = useState<boolean | null>(null);
 
   const options = task.type === "GeoEAG" ? GeoEAGOptions : GeoETAOptions;
 
-  const handleAnswer = (option: string) => {
-    setAnswerIsCorrect(option.includes(task.correctAnswer));
+  const handleAnswer = (optionValue: string) => {
+    const isCorrect = task.correctAnswer === optionValue;
+    setAnswerIsCorrect(isCorrect);
+    fetch("/api/tasks/answer", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        answer: {
+          taskId: task.id,
+          answer: optionValue,
+          isCorrect,
+        },
+      }),
+    });
   };
 
   const handleNext = () => {
@@ -56,19 +74,19 @@ export const GeoGLUETaskCard: React.FC<{
         {options.map((option) => {
           return (
             <button
-              key={option}
-              onClick={() => handleAnswer(option)}
+              key={option.value}
+              onClick={() => handleAnswer(option.value)}
               style={{
                 border: "none",
                 borderRadius: "0.375rem",
                 display: "block",
                 padding: "10px",
               }}
               disabled={
-                answerIsCorrect !== null && option !== task.correctAnswer
+                answerIsCorrect !== null && option.value !== task.correctAnswer
               }
             >
-              {option}
+              {option.label}
             </button>
           );
         })}