Provide user info in context

geneit_app/src/routes/ProfileRoute.tsx

@@ -10,47 +10,33 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import React, { useRef } from "react";
+import React from "react";
 import { ServerApi } from "../api/ServerApi";
 import { ReplacePasswordResponse, User, UserApi } from "../api/UserApi";
-import { AsyncWidget } from "../widgets/AsyncWidget";
+import { useAlert } from "../widgets/AlertDialogProvider";
+import { useUser } from "../widgets/BaseAuthenticatedPage";
+import { useConfirm } from "../widgets/ConfirmDialogProvider";
 import { PasswordInput } from "../widgets/PasswordInput";
 import { formatDate } from "../widgets/TimeWidget";
-import { useConfirm } from "../widgets/ConfirmDialogProvider";
-import { useAlert } from "../widgets/AlertDialogProvider";
 
 export function ProfileRoute(): React.ReactElement {
-  const [user, setUser] = React.useState<null | User>(null);
-
-  const load = async () => {
-    const u = await UserApi.GetUserInfo();
-    setUser(u);
-  };
-
-  const counter = useRef(0);
+  const user = useUser();
 
   return (
-    <AsyncWidget
-      loadKey={counter.current}
-      load={load}
-      errMsg="Echec du chargement des informations du compte utilisateur !"
-      build={() => (
     <div style={{ maxWidth: "500px", margin: "auto" }}>
       <Typography variant="h3">Profil</Typography>
 
       <ProfileSettingsCard
-            user={user!}
-            onUpdate={() => (counter.current += 1)}
+        user={user.user}
+        onUpdate={() => user.reloadUserInfo()}
       />
-          {user?.has_password && <ChangePasswordCard />}
+      {user.user.has_password && <ChangePasswordCard />}
       <DeleteAccountButton />
     </div>
-      )}
-    />
   );
 }
 
-function ProfileSettingsCard(p: { user: User; onUpdate: () => {} }) {
+function ProfileSettingsCard(p: { user: User; onUpdate: () => void }) {
   const [newName, setNewName] = React.useState(p.user.name);
 
   const [error, setError] = React.useState<string | null>(null);

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -15,6 +15,13 @@ import { User, UserApi } from "../api/UserApi";
 import { AsyncWidget } from "./AsyncWidget";
 import { RouterLink } from "./RouterLink";
 
+interface UserContext {
+  user: User;
+  reloadUserInfo: () => void;
+}
+
+const UserContextK = React.createContext<UserContext | null>(null);
+
 export function BaseAuthenticatedPage(): React.ReactElement {
   const [user, setUser] = React.useState<null | User>(null);
 
@@ -48,6 +55,12 @@ export function BaseAuthenticatedPage(): React.ReactElement {
       load={load}
       errMsg="Echec du chargement des informations utilisateur !"
       build={() => (
+        <UserContextK.Provider
+          value={{
+            user: user!,
+            reloadUserInfo: load,
+          }}
+        >
           <div
             style={{
               minHeight: "100vh",
@@ -110,7 +123,12 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             </AppBar>
             <Outlet />
           </div>
+        </UserContextK.Provider>
       )}
     />
   );
 }
+
+export function useUser(): UserContext {
+  return React.useContext(UserContextK)!;
+}