feat: 回答の詳細を表示する画面でラベルを設定できるようにする機能を実装

src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx

@@ -10,9 +10,13 @@ import { useForm } from 'react-hook-form';
 import { removeDuplicates } from '@/generic/ArrayExtra';
 import { formatString } from '@/generic/DateFormatter';
 import type {
+  GetAnswerLabelsResponse,
   GetAnswerResponse,
   GetQuestionsResponse,
 } from '@/app/api/_schemas/ResponseSchemas';
+import Autocomplete from '@mui/material/Autocomplete';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box';
 
 const AnswerTitleForm = (props: { answers: GetAnswerResponse }) => {
   const { handleSubmit, register } = useForm<{ title: string }>();
@@ -70,7 +74,48 @@ const AnswerTitleForm = (props: { answers: GetAnswerResponse }) => {
   );
 };
 
-const AnswerMeta = (props: { answers: GetAnswerResponse }) => {
+const AnswerTags = (props: { labels: GetAnswerLabelsResponse }) => {
+  return (
+    <Autocomplete
+      multiple
+      id="label"
+      options={props.labels.map((label) => label.name)}
+      getOptionLabel={(option) => option}
+      defaultValue={[]}
+      renderTags={(value: readonly string[], getTagProps) =>
+        value.map((option: string, index: number) => (
+          <Chip
+            label={option}
+            sx={{ background: '#FFFFFF29' }}
+            {...getTagProps({ index })}
+            key={index}
+          />
+        ))
+      }
+      renderOption={(props, option) => {
+        return (
+          <Box component="span" {...props} style={{ color: 'black' }}>
+            {option}
+          </Box>
+        );
+      }}
+      renderInput={(params) => (
+        // @ts-expect-error (解決方法がよくわからないのでとりあえずignoreする)
+        // FIXME: あとで調べる
+        <TextField
+          {...params}
+          variant="standard"
+          sx={{ borderBottom: '1px solid #FFFFFF6B' }}
+        />
+      )}
+    />
+  );
+};
+
+const AnswerMeta = (props: {
+  answers: GetAnswerResponse;
+  labels: GetAnswerLabelsResponse;
+}) => {
   return (
     <Grid container spacing={2}>
       <Grid item xs={6}>
@@ -81,6 +126,10 @@ const AnswerMeta = (props: { answers: GetAnswerResponse }) => {
         <Typography sx={{ fontWeight: 'bold' }}>回答日時</Typography>
         {formatString(props.answers.timestamp)}
       </Grid>
+      <Grid item xs={6}>
+        <Typography sx={{ fontWeight: 'bold' }}>ラベル</Typography>
+        <AnswerTags labels={props.labels} />
+      </Grid>
     </Grid>
   );
 };
@@ -104,6 +153,7 @@ const Answers = (props: { answers: AnswerWithQuestionInfo }) => {
 const AnswerDetails = (props: {
   answers: GetAnswerResponse;
   questions: GetQuestionsResponse;
+  labels: GetAnswerLabelsResponse;
 }) => {
   const answerWithQeustionInfo = removeDuplicates(
     props.answers.answers.map((answer) => answer.question_id)
@@ -123,7 +173,7 @@ const AnswerDetails = (props: {
   return (
     <Stack spacing={2}>
       <AnswerTitleForm answers={props.answers} />
-      <AnswerMeta answers={props.answers} />
+      <AnswerMeta answers={props.answers} labels={props.labels} />
       {answerWithQeustionInfo.length === 0 ? (
         <Typography>回答がありません</Typography>
       ) : (

src/app/(authed)/admin/answer/[answerId]/page.tsx

@@ -9,6 +9,7 @@ import Comments from './_components/Comments';
 import adminDashboardTheme from '../../theme/adminDashboardTheme';
 import type {
   ErrorResponse,
+  GetAnswerLabelsResponse,
   GetAnswerResponse,
   GetQuestionsResponse,
 } from '@/app/api/_schemas/ResponseSchemas';
@@ -27,13 +28,19 @@ const Home = ({ params }: { params: { answerId: number } }) => {
       : ''
   );
 
-  if (!answers || !formQuestions) {
+  const { data: labels, isLoading: isLabelsLoading } = useSWR<
+    Either<ErrorResponse, GetAnswerLabelsResponse>
+  >('/api/answers/labels');
+
+  if (!answers || !formQuestions || !labels) {
     return <LoadingCircular />;
   } else if (
     (!isAnswersLoading && !answers) ||
     (!isFormQuestionsLoading && !formQuestions) ||
+    (!isLabelsLoading && !labels) ||
     answers._tag === 'Left' ||
-    formQuestions._tag === 'Left'
+    formQuestions._tag === 'Left' ||
+    labels._tag === 'Left'
   ) {
     return <ErrorModal />;
   }
@@ -51,6 +58,7 @@ const Home = ({ params }: { params: { answerId: number } }) => {
         <AnswerDetails
           answers={answers.right}
           questions={formQuestions.right}
+          labels={labels.right}
         />
         <Comments
           comments={answers.right.comments}

src/app/api/_schemas/ResponseSchemas.ts

@@ -116,6 +116,18 @@ export const getAnswersResponseSchema = z
 
 export type GetAnswersResponse = z.infer<typeof getAnswersResponseSchema>;
 
+// GET /forms/answers/labels
+export const getAnswerLabelsResponseSchema = z
+  .object({
+    id: z.number(),
+    name: z.string(),
+  })
+  .array();
+
+export type GetAnswerLabelsResponse = z.infer<
+  typeof getAnswerLabelsResponseSchema
+>;
+
 // GET /forms/answers/:answerId
 export const getAnswerResponseSchema = z.object({
   id: z.number(),

src/app/api/answers/labels/route.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import { NextResponse } from 'next/server';
+import { BACKEND_SERVER_URL } from '@/env';
+import { getCachedToken } from '@/user-token/mcToken';
+import type { NextRequest } from 'next/server';
+
+export async function GET(_: NextRequest) {
+  const token = await getCachedToken();
+  if (!token) {
+    return NextResponse.redirect('/');
+  }
+
+  const response = await fetch(`${BACKEND_SERVER_URL}/forms/answers/labels`, {
+    method: 'GET',
+    headers: {
+      Accept: 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    cache: 'no-cache',
+  });
+
+  return NextResponse.json(await response.json(), { status: response.status });
+}