From a6b1fa31e890b51b043c4211b14cd4be29ed6fba Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Tue, 9 Jul 2024 18:24:15 -0700
Subject: Add success and error alerts

---
 client/src/components/RsvpForm.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

(limited to 'client/src/components/RsvpForm.tsx')

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>
-- 
cgit v1.2.3