feat: 回答のタイトルを更新できるようにする

GiganticMinecraft · Jun 23, 2024 · d8deee4 · d8deee4
1 parent 730786d
commit d8deee4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,
+    });
+  }
+}