diff options
author | Michael Hunteman <michael@huntm.net> | 2024-05-17 15:20:30 -0700 |
---|---|---|
committer | Michael Hunteman <michael@huntm.net> | 2024-05-17 15:20:30 -0700 |
commit | 7103019890960e793deefb64987a09b33be60b42 (patch) | |
tree | c1c9402aa250c68b2cbe13d62598232bbf20b1e2 /src/components/RsvpForm.tsx | |
parent | fc5c111bcfe296bec82e1cf9fdb88fc80fb24f89 (diff) |
Add golang server
Diffstat (limited to 'src/components/RsvpForm.tsx')
-rw-r--r-- | src/components/RsvpForm.tsx | 242 |
1 files changed, 0 insertions, 242 deletions
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx deleted file mode 100644 index 71db0d8..0000000 --- a/src/components/RsvpForm.tsx +++ /dev/null @@ -1,242 +0,0 @@ -import React from 'react'; -import { useRef } from 'react'; -import { useOutletContext } from 'react-router-dom'; -import { - Button, - Container, - FormControl, - FormControlLabel, - FormLabel, - Grid, - Radio, - RadioGroup, - TextField, -} from '@mui/material'; -import { useForm, Controller, useFieldArray } from 'react-hook-form'; -import { useUpdateGuestMutation } from '../apiSlice'; -import type { Guest } from '../apiSlice'; - -type FormValues = { - id: number; - firstName: string; - lastName: string; - attendance: string; - email: string; - partySize: number; - message: string; - partyList: { - firstName: string; - lastName: string; - }[]; -}; - -function RsvpForm() { - const [updateGuest] = useUpdateGuestMutation(); - const guest: Guest = useOutletContext(); - const previousPartySize = useRef(0); - - const { - register, - handleSubmit, - control, - watch, - formState: { errors }, - } = useForm<FormValues>({ - defaultValues: { - id: guest?.id, - firstName: guest?.firstName, - lastName: guest?.lastName, - attendance: '', - email: '', - message: '', - partySize: 1, - partyList: [], - }, - }); - - const onSubmit = async (data: Guest) => { - updateGuest({ ...data }); - }; - - const { fields, append, remove } = useFieldArray({ - control, - name: 'partyList', - }); - - const handleParty = () => { - const partySize = Number(watch('partySize')) - 1; - if ( - partySize > previousPartySize.current && - partySize > 0 && - partySize < 10 - ) { - append( - new Array(partySize - previousPartySize.current).fill({ - firstName: '', - lastName: '', - }) - ); - previousPartySize.current = partySize; - } else if (partySize < previousPartySize.current && partySize >= 0) { - remove( - [...Array(previousPartySize.current - partySize).keys()].map( - (_, i) => partySize - 1 + i - ) - ); - previousPartySize.current = partySize; - } - }; - - return ( - <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 Divine Shepherd. The reception will - follow at 5 PM in A Venue on the Ridge. - </p> - </Grid> - <Grid item xs={12}> - <div style={{ display: 'flex', justifyContent: 'center' }}> - <FormControl> - <div style={{ display: 'flex', alignItems: 'center' }}> - <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required> - Will you attend? - </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> - )} - /> - </div> - </FormControl> - </div> - </Grid> - <Grid item xs={12} md={6} lg={6}> - <TextField - label="Email" - type="email" - variant="outlined" - 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', - }, - })} - /> - </Grid> - <Grid item xs={12} md={6} lg={6}> - <TextField - label="Party Size" - type="number" - variant="outlined" - fullWidth - onWheel={(event) => { - event.currentTarget.blur(); - }} - error={!!errors.partySize} - helperText={errors.partySize?.message} - required - {...register('partySize', { - onChange: handleParty, - 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}> - <TextField - label="Message to the couple" - variant="outlined" - fullWidth - multiline - rows={3} - {...register('message')} - /> - </Grid> - {fields.map((field, index) => { - return ( - <Grid - container - item - columnSpacing={2} - rowSpacing={{ xs: 1 }} - key={field.id} - > - <Grid item xs={12} md={6} lg={6}> - <TextField - label="First Name" - variant="outlined" - fullWidth - error={!!errors.partyList?.[index]?.firstName} - helperText={errors.partyList?.[index]?.firstName?.message} - required - {...register(`partyList.${index}.firstName`, { - required: 'This field is required', - })} - /> - </Grid> - <Grid item xs={12} md={6} lg={6}> - <TextField - label="Last Name" - variant="outlined" - fullWidth - error={!!errors.partyList?.[index]?.lastName} - helperText={errors.partyList?.[index]?.lastName?.message} - required - {...register(`partyList.${index}.lastName`, { - required: 'This field is required', - })} - /> - </Grid> - </Grid> - ); - })} - <Grid item xs={12}> - <div - style={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }} - > - <Button type="submit" variant="contained"> - RSVP - </Button> - </div> - </Grid> - </Grid> - </Container> - ); -} - -export default RsvpForm; |