feat: 仮の個別回答表示ページの作成

src/app/(authed)/admin/_components/Dashboard.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import type { GridEventListener, GridRowParams } from '@mui/x-data-grid';
-import { DataGrid, type GridColDef } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  type GridColDef,
+  type GridEventListener,
+  type GridRowParams,
+} from '@mui/x-data-grid';
+import { useRouter } from 'next/navigation';
 import * as React from 'react';
 import { formatString } from '@/generic/DateFormatter';
 import type { GetAnswersResponse } from '@/app/api/_schemas/ResponseSchemas';
-import { useRouter } from 'next/navigation';
 
 const columns: GridColDef[] = [
   { field: 'category', headerName: '種別', width: 200 },
@@ -25,10 +29,9 @@ type AnswerResponseWithFormTitle = GetAnswersResponse & { form_title: string };
 const prepareRows = (
   answerResponseWithFormTitle: AnswerResponseWithFormTitle[]
 ) => {
-  return answerResponseWithFormTitle.map((answer, index) => {
+  return answerResponseWithFormTitle.map((answer) => {
     const row: Row = {
-      // TODO: ここのidをanswerIdにする
-      id: index,
+      id: answer.id,
       category: answer.form_title,
       title: answer.title,
       date: formatString(answer.timestamp),

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

@@ -1,5 +1,49 @@
-const AnswerDetails = () => {
-  return <></>;
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { formatString } from '@/generic/DateFormatter';
+import type {
+  GetAnswerResponse,
+  GetQuestionsResponse,
+} from '@/app/api/_schemas/ResponseSchemas';
+
+const AnswerDetails = (props: {
+  answers: GetAnswerResponse;
+  questions: GetQuestionsResponse;
+}) => {
+  console.log(props.answers, props.questions);
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        {props.answers.title}
+      </Grid>
+      {/* TODO: 回答者をユーザー名埋め込みに変える */}
+      <Grid item xs={6}>
+        <Typography sx={{ fontWeight: 'bold' }}>回答者</Typography>
+        {props.answers.uuid}
+      </Grid>
+      <Grid item xs={6}>
+        <Typography sx={{ fontWeight: 'bold' }}>回答日時</Typography>
+        {formatString(props.answers.timestamp)}
+      </Grid>
+      {props.answers.answers.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
+              }
+            </Grid>
+            <Grid item xs={12}>
+              {answer.answer}
+            </Grid>
+          </Grid>
+        </Grid>
+      ))}
+    </Grid>
+  );
 };
 
 export default AnswerDetails;

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

@@ -1,14 +1,43 @@
+'use client';
+
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import adminDashboardTheme from '../../theme/adminDashboardTheme';
+import { redirect } from 'next/navigation';
+import useSWR from 'swr';
 import AnswerDetails from './_components/AnswerDetails';
+import adminDashboardTheme from '../../theme/adminDashboardTheme';
+import type {
+  GetAnswerResponse,
+  GetQuestionsResponse,
+} from '@/app/api/_schemas/ResponseSchemas';
+
+const Home = ({ params }: { params: { answerId: string } }) => {
+  const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+  const { data: answers, isLoading: isAnswersLoading } =
+    useSWR<GetAnswerResponse>(`/api/answers/${params.answerId}`, fetcher);
+
+  const { data: formQuestions, isLoading: isFormQuestionsLoading } =
+    useSWR<GetQuestionsResponse>(
+      answers ? `/api/questions?formId=${answers.form_id}` : '',
+      fetcher
+    );
+
+  if (!isAnswersLoading && !answers) {
+    redirect('/');
+  } else if (!answers) {
+    return null;
+  }
 
-const Home = ({ params }: { params: { answerId: number } }) => {
-  // const fetcher = (url: string) => fetch(url).then((res) => res.json());
+  if (!isFormQuestionsLoading && !formQuestions) {
+    redirect('/');
+  } else if (!formQuestions) {
+    return null;
+  }
 
   return (
     <ThemeProvider theme={adminDashboardTheme}>
       <CssBaseline />
-      <AnswerDetails />
+      <AnswerDetails answers={answers} questions={formQuestions} />
     </ThemeProvider>
   );
 };

src/app/api/_schemas/ResponseSchemas.ts

@@ -81,6 +81,7 @@ export type GetQuestionsResponse = z.infer<typeof getQuestionsResponseSchema>;
 
 // GET /forms/answers
 export const getAnswersResponseSchema = z.object({
+  id: z.number(),
   uuid: z.string(),
   timestamp: z.string().datetime(),
   form_id: z.number(),
@@ -94,3 +95,20 @@ export const getAnswersResponseSchema = z.object({
 });
 
 export type GetAnswersResponse = z.infer<typeof getAnswersResponseSchema>;
+
+// GET /forms/answers/:answerId
+export const getAnswerResponseSchema = z.object({
+  id: z.number(),
+  uuid: z.string(),
+  timestamp: z.string().datetime(),
+  form_id: z.number(),
+  title: z.string(),
+  answers: z
+    .object({
+      question_id: z.number(),
+      answer: z.string(),
+    })
+    .array(),
+});
+
+export type GetAnswerResponse = z.infer<typeof getAnswerResponseSchema>;

src/app/api/answers/[answerId]/route.ts

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