Use snackbar to display RSVP status

2 files changed, 36 insertions, 10 deletions

diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index bfa3fa8..b6ecc47 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -9,7 +9,7 @@ import p4 from '/EngagmentSession_06.23.2024-267.jpg';
 import p5 from '/EngagmentSession_06.23.2024-284.jpg';
 
 function Home() {
-  const [currentIndex, setIndex] = useState(0);
+  const [currentIndex, setIndex] = useState<number>(0);
   const photos = [p0, p1, p2, p3, p4, p5];
 
   useEffect(() => {
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 63981f8..708a1fb 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRef } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
@@ -10,17 +10,42 @@ import {
   Grid,
   Radio,
   RadioGroup,
+  Snackbar,
   TextField,
 } from '@mui/material';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { useUpdateGuestMutation } from '../slices/apiSlice';
 import type { Guest } from '../slices/apiSlice';
 
+interface StatusProps {
+  error: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const Status = ({ error, setOpen }: StatusProps) => {
+  return error ? (
+    <Alert severity="error" onClose={() => setOpen(false)}>
+      RSVP failed
+    </Alert>
+  ) : (
+    <Alert severity="success" onClose={() => setOpen(false)}>
+      RSVP updated
+    </Alert>
+  );
+};
+
 function RsvpForm() {
-  const [updateGuest, { isSuccess: success, isError: error }] =
-    useUpdateGuestMutation();
+  const [
+    updateGuest,
+    { isLoading: loading, isSuccess: success, 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]);
 
   const {
     register,
@@ -229,14 +254,15 @@ function RsvpForm() {
               RSVP
             </Button>
           </div>
-          <div
-            style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}
+          <Snackbar
+            open={!loading && open}
+            onClose={() => setOpen(false)}
+            autoHideDuration={5000}
           >
-            <div style={{ width: 180 }}>
-              {success && <Alert severity="success">RSVP updated</Alert>}
-              {error && <Alert severity="error">RSVP failed</Alert>}
+            <div>
+              <Status error={error} setOpen={setOpen} />
             </div>
-          </div>
+          </Snackbar>
         </Grid>
       </Grid>
     </form>