1 files changed, 15 insertions, 12 deletions
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 33ca108..7b2892f 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -17,18 +17,21 @@ import {
 import MailIcon from '@mui/icons-material/Mail';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { useUpdateGuestMutation } from '../slices/api/guestSlice';
-import type { Guest } from '../models';
+import type { Guest, StatusProps } from '../models';
+import { isFetchBaseQueryError } from '../error';
+import type { Data } from '../error';
 
-interface StatusProps {
-  isError: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-const Status = ({ isError, setOpen }: StatusProps) => {
+const Status = ({ isError, error, setOpen }: StatusProps) => {
   return isError ? (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      RSVP failed
-    </Alert>
+    isFetchBaseQueryError(error) ? (
+      <Alert severity="error" onClose={() => setOpen(false)}>
+        {(error.data as Data).message}
+      </Alert>
+    ) : (
+      <Alert severity="error" onClose={() => setOpen(false)}>
+        RSVP failed
+      </Alert>
+    )
   ) : (
     <Alert severity="success" onClose={() => setOpen(false)}>
       RSVP updated
@@ -37,7 +40,7 @@ const Status = ({ isError, setOpen }: StatusProps) => {
 };
 
 function RsvpForm() {
-  const [updateGuest, { isLoading, isSuccess, isError }] =
+  const [updateGuest, { isLoading, isSuccess, isError, error }] =
     useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
   const previousPartySize = useRef((guest.partySize ?? 1) - 1);
@@ -278,7 +281,7 @@ function RsvpForm() {
             autoHideDuration={5000}
           >
             <div>
-              <Status isError={isError} setOpen={setOpen} />
+              <Status {...({ isError, error, setOpen } as StatusProps)} />
             </div>
           </Snackbar>
         </Grid>