feat: フォームで入力した内容を取得できるように

GiganticMinecraft · Aug 12, 2023 · 8ba4b5c · 8ba4b5c
1 parent 4fded0b
commit 8ba4b5c
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@tsconfig/strictest": "^2.0.1",
     "prettier": "^3.0.1"
   }
 }
diff --git a/src/app/forms.tsx b/src/app/forms.tsx
@@ -6,7 +6,7 @@ import styles from '../page.module.css';
 export default async function Home() {
   const forms = await getForms();
   return (
-    <main className={styles.main}>
+    <main className={styles['main']}>
       <ButtonAppBar />
       <Forms forms={forms} />
     </main>

diff --git a/src/app/forms/[formId]/page.tsx b/src/app/forms/[formId]/page.tsx
@@ -8,7 +8,7 @@ export default async function Home({ params }: { params: { formId: number } }) {
 
   console.log(form);
   return (
-    <main className={styles.main}>
+    <main className={styles['main']}>
       <ButtonAppBar />
       <Questions form={form} />
     </main>

diff --git a/src/app/forms/page.tsx b/src/app/forms/page.tsx
@@ -6,7 +6,7 @@ import styles from '../page.module.css';
 export default async function Home() {
   const forms = await getForms();
   return (
-    <main className={styles.main}>
+    <main className={styles['main']}>
       <ButtonAppBar />
       <Forms forms={forms} />
     </main>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,10 +3,10 @@ import styles from './page.module.css';
 import Menu from '@/components/menu';
 
 export default function Home() {
-    return (
-        <main className={styles.main}>
-            <ButtonAppBar />
-            <Menu />
-        </main>
-    );
+  return (
+    <main className={styles['main']}>
+      <ButtonAppBar />
+      <Menu />
+    </main>
+  );
 }
diff --git a/src/components/form.tsx b/src/components/form.tsx
@@ -38,14 +38,35 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function Questions(form: Props) {
   const [isSended, changeSendedState] = React.useState(false);
 
-  const send = () => {
-    changeSendedState(true);
-  };
-
   const unSend = () => {
     changeSendedState(false);
   };
 
+  type FormDataType = {
+    [key: string]: string;
+  };
+
+  const [formData, setFormData] = React.useState<FormDataType>({});
+
+  const updateData = (e: any) => {
+    if (e.target.type == 'checkbox' && formData[e.target.name] != undefined) {
+      setFormData({
+        ...formData,
+        [e.target.name]: undefined,
+      });
+    } else {
+      setFormData({
+        ...formData,
+        [e.target.name]: e.target.value,
+      });
+    }
+  };
+
+  const handleSubmit = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.preventDefault();
+    changeSendedState(true);
+  };
+
   if (isSended) {
     return (
       <Box sx={{ width: '20%' }}>
@@ -80,131 +101,110 @@ export default function Questions(form: Props) {
               case 'TEXT':
                 return (
                   <Item key={index}>
-                    {textQuestion({
-                      title: question.title,
-                      description: question.description,
-                    })}
+                    <Card sx={{ minWidth: 275 }}>
+                      <CardContent>
+                        <Typography variant="h5" component="div">
+                          {question.title}
+                        </Typography>
+                        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                          {question.description}
+                        </Typography>
+                        <Typography variant="body2">
+                          <Box
+                            component="form"
+                            sx={{
+                              '& .MuiTextField-root': { m: 1, width: '25ch' },
+                            }}
+                            noValidate
+                            autoComplete="off"
+                          >
+                            <TextField
+                              id="outlined-multiline-static"
+                              name={question.title}
+                              label="回答を入力"
+                              multiline
+                              rows={4}
+                              onChange={updateData}
+                            />
+                          </Box>
+                        </Typography>
+                      </CardContent>
+                    </Card>
                   </Item>
                 );
               case 'SINGLE':
                 return (
                   <Item key={index}>
-                    {radioQuestion({
-                      title: question.title,
-                      description: question.description,
-                      choices: question.choices,
-                    })}
+                    <Card sx={{ minWidth: 275 }}>
+                      <CardContent>
+                        <Typography variant="h5" component="div">
+                          {question.title}
+                        </Typography>
+                        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                          {question.description}
+                        </Typography>
+                        <Typography variant="body2">
+                          <FormControl>
+                            <RadioGroup name={question.title} defaultChecked>
+                              {question.choices.map((choice) => {
+                                return (
+                                  <FormControlLabel
+                                    key={index}
+                                    control={<Radio />}
+                                    value={choice}
+                                    label={choice}
+                                    onChange={updateData}
+                                  />
+                                );
+                              })}
+                            </RadioGroup>
+                          </FormControl>
+                        </Typography>
+                      </CardContent>
+                    </Card>
                   </Item>
                 );
               case 'MULTIPLE':
                 return (
                   <Item key={index}>
-                    {checkboxQuestion({
-                      title: question.title,
-                      description: question.description,
-                      choices: question.choices,
-                    })}
+                    <Card sx={{ minWidth: 275 }}>
+                      <CardContent>
+                        <Typography variant="h5" component="div">
+                          {question.title}
+                        </Typography>
+                        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                          {question.description}
+                        </Typography>
+                        <Typography variant="body2">
+                          <FormGroup>
+                            {question.choices.map((choice) => {
+                              return (
+                                <FormControlLabel
+                                  key={index}
+                                  control={<Checkbox />}
+                                  name={choice}
+                                  label={choice}
+                                  onChange={updateData}
+                                />
+                              );
+                            })}
+                          </FormGroup>
+                        </Typography>
+                      </CardContent>
+                    </Card>
                   </Item>
                 );
             }
           })}
-          <Button variant="contained" endIcon={<SendIcon />} onClick={send}>
+          <Button
+            variant="contained"
+            endIcon={<SendIcon />}
+            onClick={handleSubmit}
+          >
             送信
           </Button>
         </Stack>
       </Box>
     );
   }
 }
-
-function checkboxQuestion(question: {
-  title: string;
-  description: string;
-  choices: string[];
-}) {
-  return (
-    <Card sx={{ minWidth: 275 }}>
-      <CardContent>
-        <Typography variant="h5" component="div">
-          {question.title}
-        </Typography>
-        <Typography sx={{ mb: 1.5 }} color="text.secondary">
-          {question.description}
-        </Typography>
-        <Typography variant="body2">
-          <FormGroup>
-            {question.choices.map((choice) => {
-              return <FormControlLabel control={<Checkbox />} label={choice} />;
-            })}
-          </FormGroup>
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-}
-
-function radioQuestion(question: {
-  title: string;
-  description: string;
-  choices: string[];
-}) {
-  return (
-    <Card sx={{ minWidth: 275 }}>
-      <CardContent>
-        <Typography variant="h5" component="div">
-          {question.title}
-        </Typography>
-        <Typography sx={{ mb: 1.5 }} color="text.secondary">
-          {question.description}
-        </Typography>
-        <Typography variant="body2">
-          <FormControl>
-            <RadioGroup name={question.title} defaultChecked>
-              {question.choices.map((choice) => {
-                return (
-                  <FormControlLabel
-                    control={<Radio />}
-                    value={choice}
-                    label={choice}
-                  />
-                );
-              })}
-            </RadioGroup>
-          </FormControl>
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-}
-
-function textQuestion(question: { title: string; description: string }) {
-  return (
-    <Card sx={{ minWidth: 275 }}>
-      <CardContent>
-        <Typography variant="h5" component="div">
-          {question.title}
-        </Typography>
-        <Typography sx={{ mb: 1.5 }} color="text.secondary">
-          {question.description}
-        </Typography>
-        <Typography variant="body2">
-          <Box
-            component="form"
-            sx={{
-              '& .MuiTextField-root': { m: 1, width: '25ch' },
-            }}
-            noValidate
-            autoComplete="off"
-          >
-            <TextField
-              id="outlined-multiline-static"
-              label="回答を入力"
-              multiline
-              rows={4}
-            />
-          </Box>
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/forms.tsx b/src/components/forms.tsx
@@ -78,8 +78,8 @@ export default function Forms({ forms }: Props) {
       <Stack spacing={2}>
         {forms.map((form, index) => {
           return (
-            <Link href={`/forms/${form.id}`}>
-              <Item key={index}>
+            <Link href={`/forms/${form.id}`} key={index}>
+              <Item>
                 <OutlinedCard form={form} />
               </Item>
             </Link>

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "@tsconfig/strictest/tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],

diff --git a/yarn.lock b/yarn.lock
@@ -415,6 +415,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tsconfig/strictest@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@tsconfig/strictest/-/strictest-2.0.1.tgz#c8f42be4d2c8a8fcef0afd482b730c1d55733776"
+  integrity sha512-7JHHCbyCsGUxLd0pDbp24yz3zjxw2t673W5oAP6HCEdr/UUhaRhYd3SSnUsGCk+VnPVJVA4mXROzbhI+nyIk+w==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"