From d8deee4f8dacdea68492a16ffb45a1ca0a48f97a Mon Sep 17 00:00:00 2001
From: rito528 <39003544+rito528@users.noreply.github.com>
Date: Sun, 23 Jun 2024 23:23:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=9E=E7=AD=94=E3=81=AE=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=88=E3=83=AB=E3=82=92=E6=9B=B4=E6=96=B0=E3=81=A7?=
 =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[answerId]/_components/AnswerDetails.tsx  | 26 ++++++++++--
 src/app/api/_schemas/RequestSchemas.ts        |  5 +++
 src/app/api/answers/[answerId]/route.ts       | 40 +++++++++++++++++++
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx b/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
index 7204f586..2d5faa83 100644
--- a/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
+++ b/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { formatString } from '@/generic/DateFormatter';
 import type {
   GetAnswerResponse,
@@ -15,6 +16,8 @@ const AnswerDetails = (props: {
   answers: GetAnswerResponse;
   questions: GetQuestionsResponse;
 }) => {
+  const { handleSubmit, register } = useForm<{ title: string }>();
+
   const [isEditing, setIsEditing] = useState(false);
 
   type AnswerWithQuestionInfo = {
@@ -39,22 +42,39 @@ const AnswerDetails = (props: {
     return answerWithQuestionInfo;
   });
 
+  const onSubmit = async (data: { title: string }) => {
+    await fetch(`/api/answers/${props.answers.id}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        title: data.title,
+      }),
+    });
+
+    setIsEditing(false);
+  };
+
   return (
     <Grid container spacing={2}>
       <Grid item xs={10}>
         {isEditing ? (
-          <TextField defaultValue={props.answers.title} required />
+          <TextField
+            {...register('title')}
+            defaultValue={props.answers.title}
+            required
+          />
         ) : (
           <Typography variant="h4">{props.answers.title}</Typography>
         )}
       </Grid>
       <Grid item xs={2}>
         {isEditing ? (
-          // TODO: タイトル変更用 API ができたら実装する
           <Button
             variant="contained"
             startIcon={<Send />}
-            onClick={() => setIsEditing(false)}
+            onClick={handleSubmit(onSubmit)}
           >
             編集完了
           </Button>
diff --git a/src/app/api/_schemas/RequestSchemas.ts b/src/app/api/_schemas/RequestSchemas.ts
index 11229982..683e780e 100644
--- a/src/app/api/_schemas/RequestSchemas.ts
+++ b/src/app/api/_schemas/RequestSchemas.ts
@@ -52,3 +52,8 @@ export const updateQuestionSchema = z.object({
     })
     .array(),
 });
+
+// PATCH /forms/answers/:answer_id
+export const updateAnswerSchema = z.object({
+  title: z.string().nullable(),
+});
diff --git a/src/app/api/answers/[answerId]/route.ts b/src/app/api/answers/[answerId]/route.ts
index 55b53599..5739b08e 100644
--- a/src/app/api/answers/[answerId]/route.ts
+++ b/src/app/api/answers/[answerId]/route.ts
@@ -3,6 +3,7 @@
 import { NextResponse } from 'next/server';
 import { BACKEND_SERVER_URL } from '@/env';
 import { getCachedToken } from '@/user-token/mcToken';
+import { updateAnswerSchema } from '../../_schemas/RequestSchemas';
 import { redirectByResponse } from '../../util/responseOrErrorResponse';
 import type { NextRequest } from 'next/server';
 
@@ -31,3 +32,42 @@ export async function GET(
 
   return NextResponse.json(await response.json());
 }
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: { answerId: string } }
+) {
+  const token = await getCachedToken();
+  if (!token) {
+    return NextResponse.redirect('/');
+  }
+
+  const requestBody = updateAnswerSchema.safeParse(await req.json());
+  if (!requestBody.success) {
+    return NextResponse.json(
+      { error: 'Invalid request body.' },
+      { status: 400 }
+    );
+  }
+
+  const response = await fetch(
+    `${BACKEND_SERVER_URL}/forms/answers/${params.answerId}`,
+    {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(requestBody.data),
+      cache: 'no-cache',
+    }
+  );
+
+  if (response.ok) {
+    return NextResponse.json({ status: response.status });
+  } else {
+    return NextResponse.json(await response.json(), {
+      status: response.status,
+    });
+  }
+}