Use react-hook-form

2 files changed, 102 insertions, 61 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>
   );
 }
 
diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index fb305f7..2100a94 100644
--- a/src/features/auth/GuestLogin.tsx
+++ b/src/features/auth/GuestLogin.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { Button, Grid, Paper, TextField, Typography } from '@mui/material';
+import { useForm } from 'react-hook-form';
 
 import { setCredentials } from './authSlice';
 import { useLoginMutation } from '../../apiSlice';
@@ -10,23 +11,19 @@ import type { LoginRequest } from './authSlice';
 function GuestLogin() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-
-  // TODO: use react-hook-form
-  const [formState, setFormState] = useState<LoginRequest>({
-    firstName: '',
-    lastName: ''
-  });
-
   const [login] = useLoginMutation();
 
-  const handleChange = ({
-    target: { name, value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
-    setFormState(prev => ({ ...prev, [name]: value }));
+  const { register, handleSubmit,
+  formState: { isDirty, isValid } } = useForm<LoginRequest>({
+    defaultValues: {
+      firstName: '',
+      lastName: ''
+    }
+  });
 
-  const handleSubmit = async () => {
+  const onSubmit = async (data: LoginRequest) => {
       try {
-        const user = await login(formState).unwrap();
+        const user = await login(data).unwrap();
         dispatch(setCredentials(user));
         navigate('/rsvp');
       } catch (e) {
@@ -35,7 +32,7 @@ function GuestLogin() {
   };
 
   return (
-    <Paper>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={2}>
         <Grid item xs={12} md={12} lg={12}>
           <Typography variant="h6">
@@ -43,18 +40,28 @@ function GuestLogin() {
           </Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
-          <TextField label="First Name" variant="outlined" onChange={handleChange} />
+          <TextField
+            label="First Name"
+            variant="outlined"
+            required
+            {...register("firstName", { required: true })}
+          />
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
-          <TextField label="Last Name" variant="outlined" onChange={handleChange} />
+          <TextField
+            label="Last Name"
+            variant="outlined"
+            required
+            {...register("lastName", { required: true })}
+          />
         </Grid>
         <Grid item>
-          <Button onClick={handleSubmit} variant="contained">
+          <Button type="submit" variant="contained" disabled={!isDirty || !isValid}>
             Login
           </Button>
         </Grid>
       </Grid>
-    </Paper>
+    </form>
   );
 }