Refactor BasAuthenticatedPage

geneit_app/src/index.tsx

@@ -22,9 +22,10 @@ async function init() {
 
     root.render(
       <React.StrictMode>
-        {" "}
         <BrowserRouter>
+          <div style={{ height: "100vh" }}>
             <App />
+          </div>
         </BrowserRouter>
       </React.StrictMode>
     );

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -13,16 +13,20 @@ import { Link, Outlet, useNavigate } from "react-router-dom";
 import { AuthApi } from "../api/AuthApi";
 import { User, UserApi } from "../api/UserApi";
 import { RouterLink } from "./RouterLink";
+import { AsyncWidget } from "./AsyncWidget";
 
 export function BaseAuthenticatedPage(): React.ReactElement {
   const [user, setUser] = React.useState<null | User>(null);
-  const [error, setError] = React.useState(false);
 
   const setSignedIn = useSetAtom(AuthApi.authStatus);
   const navigate = useNavigate();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
+  const load = async () => {
+    setUser(await UserApi.GetUserInfo());
+  };
+
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -38,64 +42,26 @@ export function BaseAuthenticatedPage(): React.ReactElement {
     setSignedIn(false);
   };
 
-  React.useEffect(() => {
-    const load = async () => {
-      if (error || user != null) return;
-      try {
-        const user = await UserApi.GetUserInfo();
-        setUser(user);
-      } catch (e) {
-        console.error(e);
-        setError(true);
-      }
-    };
-    load();
-  });
-
-  if (error)
   return (
+    <AsyncWidget
+      loadKey="1"
+      load={load}
+      errMsg="Echec du chargement des informations utilisateur !"
+      build={() => (
         <div
           style={{
-          height: "100vh",
+            minHeight: "100vh",
             display: "flex",
             flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
           }}
-      >
-        <Alert
-          severity="error"
-          style={{ maxWidth: "300px", marginBottom: "10px" }}
-        >
-          Echec du chagement des informations utilisateur !
-        </Alert>
-
-        <a href="/">Réessayer</a>
-      </div>
-    );
-
-  if (user === null)
-    return (
-      <div
-        style={{
-          height: "100vh",
-          justifyContent: "center",
-          alignItems: "center",
-          display: "flex",
-        }}
-      >
-        <CircularProgress />
-      </div>
-    );
-
-  return (
-    <div
-      style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
         >
           <AppBar position="sticky">
             <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 }}>
                 <RouterLink to="/">GeneIT</RouterLink>
@@ -103,7 +69,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
 
               <div>
                 <Button size="large" color="inherit">
-              {user.name}
+                  {user!.name}
                 </Button>
 
                 <Button
@@ -144,5 +110,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
           </AppBar>
           <Outlet />
         </div>
+      )}
+    />
   );
 }