pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor BasAuthenticatedPage

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
geneit_app/src/index.tsx
View File

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

174
geneit_app/src/widgets/BaseAuthenticatedPage.tsx
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,111 +42,75 @@ 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 (
<div
style={{
height: "100vh",
display: "flex",
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 ( return (
<div <AsyncWidget
style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }} loadKey="1"
> load={load}
<AppBar position="sticky"> errMsg="Echec du chargement des informations utilisateur !"
<Toolbar> build={() => (
<Icon path={mdiFamilyTree} size={1} style={{ marginRight: "1rem" }} /> <div
style={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
}}
>
<AppBar position="sticky">
<Toolbar>
<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>
</Typography> </Typography>
<div> <div>
<Button size="large" color="inherit"> <Button size="large" color="inherit">
{user.name} {user!.name}
</Button> </Button>
<Button <Button
size="large" size="large"
aria-label="account of current user" aria-label="account of current user"
aria-controls="menu-appbar" aria-controls="menu-appbar"
aria-haspopup="true" aria-haspopup="true"
onClick={handleMenu} onClick={handleMenu}
color="inherit" color="inherit"
> >
<SettingsIcon /> <SettingsIcon />
</Button> </Button>
<Menu <Menu
id="menu-appbar" id="menu-appbar"
anchorEl={anchorEl} anchorEl={anchorEl}
anchorOrigin={{ anchorOrigin={{
vertical: "top", vertical: "top",
horizontal: "right", horizontal: "right",
}} }}
keepMounted keepMounted
transformOrigin={{ transformOrigin={{
vertical: "top", vertical: "top",
horizontal: "right", horizontal: "right",
}} }}
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={handleCloseMenu} onClose={handleCloseMenu}
> >
<Link <Link
to="/profile" to="/profile"
style={{ color: "inherit", textDecoration: "none" }} style={{ color: "inherit", textDecoration: "none" }}
> >
<MenuItem onClick={handleCloseMenu}>Profil</MenuItem> <MenuItem onClick={handleCloseMenu}>Profil</MenuItem>
</Link> </Link>
<MenuItem onClick={signOut}>Déconnexion</MenuItem> <MenuItem onClick={signOut}>Déconnexion</MenuItem>
</Menu> </Menu>
</div> </div>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Outlet /> <Outlet />
</div> </div>
)}
/>
); );
} }