add simple snakbar. fix login issues

client/src/actions/auth.js

@@ -1,55 +1,43 @@
-import { useNavigate } from "react-router-dom";
-import * as api from "../api/index";
-import { AUTH, CREATE_PROFILE } from "./constants";
-import { jwtDecode } from "jwt-decode";
+import { useNavigate } from 'react-router-dom';
+import * as api from '../api/index';
+import { AUTH, CREATE_PROFILE } from './constants';
+import { jwtDecode } from 'jwt-decode';
 
+export const signin = (formData, setLoading) => async (dispatch) => {
+  try {
+    //login the user
+    const { data } = await api.signIn(formData);
 
+    dispatch({ type: AUTH, data });
+    window.location.href = '/';
+  } catch (error) {
+    setLoading(false);
+  }
+};
 
-export const signin =
-  (formData, openSnackbar, setLoading) => async (dispatch) => {
-    try {
-      //login the user
-      const { data } = await api.signIn(formData);
-
-      dispatch({ type: AUTH, data });
-      // setLoading(false)
-      openSnackbar("Signin successfull");
-      // history.push('/dashboard')
-      window.location.href = "/homepage";
-    } catch (error) {
-      // console.log(error?.response?.data?.message)
-      openSnackbar(error?.response?.data?.message);
-      setLoading(false);
-    }
-  };
-
-export const signup =
-  (formData, openSnackbar, setLoading) => async (dispatch) => {
-    try {
-      //Sign up the user
-      const { data } = await api.signUp(formData);
-      dispatch({ type: AUTH, data });
-      const { info } = await api.createProfile({
-        name: data?.result?.name,
-        email: data?.result?.email,
-        userId: data?.result?._id,
-        role: data?.result?.role,
-        phoneNumber: "",
-        businessName: "",
-        contactAddress: "",
-        logo: "",
-        website: "",
-      });
-      dispatch({ type: CREATE_PROFILE, payload: info });
-      window.location.href = "/homepage";
-      // history.push('/dashboard')
-      openSnackbar("Sign up successfull");
-    } catch (error) {
-      console.log(error);
-      openSnackbar(error?.response?.data?.message);
-      setLoading(false);
-    }
-  };
+export const signup = (formData, setLoading) => async (dispatch) => {
+  try {
+    //Sign up the user
+    const { data } = await api.signUp(formData);
+    dispatch({ type: AUTH, data });
+    const { info } = await api.createProfile({
+      name: data?.result?.name,
+      email: data?.result?.email,
+      userId: data?.result?._id,
+      role: data?.result?.role,
+      phoneNumber: '',
+      businessName: '',
+      contactAddress: '',
+      logo: '',
+      website: '',
+    });
+    dispatch({ type: CREATE_PROFILE, payload: info });
+    window.location.href = '/';
+  } catch (error) {
+    console.log(error);
+    setLoading(false);
+  }
+};
 
 export const forgot = (formData) => async (dispatch) => {
   try {
@@ -63,7 +51,7 @@ export const reset = (formData, history) => async (dispatch) => {
   const navigate = useNavigate();
   try {
     await api.reset(formData);
-    navigate("/homepage");
+    navigate('/homepage');
   } catch (error) {
     alert(error);
   }
@@ -72,32 +60,32 @@ export const reset = (formData, history) => async (dispatch) => {
 export const refreshToken = async (user) => {
   try {
     const response = await api.refresh({ token: user?.refreshToken });
-    if (response.statusText !== "OK") {
-      localStorage.removeItem("profile");
+    if (response.statusText !== 'OK') {
+      localStorage.removeItem('profile');
       return false;
     }
     const newToken = response.data.token;
     localStorage.setItem(
-      "profile",
+      'profile',
       JSON.stringify({ ...user, token: newToken })
     );
     return true;
   } catch (error) {
     console.log(error);
-    localStorage.removeItem("profile");
+    localStorage.removeItem('profile');
     return false;
   }
 };
 
 export const checkUserRole = (user) => {
   try {
-    let userRole = "";
+    let userRole = '';
     const decodedToken = jwtDecode(user.token);
     if (decodedToken) {
       userRole = decodedToken.role;
     }
     return { id: decodedToken.id, role: userRole };
   } catch (error) {
-    return { id: null, role: "" };
+    return { id: null, role: '' };
   }
 };

client/src/components/Home/Home.jsx

@@ -8,7 +8,6 @@ const Home = () => {
 
   useEffect(() => {
     if(user) {
-      console.log('navigate to homepage');
       navigate('/homepage');
     }
   }, [user, navigate]);

client/src/components/SimpleSnackbar.jsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+
+export default function SimpleSnackbar({ message = "Default message" }) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const action = (
+    <React.Fragment>
+      <Button color="secondary" size="small" onClick={handleClose}>
+        UNDO
+      </Button>
+      <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
+
+  return (
+    <div>
+      <Button onClick={handleClick}>Open Snackbar</Button>
+      <Snackbar
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        message={message} 
+        action={action}
+      />
+    </div>
+  );
+}