diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Admin.tsx | 2 | ||||
-rw-r--r-- | src/components/Rsvp.tsx | 10 | ||||
-rw-r--r-- | src/components/RsvpForm.tsx | 23 |
3 files changed, 18 insertions, 17 deletions
diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx index 76bf486..11fbc22 100644 --- a/src/components/Admin.tsx +++ b/src/components/Admin.tsx @@ -13,7 +13,7 @@ function Admin() { let content; if (isLoading) { - content = <Typography variant="h6">Loading...</Typography> + content = <Typography>Loading...</Typography> } else if (isSuccess) { content = JSON.stringify(guests); } else if (isError) { diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx index 1b26e2d..104196f 100644 --- a/src/components/Rsvp.tsx +++ b/src/components/Rsvp.tsx @@ -3,22 +3,22 @@ import { useLocation, Navigate, Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; import CssBaseline from '@mui/material/CssBaseline'; import NavBar from './NavBar'; -import { selectCurrentUser } from '../features/auth/authSlice'; +import { selectCurrentGuest } from '../features/auth/authSlice'; const authenticate = () => { - const user = useSelector(selectCurrentUser); - return useMemo(() => ({ user }), [user]); + const guest = useSelector(selectCurrentGuest); + return useMemo(() => ({ guest }), [guest]); }; function Rsvp() { const auth = authenticate(); const location = useLocation(); - return auth.user ? ( + return auth?.guest ? ( <> <CssBaseline /> <NavBar /> - <Outlet context={auth} /> + <Outlet context={auth?.guest} /> </> ) : ( <Navigate to="/guest-login" state={{ from: location }} replace /> diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx index 11ed376..7beb21a 100644 --- a/src/components/RsvpForm.tsx +++ b/src/components/RsvpForm.tsx @@ -11,26 +11,27 @@ import { } from '@mui/material'; import { useForm, Controller } from 'react-hook-form'; import { useOutletContext } from "react-router-dom"; -import { useUpdateGuestMutation, Guest, User } from '../apiSlice'; +import { useUpdateGuestMutation, Guest } from '../apiSlice'; function RsvpForm() { const [updateGuest] = useUpdateGuestMutation(); - const user: User = useOutletContext(); + const guest: Guest = useOutletContext(); const { register, handleSubmit, control, formState: { errors } } = useForm({ defaultValues: { - id: user.id, + id: guest?.id, + firstName: guest?.firstName, + lastName: guest?.lastName, attendance: '', - mealPreference: '', - dietaryRestrictions: '', + meal: '', + restrictions: '', plusOne: '', - marriageAdvice: '' + advice: '' } }); const onSubmit = async (data: Guest) => { - console.log(data); updateGuest({...data}); }; @@ -73,10 +74,10 @@ function RsvpForm() { </Grid> <Grid item xs={12} md={4} lg={4}> <FormControl> - { errors && <Typography>{errors.mealPreference?.message}</Typography> } + { errors && <Typography>{errors.meal?.message}</Typography> } <FormLabel>Meal Preference</FormLabel> <Controller - name="mealPreference" + name="meal" control={control} rules={{ required: "What would you like to eat?" }} render={({ field }) => ( @@ -100,7 +101,7 @@ function RsvpForm() { <TextField label="Dietary Restrictions" variant="outlined" - {...register("dietaryRestrictions")} + {...register("restrictions")} /> </Grid> <Grid item xs={12} md={4} lg={4}> @@ -114,7 +115,7 @@ function RsvpForm() { <TextField label="Marriage Advice" variant="outlined" - {...register("marriageAdvice")} + {...register("advice")} /> </Grid> <Grid item> |