feat: loggedUser start
This commit is contained in:
parent
8a48d3b6c6
commit
723285c140
GPG Key ID:
2E9430D75356529B
@ -1,154 +1,174 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
ChartPieIcon,
|
||||
DocumentTextIcon,
|
||||
EnvelopeIcon,
|
||||
CommandLineIcon,
|
||||
Bars3Icon,
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
ChartPieIcon,
|
||||
DocumentTextIcon,
|
||||
EnvelopeIcon,
|
||||
CommandLineIcon,
|
||||
Bars3Icon,
|
||||
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;
|
||||
children: React.ReactElement;
|
||||
}
|
||||
|
||||
const Navigation: React.FC<NavigationProps> = ({
|
||||
children,
|
||||
children,
|
||||
}: NavigationProps) => {
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
||||
const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
|
||||
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",
|
||||
);
|
||||
const [theme, setTheme] = useState(
|
||||
localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
|
||||
);
|
||||
|
||||
// update state on toggle
|
||||
const handleToggle = (e) => {
|
||||
if (theme === "light") {
|
||||
setTheme("dark");
|
||||
} else {
|
||||
setTheme("light");
|
||||
}
|
||||
};
|
||||
const handleToggle = (e) => {
|
||||
if (theme === "light") {
|
||||
setTheme("dark");
|
||||
} else {
|
||||
setTheme("light");
|
||||
}
|
||||
};
|
||||
|
||||
// set theme state in localstorage on mount & also update localstorage on state change
|
||||
useEffect(() => {
|
||||
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]);
|
||||
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");
|
||||
document.querySelector("html").setAttribute("data-theme", localTheme);
|
||||
}, [theme]);
|
||||
|
||||
return (
|
||||
<div className="app h-screen">
|
||||
return (
|
||||
<>
|
||||
{user && (
|
||||
<>
|
||||
<div className="app h-screen">
|
||||
<div className="drawer">
|
||||
<input
|
||||
id="my-drawer"
|
||||
type="checkbox"
|
||||
className="drawer-toggle"
|
||||
checked={isDrawerOpen}
|
||||
/>
|
||||
<div className="drawer-content h-full">
|
||||
<div className="p-6 flex justify-between">
|
||||
<div className="btn btn-ghost" onClick={toggleDrawer}>
|
||||
<Bars3Icon className="size-6" />
|
||||
<input
|
||||
id="my-drawer"
|
||||
type="checkbox"
|
||||
className="drawer-toggle"
|
||||
checked={isDrawerOpen}
|
||||
/>
|
||||
<div className="drawer-content h-full">
|
||||
<div className="p-6 flex justify-between">
|
||||
<div className="btn btn-ghost" onClick={toggleDrawer}>
|
||||
<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>
|
||||
<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">
|
||||
<li>
|
||||
<div className="dropdown dropdown-bottom h-full">
|
||||
<div
|
||||
tabIndex={0}
|
||||
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>
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
|
||||
>
|
||||
<li>
|
||||
<Link to="/profile" onClick={toggleDrawer}>
|
||||
Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/settings" onClick={toggleDrawer}>
|
||||
Settings
|
||||
</Link>
|
||||
</li>
|
||||
<div className="divider" onClick={toggleDrawer}></div>
|
||||
<li>
|
||||
<Link to="login" onClick={toggleDrawer}>
|
||||
Log Out
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<ChartPieIcon className="size-6" />
|
||||
<Link to="/admin" onClick={toggleDrawer}>
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<ChartPieIcon className="size-6" />
|
||||
<Link to="/" onClick={toggleDrawer}>
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<DocumentTextIcon className="size-6" />
|
||||
<Link to="/tps" onClick={toggleDrawer}>
|
||||
TPs
|
||||
</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>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
|
||||
>
|
||||
<li>
|
||||
<Link to="/profile" onClick={toggleDrawer}>
|
||||
Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/settings" onClick={toggleDrawer}>
|
||||
Settings
|
||||
</Link>
|
||||
</li>
|
||||
<div className="divider" onClick={toggleDrawer}></div>
|
||||
<li>
|
||||
<Link to="login" onClick={toggleDrawer}>
|
||||
Log Out
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Link to="login" onClick={toggleDrawer}>
|
||||
Log Out
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
{user && user.roles.includes("root") && (
|
||||
<li>
|
||||
<div>
|
||||
<ChartPieIcon className="size-6" />
|
||||
<Link to="/admin" onClick={toggleDrawer}>
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{user && (
|
||||
<>
|
||||
<li>
|
||||
<div>
|
||||
<ChartPieIcon className="size-6" />
|
||||
<Link to="/" onClick={toggleDrawer}>
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<DocumentTextIcon className="size-6" />
|
||||
<Link to="/tps" onClick={toggleDrawer}>
|
||||
TPs
|
||||
</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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user