From 79a07bb433b7a20cd2009797e27bea5af477a1ed Mon Sep 17 00:00:00 2001
From: Harry Mellor <19981378+hmellor@users.noreply.github.com>
Date: Sat, 9 Mar 2024 15:26:40 +0000
Subject: [PATCH] Enable `Navbar` to navigate back to the home screen (#69)

---
 src/components/Navbar.jsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8eb7cd3c..1004fb78 100644
--- 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,13 +10,15 @@ 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");
       }
     });
 
@@ -24,14 +26,20 @@ const Navbar = ({ admin }) => {
     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>