Refactor BasAuthenticatedPage

This commit is contained in:
Pierre HUBERT 2023-06-13 16:21:44 +02:00
parent c01ed9ae49
commit eb0c1a5c21
2 changed files with 74 additions and 105 deletions

View File

@ -22,9 +22,10 @@ async function init() {
root.render( root.render(
<React.StrictMode> <React.StrictMode>
{" "}
<BrowserRouter> <BrowserRouter>
<div style={{ height: "100vh" }}>
<App /> <App />
</div>
</BrowserRouter> </BrowserRouter>
</React.StrictMode> </React.StrictMode>
); );

View File

@ -13,16 +13,20 @@ import { Link, Outlet, useNavigate } from "react-router-dom";
import { AuthApi } from "../api/AuthApi"; import { AuthApi } from "../api/AuthApi";
import { User, UserApi } from "../api/UserApi"; import { User, UserApi } from "../api/UserApi";
import { RouterLink } from "./RouterLink"; import { RouterLink } from "./RouterLink";
import { AsyncWidget } from "./AsyncWidget";
export function BaseAuthenticatedPage(): React.ReactElement { export function BaseAuthenticatedPage(): React.ReactElement {
const [user, setUser] = React.useState<null | User>(null); const [user, setUser] = React.useState<null | User>(null);
const [error, setError] = React.useState(false);
const setSignedIn = useSetAtom(AuthApi.authStatus); const setSignedIn = useSetAtom(AuthApi.authStatus);
const navigate = useNavigate(); const navigate = useNavigate();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const load = async () => {
setUser(await UserApi.GetUserInfo());
};
const handleMenu = (event: React.MouseEvent<HTMLElement>) => { const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
@ -38,64 +42,26 @@ export function BaseAuthenticatedPage(): React.ReactElement {
setSignedIn(false); setSignedIn(false);
}; };
React.useEffect(() => {
const load = async () => {
if (error || user != null) return;
try {
const user = await UserApi.GetUserInfo();
setUser(user);
} catch (e) {
console.error(e);
setError(true);
}
};
load();
});
if (error)
return ( return (
<AsyncWidget
loadKey="1"
load={load}
errMsg="Echec du chargement des informations utilisateur !"
build={() => (
<div <div
style={{ style={{
height: "100vh", minHeight: "100vh",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
}} }}
>
<Alert
severity="error"
style={{ maxWidth: "300px", marginBottom: "10px" }}
>
Echec du chagement des informations utilisateur !
</Alert>
<a href="/">Réessayer</a>
</div>
);
if (user === null)
return (
<div
style={{
height: "100vh",
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
<CircularProgress />
</div>
);
return (
<div
style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
> >
<AppBar position="sticky"> <AppBar position="sticky">
<Toolbar> <Toolbar>
<Icon path={mdiFamilyTree} size={1} style={{ marginRight: "1rem" }} /> <Icon
path={mdiFamilyTree}
size={1}
style={{ marginRight: "1rem" }}
/>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<RouterLink to="/">GeneIT</RouterLink> <RouterLink to="/">GeneIT</RouterLink>
@ -103,7 +69,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
<div> <div>
<Button size="large" color="inherit"> <Button size="large" color="inherit">
{user.name} {user!.name}
</Button> </Button>
<Button <Button
@ -144,5 +110,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
</AppBar> </AppBar>
<Outlet /> <Outlet />
</div> </div>
)}
/>
); );
} }