update: 申請回答一覧表示

src/app/committee/forms/[form_id]/FormAnswerList.tsx

@@ -1,19 +1,17 @@
 "use client";
-import { assignType } from "@/lib/openapi";
 import { css } from "@styled-system/css";
 import { hstack } from "@styled-system/patterns";
 import Link from "next/link";
-import useSWR from "swr";
 import { NoResultNotice } from "@/common_components/NoResultNotice";
 import { getSubmitStatusFromDate } from "@/lib/formHelpers";
 import { SubmitStatusBadge } from "@/common_components/SubmitStatus";
 import dayjs from "dayjs";
+import { components } from "@/schema";
 
-export const FormAnswerList: React.FC<{ formId: string; deadline: string }> = ({ formId, deadline }) => {
-  const { data, isLoading, error } = useSWR(`/form-answers?form_id=${formId}`);
-  const answers = assignType("/form-answers", data);
-  if (isLoading) return;
-  if (error) return `エラーが発生しました${error}`;
+export const FormAnswerList: React.FC<{ answers: components["schemas"]["FormAnswerSummary"][]; deadline: string }> = ({
+  answers,
+  deadline,
+}) => {
   return (
     <>
       <h2 className={css({ fontSize: "lg", fontWeight: "bold" })}>個別回答一覧</h2>

src/app/committee/forms/[form_id]/FormDetailedView.tsx

@@ -42,6 +42,10 @@ export const FormDetailedView: React.FC<{ form: components["schemas"]["Form"] }>
   const [_, setState] = useState<FilesFormType>(new Map());
   const [__, setFileErrors] = useState(new Map());
 
+  const { data, isLoading, error } = useSWR(`/form-answers?form_id=${form.id}`);
+  const answers = assignType("/form-answers", data);
+  if (isLoading) return;
+  if (error) return `エラーが発生しました${error}`;
   return (
     <div className={vstack({ gap: 4, alignItems: "start", width: "full" })}>
       <div className={hstack({ gap: 6 })}>
@@ -141,7 +145,7 @@ export const FormDetailedView: React.FC<{ form: components["schemas"]["Form"] }>
           setFileErrors={setFileErrors}
         />
       </form>
-      <FormAnswerList formId={form.id} deadline={form.ends_at} />
+      <FormAnswerList answers={answers} deadline={form.ends_at} />
     </div>
   );
 };

src/app/committee/projects/[project_id]/page.tsx

@@ -12,6 +12,12 @@ import { notFound, useRouter } from "next/navigation";
 import deleteButton from "@/assets/deleteProjectButton.svg?url";
 import Image from "next/image";
 import { Button } from "@/common_components/Button";
+import { FormAnswerList } from "@/app/committee/forms/[form_id]/FormAnswerList";
+import { NoResultNotice } from "@/common_components/NoResultNotice";
+import { getSubmitStatusFromDate } from "@/lib/formHelpers";
+import { components } from "@/schema";
+import { SubmitStatusBadge } from "@/common_components/SubmitStatus";
+import dayjs from "dayjs";
 export const runtime = "edge";
 
 const deleteProject = async (project_id: string) => {
@@ -27,14 +33,48 @@ const deleteProject = async (project_id: string) => {
     });
 };
 
+const FormAnswerItem: React.FC<{ answer: components["schemas"]["FormAnswerSummary"] }> = ({ answer }) => {
+  const { data, isLoading, error } = useSWR(`/forms/${answer.form_id}`);
+  const form = assignType("/forms/{form_id}", data);
+  if (isLoading) return;
+  if (error) "エラーが発生しました";
+  const status = getSubmitStatusFromDate(form.ends_at, answer.updated_at);
+  return (
+    <Link
+      href={`/committee/form-answers/${answer.id}`}
+      key={answer.id}
+      className={hstack({
+        width: "full",
+        justifyContent: "space-between",
+        paddingX: 5,
+        paddingY: 3,
+        "&:first-child": {
+          borderTop: "2px solid black",
+        },
+        borderBottom: "2px solid token(colors.gray.300)",
+      })}>
+      <div className={hstack({ gap: 5 })}>
+        <span>{dayjs(answer.updated_at).format("MM/DD hh:mm")}</span>
+        <span className={css({ fontWeight: "bold" })}>{form.title}</span>
+      </div>
+      <SubmitStatusBadge status={status} />
+    </Link>
+  );
+};
+
 const NewsDetailsPage = ({ params }: { params: { project_id: string } }) => {
   const { data, error, isLoading } = useSWR(`/projects/${params.project_id}`);
+  const {
+    data: formAnswers,
+    isLoading: formAnswersIsLoading,
+    error: formAnswersError,
+  } = useSWR(`/form-answers?project_id=${params.project_id}`);
   const router = useRouter();
 
-  if (isLoading) {
+  if (isLoading || formAnswersIsLoading) {
     return;
   }
-  if (error) {
+  if (error || formAnswersError) {
     switch (error.name) {
       case "project/not-found":
       case "project/invalid-uuid":
@@ -45,6 +85,7 @@ const NewsDetailsPage = ({ params }: { params: { project_id: string } }) => {
   }
 
   const project = assignType("/projects/{project_id}", data);
+  const answers = assignType("/form-answers", formAnswers);
 
   return (
     <div className={container({ maxWidth: "4xl" })}>
@@ -93,6 +134,21 @@ const NewsDetailsPage = ({ params }: { params: { project_id: string } }) => {
           </div>
         </span>
         <ProjectTableView projectData={project} />
+        <>
+          <h2 className={css({ fontSize: "lg", fontWeight: "bold" })}>回答一覧</h2>
+          {answers.length == 0 ? (
+            <NoResultNotice message="回答はまだありません" />
+          ) : (
+            <div
+              className={css({
+                width: "full",
+              })}>
+              {answers.map((answer) => (
+                <FormAnswerItem answer={answer} key={answer.id} />
+              ))}
+            </div>
+          )}
+        </>
       </div>
     </div>
   );