header/routes refacturing

Author: purshink

Hobbie_fullstack/react-frontend/src/App.js

@@ -13,7 +13,8 @@ import AccountBusiness from "./components/root/users/business/AccountBusiness/Ac
 import TestForm from "./components/root/users/user/test/TestForm";
 import CreateOffer from "./components/root/users/business/Offer/CreateOffer";
 import MyHobbies from "./components/root/users/user/MyHobbies";
-import ProtectedRoutes from "./components/protectedRoutes/ProtectedRoutes";
+import ProtectedRoutesGuest from "./components/protectedRoutes/ProtectedRoutesGuest";
+import ProtectedRoutesUser from "./components/protectedRoutes/ProtectedRoutesUser";
 import ProtectedRoutesBusiness from "./components/protectedRoutes/ProtectedRoutesBusiness";
 import EditUserProfile from "./components/root/users/user/accountUser/EditUserProfile";
 import EditBusinessProfile from "./components/root/users/business/AccountBusiness/EditBusinessProfile";
@@ -27,17 +28,18 @@ function App() {
       <div className="App">
         <Header />
         <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/signup" element={<SignUp />} />
-          <Route path="/register-business" element={<RegisterBusiness />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/change-password" element={<PasswordChange />} />
-          <Route
-            path="/change-password-new/:id"
-            element={<SetUpNewPassword />}
-          />
-
-          <Route element={<ProtectedRoutes />}>
+          <Route element={<ProtectedRoutesGuest />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route path="/register-business" element={<RegisterBusiness />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/change-password" element={<PasswordChange />} />
+            <Route
+              path="/change-password-new/:id"
+              element={<SetUpNewPassword />}
+            />
+          </Route>
+          <Route element={<ProtectedRoutesUser />}>
             <Route path="/edit-profile" element={<EditUserProfile />} />
             <Route path="/user-home" element={<UserHome />} />
             <Route path="/account-user" element={<AccountUser />} />

Hobbie_fullstack/react-frontend/src/components/protectedRoutes/ProtectedRoutesGuest.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import AuthenticationService from "../../api/authentication/AuthenticationService";
+import { Navigate } from "react-router-dom";
+
+const isUserLoggedIn = AuthenticationService.isUserLoggedIn();
+const isBusinessLoggedIn = AuthenticationService.isBusinessLoggedIn();
+
+const ProtectedRoutesGuest = () => {
+  if (isUserLoggedIn) {
+    return <Navigate to="/user-home" />;
+  } else if (isBusinessLoggedIn) {
+    return <Navigate to="/business-home" />;
+  } else {
+    return <Outlet />;
+  }
+};
+
+export default ProtectedRoutesGuest;

Hobbie_fullstack/react-frontend/src/components/protectedRoutes/ProtectedRoutes.jsx renamed to Hobbie_fullstack/react-frontend/src/components/protectedRoutes/ProtectedRoutesUser.jsx

@@ -6,9 +6,9 @@ import { Navigate } from "react-router-dom";
 const useAuth = () => {
   return AuthenticationService.isUserLoggedIn();
 };
-const ProtectedRoutes = () => {
+const ProtectedRoutesUser = () => {
   const isAuth = useAuth();
   return isAuth ? <Outlet /> : <Navigate to="/login" />;
 };
 
-export default ProtectedRoutes;
+export default ProtectedRoutesUser;

Hobbie_fullstack/react-frontend/src/components/root/fragments/header/logo/Logo.jsx

@@ -1,46 +1,64 @@
 import React from "react";
 import styles from "../../../../../css/Logo.module.css";
 import logo from "../../../../../img/logo.svg";
-import { Link } from "react-router-dom";
 import AuthenticationService from "../../../../../api/authentication/AuthenticationService";
+import { useNavigate } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 const Logo = () => {
   const isUserLoggedIn = AuthenticationService.isUserLoggedIn();
   const isBusinessLoggedIn = AuthenticationService.isBusinessLoggedIn();
+  const navigate = useNavigate();
 
   return (
     <section className={styles.logo_container}>
       {!isBusinessLoggedIn && !isUserLoggedIn && (
-        <Link to="/" className="">
+        <NavLink onClick={() => navigate("/")} to="/" className="">
           <img className={styles.imgHeader} src={logo} alt="logo" />
-        </Link>
+        </NavLink>
       )}
       {!isBusinessLoggedIn && !isUserLoggedIn && (
-        <Link to="/" className="">
+        <NavLink onClick={() => navigate("/")} to="/" className="">
           <h4 className={styles.logo}>obbie</h4>
-        </Link>
+        </NavLink>
       )}
 
       {isBusinessLoggedIn && (
-        <Link to="/business-owner" className="">
+        <NavLink
+          onClick={() => navigate("/business-home")}
+          to="/business-home"
+          className=""
+        >
           <img className={styles.imgHeader} src={logo} alt="logo" />
-        </Link>
+        </NavLink>
       )}
       {isBusinessLoggedIn && (
-        <Link to="/business-owner" className="">
+        <NavLink
+          onClick={() => navigate("/business-home")}
+          to="/business-home"
+          className=""
+        >
           <h4 className={styles.logo}>obbie</h4>
-        </Link>
+        </NavLink>
       )}
 
       {isUserLoggedIn && (
-        <Link to="/user-home" className="">
+        <NavLink
+          onClick={() => navigate("/user-home")}
+          to="/user-home"
+          className=""
+        >
           <img className={styles.imgHeader} src={logo} alt="logo" />
-        </Link>
+        </NavLink>
       )}
       {isUserLoggedIn && (
-        <Link to="/user-home" className="">
+        <NavLink
+          onClick={() => navigate("/user-home")}
+          to="/user-home"
+          className=""
+        >
           <h4 className={styles.logo}>obbie</h4>
-        </Link>
+        </NavLink>
       )}
     </section>
   );

Hobbie_fullstack/react-frontend/src/components/root/fragments/header/navbar/mobileMenu/Menu.jsx

@@ -5,12 +5,18 @@ import AuthenticationService from "../../../../../../api/authentication/Authenti
 import { NavLink } from "react-router-dom";
 import styles from "../../../../../../css/Navbar.module.css";
 import { useState } from "react";
+import { useEffect } from "react";
 
 const Menu = () => {
   const [clicked, setClicked] = useState(false);
   const userLogged = AuthenticationService.isUserLoggedIn();
   const businessLogged = AuthenticationService.isBusinessLoggedIn();
   const location = useLocation();
+  const pathname = location.pathname;
+
+  useEffect(() => {
+    setClicked(false);
+  }, [pathname]);
 
   return (
     <section className="menu">
@@ -72,17 +78,17 @@ const Menu = () => {
       {clicked && !businessLogged && !userLogged && (
         <menu className={styles.popup_menu}>
           <ul className={styles.nav_links_popup}>
-            {location.pathname !== "/signup" && location.pathname !== "/" && (
+            {pathname !== "/signup" && location.pathname !== "/" && (
               <li className={styles.nav_link}>
                 <NavLink to="/signup">Sign up</NavLink>
               </li>
             )}
-            {location.pathname !== "/register-business" && (
+            {pathname !== "/register-business" && (
               <li className={styles.nav_link}>
                 <NavLink to="register-business">Register Bizz</NavLink>
               </li>
             )}
-            {location.pathname !== "/login" && (
+            {pathname !== "/login" && (
               <li className={styles.nav_link}>
                 <NavLink to="/login">Login</NavLink>
               </li>

Hobbie_fullstack/react-frontend/src/css/Navbar.module.css

@@ -41,7 +41,7 @@
     padding-right: 20px;
     font-size: 12px;
     filter: invert(85%) sepia(3%) saturate(5839%) hue-rotate(183deg)
-      brightness(74%) contrast(95%);
+    brightness(74%) contrast(95%);
     color: rgb(135, 158, 187);
     cursor: pointer;
     font-weight: 200;