Ready to build profile route page
This commit is contained in:
parent
b3e1a4544c
commit
c01ed9ae49
@ -10,6 +10,7 @@ import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
|
||||
import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute";
|
||||
import { ResetPasswordRoute } from "./routes/auth/ResetPasswordRoute";
|
||||
import { NewAccountRoute } from "./routes/auth/NewAccountRoute";
|
||||
import { ProfileRoute } from "./routes/ProfileRoute";
|
||||
|
||||
/**
|
||||
* Core app
|
||||
@ -20,7 +21,10 @@ function App() {
|
||||
return (
|
||||
<Routes>
|
||||
{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={<LoginRoute />} />
|
||||
|
26
geneit_app/src/routes/ProfileRoute.tsx
Normal file
26
geneit_app/src/routes/ProfileRoute.tsx
Normal 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>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
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}
|
||||
@ -125,14 +130,19 @@ export function BaseAuthenticatedPage(): React.ReactElement {
|
||||
}}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user