From b89eaa15cb8f13e11cac0a2cc3a8c3bc39d59468 Mon Sep 17 00:00:00 2001
From: rito528 <39003544+rito528@users.noreply.github.com>
Date: Sun, 23 Jun 2024 14:28:07 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=80=8B=E5=88=A5=E3=81=AE=E5=9B=9E?=
 =?UTF-8?q?=E7=AD=94=E8=A1=A8=E7=A4=BA=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=A7?=
 =?UTF-8?q?=E3=80=81=E8=A4=87=E6=95=B0=E9=81=B8=E6=8A=9E=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E8=B3=AA=E5=95=8F=E3=81=8C=E8=A4=87=E6=95=B0=E3=81=AE?=
 =?UTF-8?q?=E8=B3=AA=E5=95=8F=E3=81=A8=E3=81=97=E3=81=A6=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=95=E3=82=8C=E3=82=8B=E3=81=AE=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  | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx b/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
index f7ed0919..d1b2e787 100644
--- a/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
+++ b/src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx
@@ -10,7 +10,27 @@ const AnswerDetails = (props: {
   answers: GetAnswerResponse;
   questions: GetQuestionsResponse;
 }) => {
-  console.log(props.answers, props.questions);
+  type AnswerWithQuestionInfo = {
+    questionTitle: string;
+    answers: string[];
+  };
+
+  // NOTE: TypeScript の Set 型は順番を維持する
+  // ref: https://zenn.dev/notfounds/scraps/d8a0e4b99ddc38
+  const answerWithQeustionInfo = Array.from(
+    new Set(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 (
     <Grid container spacing={2}>
@@ -25,18 +45,14 @@ const AnswerDetails = (props: {
         <Typography sx={{ fontWeight: 'bold' }}>回答日時</Typography>
         {formatString(props.answers.timestamp)}
       </Grid>
-      {props.answers.answers.map((answer, index) => (
+      {answerWithQeustionInfo.map((answer, index) => (
         <Grid item xs={12} key={index}>
           <Grid container spacing={2}>
             <Grid item xs={12} sx={{ fontWeight: 'bold' }}>
-              {
-                props.questions.find(
-                  (question) => question.id == answer.question_id
-                )?.title
-              }
+              {answer.questionTitle}
             </Grid>
             <Grid item xs={12}>
-              {answer.answer}
+              {answer.answers.join(', ')}
             </Grid>
           </Grid>
         </Grid>