Ready to build profile route page
This commit is contained in:
geneit_app/src
78
geneit_app/src/widgets/AsyncWidget.tsx
Normal file
78
geneit_app/src/widgets/AsyncWidget.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { Alert, Button, CircularProgress } from "@mui/material";
|
||||
import { PropsWithChildren, useEffect, useRef, useState } from "react";
|
||||
|
||||
enum State {
|
||||
Loading,
|
||||
Ready,
|
||||
Error,
|
||||
}
|
||||
|
||||
export function AsyncWidget(p: {
|
||||
loadKey: any;
|
||||
load: () => Promise<void>;
|
||||
errMsg: string;
|
||||
build: () => React.ReactElement;
|
||||
}): React.ReactElement {
|
||||
const [state, setState] = useState(State.Loading);
|
||||
|
||||
const counter = useRef<any | null>(null);
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
setState(State.Loading);
|
||||
await p.load();
|
||||
setState(State.Ready);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setState(State.Error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (counter.current === p.loadKey) return;
|
||||
counter.current = p.loadKey;
|
||||
|
||||
load();
|
||||
});
|
||||
|
||||
if (state === State.Loading)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
);
|
||||
|
||||
if (state === State.Error)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
flex: "1",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Alert
|
||||
variant="outlined"
|
||||
severity="error"
|
||||
style={{ marginBottom: "15px" }}
|
||||
>
|
||||
{p.errMsg}
|
||||
</Alert>
|
||||
|
||||
<Button onClick={load}>Réessayer</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return p.build();
|
||||
}
|
@ -9,9 +9,10 @@ import Toolbar from "@mui/material/Toolbar";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useSetAtom } from "jotai";
|
||||
import * as React from "react";
|
||||
import { Outlet, useNavigate } from "react-router-dom";
|
||||
import { Link, Outlet, useNavigate } from "react-router-dom";
|
||||
import { AuthApi } from "../api/AuthApi";
|
||||
import { User, UserApi } from "../api/UserApi";
|
||||
import { RouterLink } from "./RouterLink";
|
||||
|
||||
export function BaseAuthenticatedPage(): React.ReactElement {
|
||||
const [user, setUser] = React.useState<null | User>(null);
|
||||
@ -89,13 +90,17 @@ export function BaseAuthenticatedPage(): React.ReactElement {
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppBar position="fixed">
|
||||
<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 }}>
|
||||
GeneIT
|
||||
<RouterLink to="/">GeneIT</RouterLink>
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Button size="large" color="inherit">
|
||||
{user.name}
|
||||
@ -126,13 +131,18 @@ export function BaseAuthenticatedPage(): React.ReactElement {
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleCloseMenu}
|
||||
>
|
||||
<MenuItem onClick={handleCloseMenu}>Profil</MenuItem>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
12
geneit_app/src/widgets/RouterLink.tsx
Normal file
12
geneit_app/src/widgets/RouterLink.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { PropsWithChildren } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function RouterLink(
|
||||
p: PropsWithChildren<{ to: string }>
|
||||
): React.ReactElement {
|
||||
return (
|
||||
<Link to={p.to} style={{ color: "inherit", textDecoration: "inherit" }}>
|
||||
{p.children}
|
||||
</Link>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user