Ready to build profile route page

This commit is contained in:
2023-06-13 16:16:07 +02:00
parent b3e1a4544c
commit c01ed9ae49
5 changed files with 137 additions and 7 deletions

@ -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>
);
}

@ -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>
);
}