diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/apiSlice.ts | 6 | ||||
| -rw-r--r-- | src/components/RsvpForm.tsx | 121 | ||||
| -rw-r--r-- | src/features/auth/GuestLogin.tsx | 21 | ||||
| -rw-r--r-- | src/mocks/handlers.ts | 10 |
5 files changed, 75 insertions, 85 deletions
diff --git a/package.json b/package.json index 1e340d2..0156564 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" diff --git a/src/apiSlice.ts b/src/apiSlice.ts index 808806f..6a1196b 100644 --- a/src/apiSlice.ts +++ b/src/apiSlice.ts @@ -16,10 +16,8 @@ export interface Guest { firstName: string lastName: string attendance: string - meal: string - restrictions: string - plusOne: string - advice: string + email: string + message: string } export const apiSlice = createApi({ diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx index 7beb21a..8c67139 100644 --- a/src/components/RsvpForm.tsx +++ b/src/components/RsvpForm.tsx @@ -1,5 +1,7 @@ import { + Box, Button, + Container, FormControl, FormControlLabel, FormLabel, @@ -17,17 +19,15 @@ function RsvpForm() { const [updateGuest] = useUpdateGuestMutation(); const guest: Guest = useOutletContext(); - const { register, handleSubmit, control, - formState: { errors } } = useForm({ + const { register, handleSubmit, control } = useForm({ defaultValues: { id: guest?.id, firstName: guest?.firstName, lastName: guest?.lastName, attendance: '', - meal: '', - restrictions: '', - plusOne: '', - advice: '' + email: '', + partySize: 1, + message: '' } }); @@ -36,8 +36,8 @@ function RsvpForm() { }; return ( - <form onSubmit={handleSubmit(onSubmit)}> - <Grid container spacing={2}> + <Container component="form" maxWidth="sm" onSubmit={handleSubmit(onSubmit)}> + <Grid container spacing={2} sx={{ mt: 8 }}> <Grid item xs={12} md={4} lg={4}> <Typography>Date: April 14, 2025</Typography> </Grid> @@ -47,82 +47,67 @@ function RsvpForm() { <Grid item xs={12} md={4} lg={4}> <Typography>RSVP Deadline: </Typography> </Grid> - <Grid item xs={12} md={4} lg={4}> - <FormControl> - { errors && <Typography>{errors.attendance?.message}</Typography> } - <FormLabel>Will you attend our wedding?</FormLabel> - <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}> - <FormControl> - { errors && <Typography>{errors.meal?.message}</Typography> } - <FormLabel>Meal Preference</FormLabel> - <Controller - name="meal" - 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> - )} - /> + <Grid item lg={12}> + <FormControl sx={{ ml: 8 }}> + <Grid container> + <FormLabel sx={{ m: 2 }}>Will you attend our wedding?</FormLabel> + <Controller + name="attendance" + control={control} + rules={{ required: true }} + render={({ field }) => ( + <RadioGroup {...field} row> + <FormControlLabel + value="yes" + control={<Radio />} + label="Yes" + /> + <FormControlLabel + value="no" + control={<Radio />} + label="No" + /> + </RadioGroup> + )} + /> + </Grid> </FormControl> </Grid> - <Grid item xs={12} md={4} lg={4}> + <Grid item xs={12} md={6} lg={6}> <TextField - label="Dietary Restrictions" + label="Email" variant="outlined" - {...register("restrictions")} + fullWidth + required + {...register("email")} /> </Grid> - <Grid item xs={12} md={4} lg={4}> + <Grid item xs={12} md={6} lg={6}> <TextField - label="Plus-One" + label="Party Size" variant="outlined" - {...register("plusOne")} + fullWidth + required + {...register("partySize")} /> </Grid> - <Grid item xs={12} md={4} lg={4}> + <Grid item xs={12}> <TextField - label="Marriage Advice" + label="Message to the couple" variant="outlined" - {...register("advice")} + fullWidth + multiline + rows={3} + {...register("message")} /> </Grid> - <Grid item> - <Button type="submit" variant="contained">Submit</Button> + <Grid item xs={12}> + <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> + <Button type="submit" variant="contained">RSVP</Button> + </Box> </Grid> </Grid> - </form> + </Container> ); } diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx index 61a8fa1..1f228d8 100644 --- a/src/features/auth/GuestLogin.tsx +++ b/src/features/auth/GuestLogin.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { Button, Stack, TextField, Typography } from '@mui/material'; +import { Box, Button, Container, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; import { setCredentials } from './authSlice'; import { useLoginMutation, LoginRequest } from '../../apiSlice'; @@ -28,28 +28,37 @@ function GuestLogin() { }; return ( - <form onSubmit={handleSubmit(onSubmit)}> - <Stack spacing={2}> + <Container component="form" maxWidth="xs" onSubmit={handleSubmit(onSubmit)}> + <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <Typography variant="h6"> Guest Login </Typography> <TextField label="First Name" variant="outlined" + margin="normal" + fullWidth required {...register("firstName", { required: true })} /> <TextField label="Last Name" variant="outlined" + margin="normal" + fullWidth required {...register("lastName", { required: true })} /> - <Button type="submit" variant="contained" disabled={!isDirty || !isValid}> + <Button + type="submit" + variant="contained" + fullWidth + sx={{ mt: 2 }} + disabled={!isDirty || !isValid}> Login </Button> - </Stack> - </form> + </Box> + </Container> ); } diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 63b1a9a..6bd17fa 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -13,9 +13,8 @@ export const handlers = [ lastName: 'Hunteman', attendance: 'false', meal: '', - restrictions: '', - plusOne: '', - advice: '' + email: '', + message: '' }, token, } @@ -29,9 +28,8 @@ export const handlers = [ lastName: 'Hunteman', attendance: 'true', meal: 'beef', - restrictions: '', - plusOne: '', - advice: '' + email: '', + message: '' } ) }) |