diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/RsvpForm.tsx | 120 |
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> ); } |