Merge pull request #17 from Saulul/elliot-homepage

Added toast on signout.

src/components/Header.jsx

@@ -13,13 +13,16 @@ import { Link, useNavigate } from "react-router-dom";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { Snackbar } from "@mui/material";
+import Alert from "@mui/material/Alert";
 
 const API_URL = "https://eventhive.creeknet.xyz/api";
 
 const Header = () => {
   const navigate = useNavigate();
   const [anchorEl, setAnchorEl] = useState(null);
   const [userFirstName, setUserFirstName] = useState("");
+  const [openSnackbar, setOpenSnackbar] = useState(false);
   const open = Boolean(anchorEl);
 
   const isLoggedIn = () => {
@@ -30,6 +33,7 @@ const Header = () => {
     localStorage.removeItem("jwt");
     setUserFirstName("");
     navigate("/");
+    setOpenSnackbar(true); // Show the Snackbar
   };
 
   const handleClick = (event) => {
@@ -40,6 +44,14 @@ const Header = () => {
     setAnchorEl(null);
   };
 
+  const handleCloseSnackbar = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
+
   useEffect(() => {
     const fetchUserData = async () => {
       const jwt = localStorage.getItem("jwt");
@@ -144,6 +156,20 @@ const Header = () => {
           </>
         )}
       </div>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={6000}
+        onClose={handleCloseSnackbar}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert
+          onClose={handleCloseSnackbar}
+          severity="success"
+          sx={{ width: "100%" }}
+        >
+          You have been logged out successfully
+        </Alert>
+      </Snackbar>
     </div>
   );
 };