Use redux for updating snackbar

1 files changed, 33 insertions, 40 deletions

diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index af2dcb1..fd7bcd5 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useRef } from 'react';
 import { useOutletContext } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import {
-  Alert,
   Button,
   FormControl,
   FormControlLabel,
@@ -11,44 +11,22 @@ import {
   Paper,
   Radio,
   RadioGroup,
-  Snackbar,
   TextField,
 } from '@mui/material';
 import MailIcon from '@mui/icons-material/Mail';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { useUpdateGuestMutation } from '../slices/api/guestSlice';
-import type { Guest, StatusProps } from '../models';
 import { isFetchBaseQueryError } from '../error';
+import Status from './Status';
+import { open } from '../slices/snackbarSlice';
 import type { Data } from '../error';
-
-const Status = ({ isError, error, setOpen }: StatusProps) => {
-  return isError ? (
-    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
-    </Alert>
-  );
-};
+import type { Guest } from '../models';
 
 function RsvpForm() {
-  const [updateGuest, { isLoading, isSuccess, isError, error }] =
-    useUpdateGuestMutation();
+  const dispatch = useDispatch();
+  const [updateGuest] = useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
   const previousPartySize = useRef((guest.partySize ?? 1) - 1);
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    setOpen(isSuccess || isError);
-  }, [isSuccess, isError]);
 
   const {
     register,
@@ -70,7 +48,31 @@ function RsvpForm() {
   });
 
   const onSubmit = async (data: Guest) => {
-    updateGuest({ ...data });
+    try {
+      await updateGuest({ ...data }).unwrap();
+      dispatch(
+        open({
+          message: 'RSVP updated',
+          severity: 'success',
+        })
+      );
+    } catch (error) {
+      if (isFetchBaseQueryError(error)) {
+        dispatch(
+          open({
+            message: (error.data as Data).message,
+            severity: 'error',
+          })
+        );
+      } else {
+        dispatch(
+          open({
+            message: 'RSVP failed',
+            severity: 'error',
+          })
+        );
+      }
+    }
   };
 
   const { fields, append, remove } = useFieldArray({
@@ -124,7 +126,6 @@ function RsvpForm() {
           px: 2,
           pb: 2,
           mt: { xs: 10, md: 16 },
-          borderRadius: '8px',
         }}
       >
         <Grid container spacing={2}>
@@ -275,15 +276,7 @@ function RsvpForm() {
               </Button>
             </div>
           </Grid>
-          <Snackbar
-            open={!isLoading && open}
-            onClose={() => setOpen(false)}
-            autoHideDuration={5000}
-          >
-            <div>
-              <Status {...({ isError, error, setOpen } as StatusProps)} />
-            </div>
-          </Snackbar>
+          <Status />
         </Grid>
       </Paper>
     </form>