diff options
Diffstat (limited to 'client/src/components/RsvpForm.tsx')
-rw-r--r-- | client/src/components/RsvpForm.tsx | 23 |
1 files changed, 17 insertions, 6 deletions
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx index f20d810..d981053 100644 --- a/client/src/components/RsvpForm.tsx +++ b/client/src/components/RsvpForm.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useRef } from 'react'; import { useNavigate, useOutletContext } from 'react-router-dom'; import { + Alert, Button, Container, FormControl, @@ -13,11 +14,12 @@ import { TextField, } from '@mui/material'; import { useForm, Controller, useFieldArray } from 'react-hook-form'; -import { useUpdateGuestMutation } from '../apiSlice'; -import type { Guest } from '../apiSlice'; +import { useUpdateGuestMutation } from '../slices/apiSlice'; +import type { Guest } from '../slices/apiSlice'; function RsvpForm() { - const [updateGuest] = useUpdateGuestMutation(); + const [updateGuest, { isSuccess: success, isError: error }] = + useUpdateGuestMutation(); const guest: Guest = useOutletContext(); const previousPartySize = useRef(guest?.partySize - 1); const navigate = useNavigate(); @@ -43,7 +45,6 @@ function RsvpForm() { const onSubmit = async (data: Guest) => { updateGuest({ ...data }); - navigate('/guest/login'); }; const { fields, append, remove } = useFieldArray({ @@ -120,7 +121,7 @@ function RsvpForm() { </FormControl> </div> </Grid> - <Grid item xs={9}> + <Grid item xs={8}> <TextField label="Email" type="email" @@ -128,7 +129,9 @@ function RsvpForm() { fullWidth 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', @@ -136,7 +139,7 @@ function RsvpForm() { })} /> </Grid> - <Grid item xs={3}> + <Grid item xs={4}> <TextField label="Party Size" type="number" @@ -220,6 +223,14 @@ function RsvpForm() { RSVP </Button> </div> + <div + style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }} + > + <div style={{ width: 180 }}> + {success && <Alert severity="success">RSVP updated</Alert>} + {error && <Alert severity="error">RSVP failed</Alert>} + </div> + </div> </Grid> </Grid> </Container> |