Use react-hook-form

1 files changed, 77 insertions, 43 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index fe6d874..5e0fb31 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -6,12 +6,15 @@ import {
   FormControlLabel,
   FormLabel,
   Grid,
-  Paper,
+  MenuItem,
+  Select,
   Radio,
   RadioGroup,
   TextField,
   Typography
 } from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
+import { DevTool } from '@hookform/devtools';
 
 import { useGetGuestsQuery, useUpdateGuestMutation } from '../apiSlice';
 
@@ -26,18 +29,24 @@ function RsvpForm() {
 
   const [updateGuest] = useUpdateGuestMutation();
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    let guest = guests[0];
-    if (guest.attendance === 'true') {
-      updateGuest({...guest, attendance: 'false'});
-    } else {
-      updateGuest({...guest, attendance: 'true'});
+  const { register, handleSubmit, control,
+  formState: { isDirty, isValid, errors } } = useForm({
+    defaultValues: {
+      attendance: '',
+      mealPreference: '',
+      dietaryRestrictions: '',
+      plusOne: '',
+      marriageAdvice: ''
     }
+  });
+
+  const onSubmit = async (data) => {
+    console.log(data);
+    updateGuest({...data});
   };
 
   return (
-    <Paper>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={2}>
         <Grid item xs={12} md={4} lg={4}>
           <Typography>Date: April 14, 2025</Typography>
@@ -49,56 +58,81 @@ function RsvpForm() {
           <Typography>RSVP Deadline: </Typography>
         </Grid>
         <Grid item xs={12} md={4} lg={4}>
-          <TextField required label="Name" variant="outlined" />
-        </Grid>
-        <Grid item xs={12} md={4} lg={4}>
           <FormControl>
+            { errors && <Typography>{errors.attendance?.message}</Typography> }
             <FormLabel>Will you attend our wedding?</FormLabel>
-            <RadioGroup>
-              <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-              <FormControlLabel value="No" control={<Radio />} label="No" />
-            </RadioGroup>
+            <Controller
+              name="attendance"
+              control={control}
+              rules={{ required: "Are you attending?" }}
+              render={({ field }) => (
+                <RadioGroup {...field}>
+                  <FormControlLabel
+                    value="yes"
+                    control={<Radio />}
+                    label="Yes"
+                  />
+                  <FormControlLabel
+                    value="no"
+                    control={<Radio />}
+                    label="No"
+                  />
+                </RadioGroup>
+              )}
+            />
           </FormControl>
         </Grid>
         <Grid item xs={12} md={4} lg={4}>
-          <TextField required label="Plus-One" variant="outlined" />
-        </Grid>
-        <Grid item xs={12} md={4} lg={4}>
           <FormControl>
+            { errors && <Typography>{errors.mealPreference?.message}</Typography> }
             <FormLabel>Meal Preference</FormLabel>
-              <FormControlLabel
-                value="Beef"
-                control={<Radio />}
-                label="Beef"
-              />
-              <FormControlLabel
-                value="Chicken"
-                control={<Radio />}
-                label="Chicken"
-              />
-              <FormControlLabel
-                value="Fish"
-                control={<Radio />}
-                label="Fish"
-              />
-              <FormControlLabel
-                value="Vegetarian"
-                control={<Radio />}
-                label="Vegetarian"
-              />
+            <Controller
+              name="mealPreference"
+              control={control}
+              rules={{ required: "What would you like to eat?" }}
+              render={({ field }) => (
+                <RadioGroup {...field}>
+                  <FormControlLabel
+                    value="beef"
+                    control={<Radio />}
+                    label="Beef"
+                  />
+                  <FormControlLabel
+                    value="chicken"
+                    control={<Radio />}
+                    label="Chicken"
+                  />
+                </RadioGroup>
+              )}
+            />
           </FormControl>
         </Grid>
         <Grid item xs={12} md={4} lg={4}>
-          <TextField label="Dietary Restrictions" variant="outlined" />
+          <TextField
+            label="Dietary Restrictions"
+            variant="outlined"
+            {...register("dietaryRestrictions")}
+          />
+        </Grid>
+        <Grid item xs={12} md={4} lg={4}>
+          <TextField
+            label="Plus-One"
+            variant="outlined"
+            {...register("plusOne")}
+          />
         </Grid>
         <Grid item xs={12} md={4} lg={4}>
-          <TextField label="Advice" variant="outlined" />
+          <TextField
+            label="Marriage Advice"
+            variant="outlined"
+            {...register("marriageAdvice")}
+          />
         </Grid>
         <Grid item>
-          <Button onClick={handleSubmit} variant="contained">Submit</Button>
+          <Button type="submit" variant="contained">Submit</Button>
         </Grid>
       </Grid>
-    </Paper>
+    </form>
   );
 }