Enable NavBar to navigate back to the home screen

hmellor · Mar 9, 2024 · 34ce0a5 · 34ce0a5
1 parent 9a60fd8
commit 34ce0a5
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
-import { useNavigate } from "react-router";
+import { useNavigate, useLocation } from "react-router";
 import { auth } from "../firebase/config";
 import { onAuthStateChanged } from "firebase/auth";
 import { ModalsContext } from "../contexts/ModalsProvider";
@@ -10,28 +10,36 @@ const Navbar = ({ admin }) => {
   const openModal = useContext(ModalsContext).openModal;
   const navigate = useNavigate();
   const [user, setUser] = useState("");
-  const [buttonText, setButtonText] = useState("Sign up");
+  const [authButtonText, setAuthButtonText] = useState("Sign up");
+  const [adminButtonText, setAdminButtonText] = useState("Admin");
+  const location = useLocation();
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
       if (user && user.displayName != null) {
         setUser(`Hi ${user.displayName}`);
-        setButtonText("Sign out");
+        setAuthButtonText("Sign out");
       }
     });
 
     // Clean up the onAuthStateChanged listener when the component unmounts
     return () => unsubscribe();
   }, [user.displayName]);
 
-  const handleNavigate = () => {
-    navigate(import.meta.env.BASE_URL + "admin");
+  const handleAdmin = () => {
+    if (location.pathname.includes("admin")) {
+      navigate(import.meta.env.BASE_URL);
+      setAdminButtonText("Admin");
+    } else {
+      navigate(import.meta.env.BASE_URL + "admin");
+      setAdminButtonText("Home");
+    }
   };
 
-  const handleSignInOut = () => {
+  const handleAuth = () => {
     if (user) {
       setUser("");
-      setButtonText("Sign up");
+      setAuthButtonText("Sign up");
     } else {
       openModal(ModalTypes.SIGN_UP);
     }
@@ -53,13 +61,9 @@ const Navbar = ({ admin }) => {
         <div className="row row-cols-auto">
           <div className="navbar-brand">{user}</div>
           {admin && (
-            <button onClick={handleNavigate} className="btn btn-secondary me-2">
-              Admin
-            </button>
+            <button onClick={handleAdmin} className="btn btn-secondary me-2">{adminButtonText}</button>
           )}
-          <button onClick={handleSignInOut} className="btn btn-secondary me-2">
-            {buttonText}
-          </button>
+          <button onClick={handleAuth} className="btn btn-secondary me-2">{authButtonText}</button>
         </div>
       </div>
     </nav>