Use redux for updating snackbar

1 files changed, 24 insertions, 17 deletions

diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index dca157a..0d3e8b1 100644
--- a/client/src/components/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -1,18 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material';
+import { Button, Paper, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setGuest } from '../slices/auth/guestSlice';
 import { useLoginGuestMutation } from '../slices/api/guestSlice';
-import type { Name, StatusProps } from '../models';
 import Status from './Status';
+import { open } from '../slices/snackbarSlice';
+import { isFetchBaseQueryError } from '../error';
+import type { Data } from '../error';
+import type { Name } from '../models';
 
 function GuestLogin() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [login, { isLoading, error }] = useLoginGuestMutation();
-  const [open, setOpen] = useState<boolean>(false);
+  const [login] = useLoginGuestMutation();
 
   const {
     register,
@@ -29,8 +31,22 @@ function GuestLogin() {
     try {
       dispatch(setGuest(await login(data).unwrap()));
       navigate('/rsvp');
-    } catch (e) {
-      setOpen(true);
+    } catch (error) {
+      if (isFetchBaseQueryError(error)) {
+        dispatch(
+          open({
+            message: (error.data as Data).message,
+            severity: 'error',
+          })
+        );
+      } else {
+        dispatch(
+          open({
+            message: 'No response',
+            severity: 'error',
+          })
+        );
+      }
     }
   };
 
@@ -57,7 +73,6 @@ function GuestLogin() {
           alignItems: 'center',
           mt: 16,
           p: 2,
-          borderRadius: '8px',
         }}
       >
         <Typography variant="h6">Guest Login</Typography>
@@ -84,15 +99,7 @@ function GuestLogin() {
         <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
           Log in
         </Button>
-        <Snackbar
-          open={!isLoading && open}
-          onClose={() => setOpen(false)}
-          autoHideDuration={5000}
-        >
-          <div>
-            <Status {...({ error, setOpen, type: 'Guest' } as StatusProps)} />
-          </div>
-        </Snackbar>
+        <Status />
       </Paper>
     </form>
   );