banquise/intra-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loggedUser start

Browse Source
This commit is contained in:
Malopieds 2024-10-15 22:53:46 +02:00
parent 8a48d3b6c6
commit 723285c140
Signed by: malopieds
GPG Key ID: 2E9430D75356529B
1 changed files with 154 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
src/component/Navigation/Navigation.tsx
View File

@ -1,154 +1,174 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
ChartPieIcon, ChartPieIcon,
DocumentTextIcon, DocumentTextIcon,
EnvelopeIcon, EnvelopeIcon,
CommandLineIcon, CommandLineIcon,
Bars3Icon, Bars3Icon,
SunIcon, SunIcon,
MoonIcon, MoonIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
interface NavigationProps { interface NavigationProps {
children: React.ReactElement; children: React.ReactElement;
} }
const Navigation: React.FC<NavigationProps> = ({ const Navigation: React.FC<NavigationProps> = ({
children, children,
}: NavigationProps) => { }: NavigationProps) => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen); const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
const [user, setUser] = useState(null);
const navigate = useNavigate();
const [theme, setTheme] = useState( const [theme, setTheme] = useState(
localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark", localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
); );
// update state on toggle const handleToggle = (e) => {
const handleToggle = (e) => { if (theme === "light") {
if (theme === "light") { setTheme("dark");
setTheme("dark"); } else {
} else { setTheme("light");
setTheme("light"); }
} };
};
// set theme state in localstorage on mount & also update localstorage on state change useEffect(() => {
useEffect(() => { axios.get("/api/users/me").then((res) => {
localStorage.setItem("theme", theme); if (res.data.username.trim() === "") {
const localTheme = localStorage.getItem("theme"); navigate("/login");
// add custom data-theme attribute to html tag required to update theme using DaisyUI }
document.querySelector("html").setAttribute("data-theme", localTheme); setUser(res.data);
}, [theme]); });
localStorage.setItem("theme", theme);
const localTheme = localStorage.getItem("theme");
document.querySelector("html").setAttribute("data-theme", localTheme);
}, [theme]);
return ( return (
<div className="app h-screen"> <>
{user && (
<>
<div className="app h-screen">
<div className="drawer"> <div className="drawer">
<input <input
id="my-drawer" id="my-drawer"
type="checkbox" type="checkbox"
className="drawer-toggle" className="drawer-toggle"
checked={isDrawerOpen} checked={isDrawerOpen}
/> />
<div className="drawer-content h-full"> <div className="drawer-content h-full">
<div className="p-6 flex justify-between"> <div className="p-6 flex justify-between">
<div className="btn btn-ghost" onClick={toggleDrawer}> <div className="btn btn-ghost" onClick={toggleDrawer}>
<Bars3Icon className="size-6" /> <Bars3Icon className="size-6" />
</div>
<label className="swap swap-rotate">
<input type="checkbox" onChange={handleToggle} />
<SunIcon className="size-6 swap-off" />
<MoonIcon className="size-6 swap-on" />
</label>
</div>
{children}
</div>
<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
tabIndex={0}
role="button"
className="flex avatar items-center space-x-4 w-64"
>
<a>{user.username}</a>
</div> </div>
<label className="swap swap-rotate"> <ul
<input type="checkbox" onChange={handleToggle} /> tabIndex={0}
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
<SunIcon className="size-6 swap-off" /> >
<MoonIcon className="size-6 swap-on" /> <li>
</label> <Link to="/profile" onClick={toggleDrawer}>
</div> Profile
{children} </Link>
</div> </li>
<li>
<div className="drawer-side"> <Link to="/settings" onClick={toggleDrawer}>
<div className="drawer-overlay" onClick={toggleDrawer}></div> Settings
<div className="h-full menu bg-base-200 text-base-content w-80"> </Link>
<li> </li>
<div className="dropdown dropdown-bottom h-full"> <div className="divider" onClick={toggleDrawer}></div>
<div <li>
tabIndex={0} <Link to="login" onClick={toggleDrawer}>
role="button" Log Out
className="flex avatar items-center space-x-4 w-64" </Link>
> </li>
<div className="w-10 rounded-full"> </ul>
<img </div>
alt="Tailwind CSS Navbar component" </li>
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" ) : (
/> <li>
</div> <Link to="login" onClick={toggleDrawer}>
<a>Malopieds</a> Log Out
</div> </Link>
<ul </li>
tabIndex={0} )}
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow" {user && user.roles.includes("root") && (
> <li>
<li> <div>
<Link to="/profile" onClick={toggleDrawer}> <ChartPieIcon className="size-6" />
Profile <Link to="/admin" onClick={toggleDrawer}>
</Link> Admin
</li> </Link>
<li> </div>
<Link to="/settings" onClick={toggleDrawer}> </li>
Settings )}
</Link> {user && (
</li> <>
<div className="divider" onClick={toggleDrawer}></div> <li>
<li> <div>
<Link to="login" onClick={toggleDrawer}> <ChartPieIcon className="size-6" />
Log Out <Link to="/" onClick={toggleDrawer}>
</Link> Dashboard
</li> </Link>
</ul> </div>
</div> </li>
</li> <li>
<li> <div>
<div> <DocumentTextIcon className="size-6" />
<ChartPieIcon className="size-6" /> <Link to="/tps" onClick={toggleDrawer}>
<Link to="/admin" onClick={toggleDrawer}> TPs
Admin </Link>
</Link> </div>
</div> </li>
</li> <li>
<li> <div>
<div> <CommandLineIcon className="size-6" />
<ChartPieIcon className="size-6" /> <Link to="/instances" onClick={toggleDrawer}>
<Link to="/" onClick={toggleDrawer}> Instances
Dashboard </Link>
</Link> </div>
</div> </li>
</li> <li>
<li> <div onClick={toggleDrawer}>
<div> <EnvelopeIcon className="size-6" />
<DocumentTextIcon className="size-6" /> <Link to="/messages">Messages</Link>
<Link to="/tps" onClick={toggleDrawer}> </div>
TPs </li>
</Link> </>
</div> )}
</li>
<li>
<div>
<CommandLineIcon className="size-6" />
<Link to="/instances" onClick={toggleDrawer}>
Instances
</Link>
</div>
</li>
<li>
<div onClick={toggleDrawer}>
<EnvelopeIcon className="size-6" />
<Link to="/messages">Messages</Link>
</div>
</li>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
); </>
)}
</>
);
}; };
export default Navigation; export default Navigation;