Ready to build profile route page

geneit_app/src/App.tsx

@@ -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 />} />

geneit_app/src/routes/ProfileRoute.tsx

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

geneit_app/src/widgets/AsyncWidget.tsx

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

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -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 (
-    <>
+    <div
-      <AppBar position="fixed">
+      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>
   );
 }

geneit_app/src/widgets/RouterLink.tsx

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