From 4ce3be9349b3a19bbc99b7bf783eafeec040b2f7 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 1 Mar 2024 10:51:06 -0800
Subject: Update formatting on forms

---
 package.json                     |   2 +-
 src/apiSlice.ts                  |   6 +-
 src/components/RsvpForm.tsx      | 121 +++++++++++++++++----------------------
 src/features/auth/GuestLogin.tsx |  21 +++++--
 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: ''
       }
     )
   })
-- 
cgit v1.2.3