Ready to build profile route page

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

View File

@ -10,6 +10,7 @@ import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute"; import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute";
import { ResetPasswordRoute } from "./routes/auth/ResetPasswordRoute"; import { ResetPasswordRoute } from "./routes/auth/ResetPasswordRoute";
import { NewAccountRoute } from "./routes/auth/NewAccountRoute"; import { NewAccountRoute } from "./routes/auth/NewAccountRoute";
import { ProfileRoute } from "./routes/ProfileRoute";
/** /**
* Core app * Core app
@ -20,7 +21,10 @@ function App() {
return ( return (
<Routes> <Routes>
{signedIn ? ( {signedIn ? (
<Route path="*" element={<BaseAuthenticatedPage />} /> <Route path="*" element={<BaseAuthenticatedPage />}>
<Route path="profile" element={<ProfileRoute />} />
<Route path="*" element={<NotFoundRoute />} />
</Route>
) : ( ) : (
<Route path="*" element={<BaseLoginPage />}> <Route path="*" element={<BaseLoginPage />}>
<Route path="" element={<LoginRoute />} /> <Route path="" element={<LoginRoute />} />

View File

@ -0,0 +1,26 @@
import React, { useRef } from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { User, UserApi } from "../api/UserApi";
export function ProfileRoute(): React.ReactElement {
const [user, setUser] = React.useState<null | User>(null);
const load = async () => {
setUser(await UserApi.GetUserInfo());
};
const counter = useRef(0);
return (
<AsyncWidget
loadKey={counter.current}
load={load}
errMsg="Echec du chargement des informations du compte utilisateur !"
build={() => (
<>
<p>ready !!! {user!.name}</p>
</>
)}
/>
);
}

View 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();
}

View File

@ -9,9 +9,10 @@ import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import { useSetAtom } from "jotai"; import { useSetAtom } from "jotai";
import * as React from "react"; 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 { AuthApi } from "../api/AuthApi";
import { User, UserApi } from "../api/UserApi"; import { User, UserApi } from "../api/UserApi";
import { RouterLink } from "./RouterLink";
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);
@ -89,13 +90,17 @@ export function BaseAuthenticatedPage(): React.ReactElement {
); );
return ( return (
<> <div
<AppBar position="fixed"> style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
>
<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 }}>
GeneIT <RouterLink to="/">GeneIT</RouterLink>
</Typography> </Typography>
<div> <div>
<Button size="large" color="inherit"> <Button size="large" color="inherit">
{user.name} {user.name}
@ -126,13 +131,18 @@ export function BaseAuthenticatedPage(): React.ReactElement {
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={handleCloseMenu} 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> <MenuItem onClick={signOut}>Déconnexion</MenuItem>
</Menu> </Menu>
</div> </div>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Outlet /> <Outlet />
</> </div>
); );
} }

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