geneit_app/src/App.tsx

@@ -37,6 +37,7 @@ import { FamilyCouplesListRoute } from "./routes/family/genealogy/FamilyCouplesL
 import { FamilyTreeRoute } from "./routes/family/genealogy/FamilyTreeRoute";
 import { FamilyMemberTreeRoute } from "./routes/family/genealogy/FamilyMemberTreeRoute";
 import { GenealogyHomeRoute } from "./routes/family/genealogy/GenealogyHomeRoute";
+import { BaseGenealogyRoute } from "./widgets/genealogy/BaseGenealogyRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -68,7 +69,7 @@ export function App(): React.ReactElement {
             <Route path="family/:familyId/*" element={<BaseFamilyRoute />}>
               <Route path="" element={<FamilyHomeRoute />} />
 
-              <Route path="genealogy/*">
+              <Route path="genealogy/*" element={<BaseGenealogyRoute />}>
                 <Route path="" element={<GenealogyHomeRoute />} />
 
                 <Route path="members" element={<FamilyMembersListRoute />} />

geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { CoupleApi, CouplesList } from "../../api/genealogy/CoupleApi";
+import { MemberApi, MembersList } from "../../api/genealogy/MemberApi";
+import { AsyncWidget } from "../AsyncWidget";
+import { useFamily } from "../BaseFamilyRoute";
+
+interface FamilyContext {
+  members: MembersList;
+  couples: CouplesList;
+  reloadMembersList: () => Promise<void>;
+  reloadCouplesList: () => Promise<void>;
+}
+
+const GenealogyContextK = React.createContext<FamilyContext | null>(null);
+
+export function BaseGenealogyRoute(): React.ReactElement {
+  const family = useFamily();
+
+  const [members, setMembers] = React.useState<null | MembersList>(null);
+  const [couples, setCouples] = React.useState<null | CouplesList>(null);
+
+  const loadKey = React.useRef(1);
+
+  const loadPromise = React.useRef<() => void>();
+
+  const load = async () => {
+    setMembers(await MemberApi.GetEntireList(family.familyId));
+    setCouples(await CoupleApi.GetEntireList(family.familyId));
+  };
+
+  const onReload = async () => {
+    loadKey.current += 1;
+    setMembers(null);
+    setCouples(null);
+
+    return new Promise<void>((res, _rej) => {
+      loadPromise.current = () => res();
+    });
+  };
+
+  return (
+    <AsyncWidget
+      ready={family !== null && members !== null}
+      loadKey={`${family.familyId}-${loadKey.current}`}
+      load={load}
+      errMsg="Échec du chargement des informations de généalogie de la famille !"
+      build={() => {
+        if (loadPromise.current != null) {
+          loadPromise.current?.();
+          loadPromise.current = undefined;
+        }
+
+        return (
+          <GenealogyContextK.Provider
+            value={{
+              members: members!,
+              couples: couples!,
+              reloadMembersList: onReload,
+              reloadCouplesList: onReload,
+            }}
+          >
+            <Outlet />
+          </GenealogyContextK.Provider>
+        );
+      }}
+    />
+  );
+}
+
+export function useGenealogy(): FamilyContext {
+  return React.useContext(GenealogyContextK)!;
+}