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