From 46f925663e595fa8dd87f7aa15a0061abcfae3d7 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Mon, 2 Sep 2024 16:27:12 -0700
Subject: Add ui error messages

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

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

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