回答開始前の申請を後から変更可能にした

package.json

@@ -10,7 +10,7 @@
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-hook-form": "7.12.2",
+    "react-hook-form": "7.43.9",
     "uuid": "8.3.2",
     "validator": "13.7.0"
   },

src/components/AnsweredFormItem/checkbox.tsx

@@ -12,15 +12,16 @@ type Props = {
 const AnsweredCheckboxFormItem: FC<Props> = ({ formItem, checkedItemList }) => (
   <>
     <p className={styles.title}>{formItem.name}</p>
-    {formItem.boxes.map(({ id, label }) => (
-      <div className={styles.checkboxWrapper} key={id}>
-        <Checkbox
-          label={label}
-          checked={checkedItemList.includes(id)}
-          readOnly
-        />
-      </div>
-    ))}
+    {typeof formItem.boxes !== "string" &&
+      formItem.boxes.map(({ id, label }) => (
+        <div className={styles.checkboxWrapper} key={id}>
+          <Checkbox
+            label={label}
+            checked={checkedItemList.includes(id)}
+            readOnly
+          />
+        </div>
+      ))}
     {Boolean(formItem.description.length) && (
       <div className={styles.descriptions}>
         <Paragraph

src/components/Dropzone/index.tsx

@@ -6,13 +6,14 @@ import {
   UseControllerProps,
   Control,
   FieldPath,
+  FieldValues,
 } from "react-hook-form"
 
 import styles from "./index.module.scss"
 import { dataset } from "src/utils/dataset"
 
 declare namespace Dropzone {
-  type Props<T> = {
+  type Props<T extends FieldValues> = {
     label?: string
     descriptions?: string[]
     /**
@@ -28,7 +29,7 @@ declare namespace Dropzone {
   }
 }
 
-const Dropzone = function <T>({
+const Dropzone = function <T extends FieldValues>({
   label,
   descriptions,
   name,
@@ -44,10 +45,14 @@ const Dropzone = function <T>({
   )
 
   const [dropping, setDropping] = useState(false)
-
+  console.log(typeof control)
   const {
     field: { onChange, value },
-  } = useController({ name, control, rules })
+  } = useController({
+    name,
+    control,
+    rules,
+  })
 
   const { getRootProps, getInputProps } = useDropzone({
     ...dropzoneOptions,

src/components/FormItem/checkbox.tsx

@@ -21,15 +21,16 @@ const CheckboxFormItem: FC<Props> = ({
 }) => (
   <>
     <p className={styles.title}>{formItem.name}</p>
-    {formItem.boxes.map(({ id, label }, index) => (
-      <div className={styles.checkboxWrapper} key={id}>
-        <Checkbox
-          label={label}
-          checked={checked[index]}
-          register={registers[index]}
-        />
-      </div>
-    ))}
+    {typeof formItem.boxes !== "string" &&
+      formItem.boxes.map(({ id, label }, index) => (
+        <div className={styles.checkboxWrapper} key={id}>
+          <Checkbox
+            label={label}
+            checked={checked[index]}
+            register={registers[index]}
+          />
+        </div>
+      ))}
     {Boolean(formItem.description.length) && (
       <div className={styles.descriptions}>
         <Paragraph

src/components/FormItem/file.tsx

@@ -1,15 +1,16 @@
 import { ReactElement } from "react"
 
+import { FieldValues } from "react-hook-form"
 import styles from "./file.module.scss"
 import { Dropzone, FileList, Paragraph } from "src/components"
 import { FormItem } from "src/types/models/form/item"
 
-type Props<T> = {
+type Props<T extends FieldValues> = {
   formItem: Extract<FormItem, { type: "file" }>
   files: File[]
 } & Pick<Dropzone.Props<T>, "control" | "name" | "errors">
 
-const FileFormItem = function <T>({
+const FileFormItem = function <T extends FieldValues>({
   formItem,
   control,
   name,

src/components/FormItem/radio.tsx

@@ -21,10 +21,12 @@ const RadioFormItem: FC<Props> = ({ formItem, register, errors }) => (
         value: "",
         label: "選択してください",
       },
-      ...formItem.buttons.map(({ id, label }) => ({
-        value: id,
-        label,
-      })),
+      ...(typeof formItem.buttons !== "string"
+        ? formItem.buttons.map(({ id, label }) => ({
+            value: id,
+            label,
+          }))
+        : []),
     ]}
     error={errors}
     required={formItem.is_required}

src/lib/api/form/updateForm.ts

@@ -1,7 +1,8 @@
 import { HTTPError, TimeoutError } from "ky"
 
-import type { Form } from "../../../types/models/form"
+import type { Form, FormCondition } from "../../../types/models/form"
 import { client } from "../client"
+import { FormItem } from "src/types/models/form/item"
 
 declare namespace updateForm {
   type Props = Readonly<{
@@ -11,6 +12,8 @@ declare namespace updateForm {
       description: string
       starts_at: number
       ends_at: number
+      condition: FormCondition
+      items: FormItem[]
     }
     idToken: string
   }>

src/pages/committee/form/edit.module.scss

@@ -42,3 +42,60 @@
     margin-right: 16px;
   }
 }
+
+.sectionTitle {
+  margin-bottom: 16px;
+}
+
+.itemWrapper {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.itemPanel {
+  flex-grow: 1;
+}
+
+.itemType {
+  font-size: 1.2em;
+  margin-bottom: 12px;
+}
+
+.itemTypeDescription {
+  color: $color-text-sub;
+  margin-bottom: 24px;
+}
+
+.twoColumnFields {
+  display: flex;
+  flex-direction: row;
+
+  & .twoColumnField {
+    flex-grow: 1;
+
+    &:not(:last-of-type) {
+      margin-right: 16px;
+    }
+  }
+}
+
+.itemActions {
+  margin-left: 8px;
+}
+
+.addItemWrapper {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: -16px;
+}
+
+.addButton {
+  margin-bottom: 16px;
+
+  &:not(:last-of-type) {
+    margin-right: 16px;
+  }
+}