GeneIT/geneit_app/src/widgets/BaseAuthenticatedPage.tsx

135 lines
3.9 KiB
TypeScript
Raw Normal View History

2023-06-09 16:27:03 +00:00
import { mdiFamilyTree } from "@mdi/js";
import Icon from "@mdi/react";
import SettingsIcon from "@mui/icons-material/Settings";
2023-06-13 14:22:23 +00:00
import { Button } from "@mui/material";
2023-06-09 09:19:40 +00:00
import AppBar from "@mui/material/AppBar";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import * as React from "react";
2023-06-13 14:16:07 +00:00
import { Link, Outlet, useNavigate } from "react-router-dom";
import { useAuth } from "../App";
2023-06-09 16:27:03 +00:00
import { AuthApi } from "../api/AuthApi";
2023-06-09 09:19:40 +00:00
import { User, UserApi } from "../api/UserApi";
2023-06-13 14:21:44 +00:00
import { AsyncWidget } from "./AsyncWidget";
2023-06-13 14:22:23 +00:00
import { RouterLink } from "./RouterLink";
2023-06-09 09:19:40 +00:00
2023-06-15 06:52:04 +00:00
interface UserContext {
user: User;
reloadUserInfo: () => void;
}
const UserContextK = React.createContext<UserContext | null>(null);
2023-06-09 09:19:40 +00:00
export function BaseAuthenticatedPage(): React.ReactElement {
const [user, setUser] = React.useState<null | User>(null);
const auth = useAuth();
2023-06-09 16:27:03 +00:00
const navigate = useNavigate();
2023-06-09 09:19:40 +00:00
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
2023-06-13 14:21:44 +00:00
const load = async () => {
setUser(await UserApi.GetUserInfo());
};
2023-06-09 09:19:40 +00:00
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
2023-06-09 16:27:03 +00:00
const handleCloseMenu = () => {
2023-06-09 09:19:40 +00:00
setAnchorEl(null);
};
2023-06-09 16:27:03 +00:00
const signOut = () => {
handleCloseMenu();
AuthApi.SignOut();
navigate("/");
auth.setSignedIn(false);
2023-06-09 16:27:03 +00:00
};
2023-06-09 09:19:40 +00:00
return (
2023-06-13 14:21:44 +00:00
<AsyncWidget
loadKey="1"
load={load}
errMsg="Echec du chargement des informations utilisateur !"
build={() => (
2023-06-15 06:52:04 +00:00
<UserContextK.Provider
value={{
user: user!,
reloadUserInfo: load,
2023-06-13 14:21:44 +00:00
}}
>
2023-06-15 06:52:04 +00:00
<div
style={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
}}
>
<AppBar position="sticky">
<Toolbar>
<Icon
path={mdiFamilyTree}
size={1}
style={{ marginRight: "1rem" }}
/>
2023-06-13 14:16:07 +00:00
2023-06-15 06:52:04 +00:00
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<RouterLink to="/">GeneIT</RouterLink>
</Typography>
2023-06-13 14:16:07 +00:00
2023-06-15 06:52:04 +00:00
<div>
<Button size="large" color="inherit">
{user!.name}
</Button>
2023-06-09 09:19:40 +00:00
2023-06-15 06:52:04 +00:00
<Button
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
2023-06-13 14:21:44 +00:00
>
2023-06-15 06:52:04 +00:00
<SettingsIcon />
</Button>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorEl)}
onClose={handleCloseMenu}
>
<Link
to="/profile"
style={{ color: "inherit", textDecoration: "none" }}
>
<MenuItem onClick={handleCloseMenu}>Profil</MenuItem>
</Link>
<MenuItem onClick={signOut}>Déconnexion</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
<Outlet />
</div>
</UserContextK.Provider>
2023-06-13 14:21:44 +00:00
)}
/>
2023-06-09 09:19:40 +00:00
);
}
2023-06-15 06:52:04 +00:00
export function useUser(): UserContext {
return React.useContext(UserContextK)!;
}