diff options
Diffstat (limited to 'src/components/RsvpForm.tsx')
-rw-r--r-- | src/components/RsvpForm.tsx | 63 |
1 files changed, 39 insertions, 24 deletions
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx index d7efecf..090987b 100644 --- a/src/components/RsvpForm.tsx +++ b/src/components/RsvpForm.tsx @@ -10,14 +10,19 @@ import { TextField, } from '@mui/material'; import { useForm, Controller } from 'react-hook-form'; -import { useOutletContext } from "react-router-dom"; +import { useOutletContext } from 'react-router-dom'; import { useUpdateGuestMutation, Guest } from '../apiSlice'; function RsvpForm() { const [updateGuest] = useUpdateGuestMutation(); const guest: Guest = useOutletContext(); - const { register, handleSubmit, control, formState: { errors } } = useForm({ + const { + register, + handleSubmit, + control, + formState: { errors }, + } = useForm({ defaultValues: { id: guest?.id, firstName: guest?.firstName, @@ -25,22 +30,27 @@ function RsvpForm() { attendance: '', email: '', partySize: 1, - message: '' - } + message: '', + }, }); const onSubmit = async (data: Guest) => { - updateGuest({...data}); + updateGuest({ ...data }); }; return ( - <Container component="form" maxWidth="sm" noValidate onSubmit={handleSubmit(onSubmit)}> + <Container + component="form" + maxWidth="sm" + noValidate + onSubmit={handleSubmit(onSubmit)} + > <Grid container spacing={2} sx={{ mt: 8 }}> <Grid item xs={12}> <p> - Please RSVP for the wedding by March 10, 2025. - The ceremony will commence at 3 pm on April 26 in ... - The reception will follow at 5 pm in A Venue on the Ridge. + Please RSVP for the wedding by March 10, 2025. The ceremony will + commence at 3 pm on April 26 in ... The reception will follow at 5 + pm in A Venue on the Ridge. </p> </Grid> <Grid item xs={12}> @@ -81,12 +91,13 @@ function RsvpForm() { error={!!errors.email} helperText={errors.email?.message} required - {...register('email', - { required: 'This field is required', - pattern: { value: /\S+@\S+\.\S+/, - message: 'Please enter a valid email address' } - } - )} + {...register('email', { + required: 'This field is required', + pattern: { + value: /\S+@\S+\.\S+/, + message: 'Please enter a valid email address', + }, + })} /> </Grid> <Grid item xs={12} md={6} lg={6}> @@ -98,12 +109,14 @@ function RsvpForm() { error={!!errors.partySize} helperText={errors.partySize?.message} required - {...register('partySize', - { required: 'This field is required', - min: { value: 1, message: 'Please enter a positive integer' }, - max: { value: 9, message: 'Please enter an integer less than 10' } - } - )} + {...register('partySize', { + required: 'This field is required', + min: { value: 1, message: 'Please enter a positive integer' }, + max: { + value: 9, + message: 'Please enter an integer less than 10', + }, + })} /> </Grid> <Grid item xs={12}> @@ -118,9 +131,11 @@ function RsvpForm() { </Grid> <Grid item xs={12}> <div - style={{ display: 'flex', - flexDirection: 'column', - alignItems: 'center' }} + style={{ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} > <Button type="submit" variant="contained"> RSVP |