feat: loggedUser start

src/component/Navigation/Navigation.tsx

@@ -8,7 +8,8 @@ import {
   SunIcon,
   MoonIcon,
 } from "@heroicons/react/24/outline";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import axios from "axios";
 
 interface NavigationProps {
   children: React.ReactElement;
@@ -19,12 +20,13 @@ const Navigation: React.FC<NavigationProps> = ({
 }: NavigationProps) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
+  const [user, setUser] = useState(null);
+  const navigate = useNavigate();
 
   const [theme, setTheme] = useState(
     localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
   );
 
-    // update state on toggle
   const handleToggle = (e) => {
     if (theme === "light") {
       setTheme("dark");
@@ -33,15 +35,22 @@ const Navigation: React.FC<NavigationProps> = ({
     }
   };
 
-    // set theme state in localstorage on mount & also update localstorage on state change
   useEffect(() => {
+    axios.get("/api/users/me").then((res) => {
+      if (res.data.username.trim() === "") {
+        navigate("/login");
+      }
+      setUser(res.data);
+    });
     localStorage.setItem("theme", theme);
     const localTheme = localStorage.getItem("theme");
-        // add custom data-theme attribute to html tag required to update theme using DaisyUI
     document.querySelector("html").setAttribute("data-theme", localTheme);
   }, [theme]);
 
   return (
+    <>
+      {user && (
+        <>
           <div className="app h-screen">
             <div className="drawer">
               <input
@@ -68,6 +77,7 @@ const Navigation: React.FC<NavigationProps> = ({
               <div className="drawer-side">
                 <div className="drawer-overlay" onClick={toggleDrawer}></div>
                 <div className="h-full menu bg-base-200 text-base-content w-80">
+                  {user ? (
                     <li>
                       <div className="dropdown dropdown-bottom h-full">
                         <div
@@ -75,13 +85,7 @@ const Navigation: React.FC<NavigationProps> = ({
                           role="button"
                           className="flex avatar items-center space-x-4 w-64"
                         >
-                                    <div className="w-10 rounded-full">
-                                        <img
-                                            alt="Tailwind CSS Navbar component"
-                                            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
-                                        />
-                                    </div>
-                                    <a>Malopieds</a>
+                          <a>{user.username}</a>
                         </div>
                         <ul
                           tabIndex={0}
@@ -106,6 +110,14 @@ const Navigation: React.FC<NavigationProps> = ({
                         </ul>
                       </div>
                     </li>
+                  ) : (
+                    <li>
+                      <Link to="login" onClick={toggleDrawer}>
+                        Log Out
+                      </Link>
+                    </li>
+                  )}
+                  {user && user.roles.includes("root") && (
                     <li>
                       <div>
                         <ChartPieIcon className="size-6" />
@@ -114,6 +126,9 @@ const Navigation: React.FC<NavigationProps> = ({
                         </Link>
                       </div>
                     </li>
+                  )}
+                  {user && (
+                    <>
                       <li>
                         <div>
                           <ChartPieIcon className="size-6" />
@@ -144,10 +159,15 @@ const Navigation: React.FC<NavigationProps> = ({
                           <Link to="/messages">Messages</Link>
                         </div>
                       </li>
+                    </>
+                  )}
                 </div>
               </div>
             </div>
           </div>
+        </>
+      )}
+    </>
   );
 };