From a582a45d5b50981b3fc339b3b524ab68d91d430a Mon Sep 17 00:00:00 2001
From: rito528 <39003544+rito528@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:28:49 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=9E=E7=AD=94=E8=A9=B3=E7=B4=B0?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?=
 =?UTF-8?q?=E3=83=88=E3=81=8C=E5=B4=A9=E5=A3=8A=E3=81=99=E3=82=8B=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[answerId]/_components/AnswerDetails.tsx  | 142 ++++++++++--------
 .../(authed)/admin/answer/[answerId]/page.tsx |   8 +-
 src/app/page.module.css                       |   1 -
 3 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx b/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
index 3cc54c90..c6b4bb08 100644
--- a/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
+++ b/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
@@ -2,6 +2,7 @@ import { Send } from '@mui/icons-material';
 import EditIcon from '@mui/icons-material/Edit';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useState } from 'react';
@@ -13,35 +14,12 @@ import type {
   GetQuestionsResponse,
 } from '@/app/api/_schemas/ResponseSchemas';
 
-const AnswerDetails = (props: {
-  answers: GetAnswerResponse;
-  questions: GetQuestionsResponse;
-}) => {
+const AnswerTitleForm = (props: { answers: GetAnswerResponse }) => {
   const { handleSubmit, register } = useForm<{ title: string }>();
 
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(props.answers.title);
 
-  type AnswerWithQuestionInfo = {
-    questionTitle: string;
-    answers: string[];
-  };
-
-  const answerWithQeustionInfo = removeDuplicates(
-    props.answers.answers.map((answer) => answer.question_id)
-  ).map((questionId) => {
-    const answerWithQuestionInfo: AnswerWithQuestionInfo = {
-      questionTitle:
-        props.questions.find((question) => question.id == questionId)?.title ||
-        '',
-      answers: props.answers.answers
-        .filter((answer) => answer.question_id == questionId)
-        .map((answer) => answer.answer),
-    };
-
-    return answerWithQuestionInfo;
-  });
-
   const onSubmit = async (data: { title: string }) => {
     const response = await fetch(`/api/answers/${props.answers.id}`, {
       method: 'PATCH',
@@ -59,34 +37,42 @@ const AnswerDetails = (props: {
     }
   };
 
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="flex-start"
+      spacing={2}
+    >
+      {isEditing ? (
+        <TextField {...register('title')} defaultValue={title} required />
+      ) : (
+        <Typography variant="h4">{title}</Typography>
+      )}
+      {isEditing ? (
+        <Button
+          variant="contained"
+          startIcon={<Send />}
+          onClick={handleSubmit(onSubmit)}
+        >
+          編集完了
+        </Button>
+      ) : (
+        <Button
+          variant="contained"
+          startIcon={<EditIcon />}
+          onClick={() => setIsEditing(true)}
+        >
+          タイトルを編集
+        </Button>
+      )}
+    </Stack>
+  );
+};
+
+const AnswerMeta = (props: { answers: GetAnswerResponse }) => {
   return (
     <Grid container spacing={2}>
-      <Grid item xs={10}>
-        {isEditing ? (
-          <TextField {...register('title')} defaultValue={title} required />
-        ) : (
-          <Typography variant="h4">{title}</Typography>
-        )}
-      </Grid>
-      <Grid item xs={2}>
-        {isEditing ? (
-          <Button
-            variant="contained"
-            startIcon={<Send />}
-            onClick={handleSubmit(onSubmit)}
-          >
-            編集完了
-          </Button>
-        ) : (
-          <Button
-            variant="contained"
-            startIcon={<EditIcon />}
-            onClick={() => setIsEditing(true)}
-          >
-            タイトルを編集
-          </Button>
-        )}
-      </Grid>
       <Grid item xs={6}>
         <Typography sx={{ fontWeight: 'bold' }}>回答者</Typography>
         {props.answers.user.name}
@@ -95,19 +81,53 @@ const AnswerDetails = (props: {
         <Typography sx={{ fontWeight: 'bold' }}>回答日時</Typography>
         {formatString(props.answers.timestamp)}
       </Grid>
+    </Grid>
+  );
+};
+
+type AnswerWithQuestionInfo = {
+  questionTitle: string;
+  answers: string[];
+};
+
+const Answers = (props: { answers: AnswerWithQuestionInfo }) => {
+  return (
+    <Stack>
+      <Typography sx={{ fontWeight: 'bold' }}>
+        {props.answers.questionTitle}
+      </Typography>
+      {props.answers.answers.join(', ')}
+    </Stack>
+  );
+};
+
+const AnswerDetails = (props: {
+  answers: GetAnswerResponse;
+  questions: GetQuestionsResponse;
+}) => {
+  const answerWithQeustionInfo = removeDuplicates(
+    props.answers.answers.map((answer) => answer.question_id)
+  ).map((questionId) => {
+    const answerWithQuestionInfo: AnswerWithQuestionInfo = {
+      questionTitle:
+        props.questions.find((question) => question.id == questionId)?.title ||
+        '',
+      answers: props.answers.answers
+        .filter((answer) => answer.question_id == questionId)
+        .map((answer) => answer.answer),
+    };
+
+    return answerWithQuestionInfo;
+  });
+
+  return (
+    <Stack spacing={2}>
+      <AnswerTitleForm answers={props.answers} />
+      <AnswerMeta answers={props.answers} />
       {answerWithQeustionInfo.map((answer, index) => (
-        <Grid item xs={12} key={index}>
-          <Grid container spacing={2}>
-            <Grid item xs={12} sx={{ fontWeight: 'bold' }}>
-              {answer.questionTitle}
-            </Grid>
-            <Grid item xs={12}>
-              {answer.answers.join(', ')}
-            </Grid>
-          </Grid>
-        </Grid>
+        <Answers key={index} answers={answer} />
       ))}
-    </Grid>
+    </Stack>
   );
 };
 
diff --git a/src/app/(authed)/admin/answer/[answerId]/page.tsx b/src/app/(authed)/admin/answer/[answerId]/page.tsx
index a3ae39ad..36dedc3d 100644
--- a/src/app/(authed)/admin/answer/[answerId]/page.tsx
+++ b/src/app/(authed)/admin/answer/[answerId]/page.tsx
@@ -41,7 +41,13 @@ const Home = ({ params }: { params: { answerId: number } }) => {
   return (
     <ThemeProvider theme={adminDashboardTheme}>
       <CssBaseline />
-      <Stack spacing={2}>
+      <Stack
+        direction="column"
+        justifyContent="flex-start"
+        alignItems="space-between"
+        spacing={4}
+        sx={{ width: '100%' }}
+      >
         <AnswerDetails
           answers={answers.right}
           questions={formQuestions.right}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 8e6b8be5..bdf76a77 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,7 +1,6 @@
 .main {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   padding: 6rem;
   min-height: 100vh;
 }