From 4bce5dd05cf804f416e84c85feaad70ce49b26d0 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sat, 3 Aug 2024 12:11:54 -0700
Subject: Center RSVP form

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

(limited to 'client/src')

diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 7c1f7b5..d33208a 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -18,12 +18,12 @@ import { useUpdateGuestMutation } from '../slices/apiSlice';
 import type { Guest } from '../slices/apiSlice';
 
 interface StatusProps {
-  error: boolean;
+  isError: boolean;
   setOpen: (open: boolean) => void;
 }
 
-const Status = ({ error, setOpen }: StatusProps) => {
-  return error ? (
+const Status = ({ isError, setOpen }: StatusProps) => {
+  return isError ? (
     <Alert severity="error" onClose={() => setOpen(false)}>
       RSVP failed
     </Alert>
@@ -35,17 +35,15 @@ const Status = ({ error, setOpen }: StatusProps) => {
 };
 
 function RsvpForm() {
-  const [
-    updateGuest,
-    { isLoading: loading, isSuccess: success, isError: error },
-  ] = useUpdateGuestMutation();
+  const [updateGuest, { isLoading, isSuccess, isError, error }] =
+    useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
   const previousPartySize = useRef(guest?.partySize - 1);
   const [open, setOpen] = useState<boolean>(false);
 
   useEffect(() => {
-    setOpen(success || error);
-  }, [success, error]);
+    setOpen(isSuccess || isError);
+  }, [isSuccess, isError]);
 
   const {
     register,
@@ -113,8 +111,9 @@ function RsvpForm() {
     >
       <div
         style={{
-          display: 'flex',
           width: '90%',
+          display: 'flex',
+          justifyContent: 'center',
         }}
       >
         <Grid container spacing={2} sx={{ width: 600, mt: 16 }}>
@@ -266,12 +265,12 @@ function RsvpForm() {
             </div>
           </Grid>
           <Snackbar
-            open={!loading && open}
+            open={!isLoading && open}
             onClose={() => setOpen(false)}
             autoHideDuration={5000}
           >
             <div>
-              <Status error={error} setOpen={setOpen} />
+              <Status isError={isError} setOpen={setOpen} />
             </div>
           </Snackbar>
         </Grid>
-- 
cgit v1.2.3