pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 1 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
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(
<React.StrictMode>
{" "}
<BrowserRouter>
<App />
<div style={{ height: "100vh" }}>
<App />
</div>
</BrowserRouter>
</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 { User, UserApi } from "../api/UserApi";
import { RouterLink } from "./RouterLink";
import { AsyncWidget } from "./AsyncWidget";
export function BaseAuthenticatedPage(): React.ReactElement {
const [user, setUser] = React.useState<null | User>(null);
const [error, setError] = React.useState(false);
const setSignedIn = useSetAtom(AuthApi.authStatus);
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const load = async () => {
setUser(await UserApi.GetUserInfo());
};
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
@@ -38,111 +42,75 @@ export function BaseAuthenticatedPage(): React.ReactElement {
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 (
<div
style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
>
<AppBar position="sticky">
<Toolbar>
<Icon path={mdiFamilyTree} size={1} style={{ marginRight: "1rem" }} />
<AsyncWidget
loadKey="1"
load={load}
errMsg="Echec du chargement des informations utilisateur !"
build={() => (
<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 }}>
<RouterLink to="/">GeneIT</RouterLink>
</Typography>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<RouterLink to="/">GeneIT</RouterLink>
</Typography>
<div>
<Button size="large" color="inherit">
{user.name}
</Button>
<div>
<Button size="large" color="inherit">
{user!.name}
</Button>
<Button
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<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>
<Button
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<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>
)}
/>
);
}