fix: 回答詳細画面のレイアウトが崩壊するのを修正

GiganticMinecraft · Aug 16, 2024 · a582a45 · a582a45
1 parent 3f13fb9
commit a582a45
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 63 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,6 @@
 .main {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   padding: 6rem;
   min-height: 100vh;
 }