Load genealogy data only on genealogy pages

geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx

@@ -6,12 +6,14 @@ import SaveIcon from "@mui/icons-material/Save";
 import { Button, Grid, Stack } from "@mui/material";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { ServerApi } from "../../../api/ServerApi";
 import { Couple, CoupleApi } from "../../../api/genealogy/CoupleApi";
 import { Member } from "../../../api/genealogy/MemberApi";
-import { ServerApi } from "../../../api/ServerApi";
 import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
 import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
+import { useQuery } from "../../../hooks/useQuery";
 import { AsyncWidget } from "../../../widgets/AsyncWidget";
 import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { ConfirmLeaveWithoutSaveDialog } from "../../../widgets/ConfirmLeaveWithoutSaveDialog";
@@ -24,8 +26,7 @@ import { DateInput } from "../../../widgets/forms/DateInput";
 import { MemberInput } from "../../../widgets/forms/MemberInput";
 import { PropSelect } from "../../../widgets/forms/PropSelect";
 import { UploadPhotoButton } from "../../../widgets/forms/UploadPhotoButton";
-import { useQuery } from "../../../hooks/useQuery";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
-import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
 
 /**
  * Create a new couple route
@@ -36,6 +37,7 @@ export function FamilyCreateCoupleRoute(): React.ReactElement {
 
   const [shouldQuit, setShouldQuit] = React.useState(false);
   const n = useNavigate();
+  const genealogy = useGenealogy();
   const family = useFamily();
 
   const params = useQuery();
@@ -49,7 +51,7 @@ export function FamilyCreateCoupleRoute(): React.ReactElement {
     try {
       const r = await CoupleApi.Create(m);
 
-      await family.reloadCouplesList();
+      await genealogy.reloadCouplesList();
 
       setShouldQuit(true);
       n(family.family.coupleURL(r));
@@ -89,6 +91,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
   const snackbar = useSnackbar();
 
   const family = useFamily();
+  const genealogy = useGenealogy();
   const { coupleId } = useParams();
 
   const [couple, setCouple] = React.useState<Couple>();
@@ -100,7 +103,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
     count.current += 1;
     setCouple(undefined);
 
-    await family.reloadCouplesList();
+    await genealogy.reloadCouplesList();
   };
 
   const deleteCouple = async () => {
@@ -117,7 +120,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
       snackbar("La fiche du couple a été supprimée avec succès !");
       n(family.family.URL("genealogy/couples"));
 
-      await family.reloadCouplesList();
+      await genealogy.reloadCouplesList();
     } catch (e) {
       console.error(e);
       alert("Échec de la suppression du couple !");
@@ -133,7 +136,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
       build={() => (
         <CouplePage
           couple={couple!}
-          children={family.members.childrenOfCouple(couple!)}
+          children={genealogy.members.childrenOfCouple(couple!)}
           creating={false}
           editing={false}
           onRequestDelete={deleteCouple}
@@ -157,6 +160,7 @@ export function FamilyEditCoupleRoute(): React.ReactElement {
 
   const [shouldQuit, setShouldQuit] = React.useState(false);
 
+  const genealogy = useGenealogy();
   const family = useFamily();
 
   const [couple, setCouple] = React.useState<Couple>();
@@ -176,7 +180,7 @@ export function FamilyEditCoupleRoute(): React.ReactElement {
 
       snackbar("Les informations du couple ont été mises à jour avec succès !");
 
-      await family.reloadCouplesList();
+      await genealogy.reloadCouplesList();
 
       setShouldQuit(true);
       n(family.family.coupleURL(c, false));

geneit_app/src/routes/family/genealogy/FamilyCouplesListRoute.tsx

@@ -17,6 +17,7 @@ import { CouplePhoto } from "../../../widgets/CouplePhoto";
 import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
 import { MemberPhoto } from "../../../widgets/MemberPhoto";
 import { RouterLink } from "../../../widgets/RouterLink";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
 
 export function FamilyCouplesListRoute(): React.ReactElement {
   const alert = useAlert();
@@ -24,6 +25,7 @@ export function FamilyCouplesListRoute(): React.ReactElement {
   const snackbar = useSnackbar();
 
   const family = useFamily();
+  const genealogy = useGenealogy();
 
   const [filter, setFilter] = React.useState("");
 
@@ -37,7 +39,7 @@ export function FamilyCouplesListRoute(): React.ReactElement {
         return;
 
       await CoupleApi.Delete(c);
-      await family.reloadCouplesList();
+      await genealogy.reloadCouplesList();
 
       snackbar("La fiche du couple a été supprimée avec succès !");
     } catch (e) {
@@ -63,7 +65,7 @@ export function FamilyCouplesListRoute(): React.ReactElement {
         </RouterLink>
       </div>
 
-      {family.couples.isEmpty ? (
+      {genealogy.couples.isEmpty ? (
         <p>
           Votre famille n'a aucun couple enregistré pour le moment ! Utilisez le
           bouton situé en haut à droite pour créer le premier !
@@ -81,16 +83,16 @@ export function FamilyCouplesListRoute(): React.ReactElement {
           <CouplesTable
             couples={
               filter === ""
-                ? family.couples.fullList
+                ? genealogy.couples.fullList
-                : family.couples.filter(
+                : genealogy.couples.filter(
                     (m) =>
                       (m.wife &&
-                        family.members
+                        genealogy.members
                           .get(m.wife)!
                           .fullName.toLocaleLowerCase()
                           .includes(filter.toLocaleLowerCase())) ||
                       (m.husband &&
-                        family.members
+                        genealogy.members
                           .get(m.husband)!
                           .fullName.toLocaleLowerCase()
                           .includes(filter.toLocaleLowerCase())) === true
@@ -109,14 +111,18 @@ function CouplesTable(p: {
   onDelete: (m: Couple) => void;
 }): React.ReactElement {
   const family = useFamily();
+  const genealogy = useGenealogy();
+
   const n = useNavigate();
 
   const compareInvertedMembersNames = (
     v1: number | undefined,
     v2: number | undefined
   ) => {
-    const n1 = ((v1 && family.members.get(v1)?.invertedFullName) ?? "") || "";
+    const n1 =
-    const n2 = ((v2 && family.members.get(v2)?.invertedFullName) ?? "") || "";
+      ((v1 && genealogy.members.get(v1)?.invertedFullName) ?? "") || "";
+    const n2 =
+      ((v2 && genealogy.members.get(v2)?.invertedFullName) ?? "") || "";
 
     return n1?.localeCompare(n2, undefined, {
       ignorePunctuation: true,
@@ -259,10 +265,10 @@ function CouplesTable(p: {
 }
 
 function MemberCell(p: { id?: number }): React.ReactElement {
-  const family = useFamily();
+  const genealogy = useGenealogy();
   if (!p.id) return <></>;
 
-  const member = family.members.get(p.id!)!;
+  const member = genealogy.members.get(p.id!)!;
 
   return (
     <Tooltip title="Double-cliquez ici pour accéder à la fiche du membre">

geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx

@@ -1,3 +1,5 @@
+import { mdiFamilyTree } from "@mdi/js";
+import Icon from "@mdi/react";
 import ClearIcon from "@mui/icons-material/Clear";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
@@ -14,12 +16,14 @@ import {
 import * as EmailValidator from "email-validator";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { ServerApi } from "../../../api/ServerApi";
 import { Couple } from "../../../api/genealogy/CoupleApi";
 import { Member, MemberApi, fmtDate } from "../../../api/genealogy/MemberApi";
-import { ServerApi } from "../../../api/ServerApi";
 import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
 import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
+import { useQuery } from "../../../hooks/useQuery";
 import { AsyncWidget } from "../../../widgets/AsyncWidget";
 import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { ConfirmLeaveWithoutSaveDialog } from "../../../widgets/ConfirmLeaveWithoutSaveDialog";
@@ -36,10 +40,7 @@ import { PropEdit } from "../../../widgets/forms/PropEdit";
 import { PropSelect } from "../../../widgets/forms/PropSelect";
 import { SexSelection } from "../../../widgets/forms/SexSelection";
 import { UploadPhotoButton } from "../../../widgets/forms/UploadPhotoButton";
-import { useQuery } from "../../../hooks/useQuery";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
-import { mdiFamilyTree } from "@mdi/js";
-import Icon from "@mdi/react";
-import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
 
 /**
  * Create a new member route
@@ -50,6 +51,7 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
 
   const [shouldQuit, setShouldQuit] = React.useState(false);
   const n = useNavigate();
+  const genealogy = useGenealogy();
   const family = useFamily();
 
   const parameters = useQuery();
@@ -60,7 +62,7 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
     try {
       const r = await MemberApi.Create(m);
 
-      await family.reloadMembersList();
+      await genealogy.reloadMembersList();
 
       setShouldQuit(true);
       n(family.family.URL(`genealogy/member/${r.id}`));
@@ -104,6 +106,7 @@ export function FamilyMemberRoute(): React.ReactElement {
   const snackbar = useSnackbar();
 
   const family = useFamily();
+  const genealogy = useGenealogy();
   const { memberId } = useParams();
 
   const [member, setMember] = React.useState<Member>();
@@ -115,7 +118,7 @@ export function FamilyMemberRoute(): React.ReactElement {
     count.current += 1;
     setMember(undefined);
 
-    await family.reloadMembersList();
+    await genealogy.reloadMembersList();
   };
 
   const deleteMember = async () => {
@@ -132,7 +135,7 @@ export function FamilyMemberRoute(): React.ReactElement {
       snackbar("La fiche de membre a été supprimée avec succès !");
       n(family.family.URL("genealogy/members"));
 
-      await family.reloadMembersList();
+      await genealogy.reloadMembersList();
     } catch (e) {
       console.error(e);
       alert("Échec de la suppression du membre !");
@@ -148,9 +151,9 @@ export function FamilyMemberRoute(): React.ReactElement {
       build={() => (
         <MemberPage
           member={member!}
-          children={family.members.children(member!.id)}
+          children={genealogy.members.children(member!.id)}
-          siblings={family.members.siblings(member!.id)}
+          siblings={genealogy.members.siblings(member!.id)}
-          couples={family.couples.getAllOf(member!)}
+          couples={genealogy.couples.getAllOf(member!)}
           creating={false}
           editing={false}
           onrequestOpenTree={() => n(family.family.familyTreeURL(member!))}
@@ -176,6 +179,7 @@ export function FamilyEditMemberRoute(): React.ReactElement {
   const [shouldQuit, setShouldQuit] = React.useState(false);
 
   const family = useFamily();
+  const genealogy = useGenealogy();
 
   const [member, setMember] = React.useState<Member>();
   const load = async () => {
@@ -194,7 +198,7 @@ export function FamilyEditMemberRoute(): React.ReactElement {
 
       snackbar("Les informations du membre ont été mises à jour avec succès !");
 
-      await family.reloadMembersList();
+      await genealogy.reloadMembersList();
 
       setShouldQuit(true);
       n(family.family.memberURL(member!));
@@ -741,6 +745,7 @@ function CoupleItem(p: {
   const n = useNavigate();
 
   const family = useFamily();
+  const genealogy = useGenealogy();
 
   const statusStr = ServerApi.Config.couples_states.find(
     (c) => c.code === p.couple.state
@@ -758,7 +763,7 @@ function CoupleItem(p: {
   const otherSpouseID =
     p.couple.wife === p.currMemberId ? p.couple.husband : p.couple.wife;
   const otherSpouse = otherSpouseID
-    ? family.members.get(otherSpouseID)
+    ? genealogy.members.get(otherSpouseID)
     : undefined;
 
   return (

geneit_app/src/routes/family/genealogy/FamilyMemberTreeRoute.tsx

@@ -26,6 +26,7 @@ import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { BasicFamilyTree } from "../../../widgets/BasicFamilyTree";
 import { MemberItem } from "../../../widgets/MemberItem";
 import { RouterLink } from "../../../widgets/RouterLink";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
 import { SimpleFamilyTree } from "../../../widgets/simple_family_tree/SimpleFamilyTree";
 
 enum CurrTab {
@@ -41,22 +42,23 @@ enum TreeMode {
 export function FamilyMemberTreeRoute(): React.ReactElement {
   const { memberId } = useParams();
 
+  const genealogy = useGenealogy();
   const family = useFamily();
 
   const [currTab, setCurrTab] = React.useState(CurrTab.SimpleTree);
   const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
 
-  const member = family.members.get(Number(memberId));
+  const member = genealogy.members.get(Number(memberId));
 
   const memo: [FamilyTreeNode, number] | null = React.useMemo(() => {
     if (!member) return null;
     const tree =
       currMode === TreeMode.Ascending
-        ? buildAscendingTree(member.id, family.members, family.couples)
+        ? buildAscendingTree(member.id, genealogy.members, genealogy.couples)
-        : buildDescendingTree(member.id, family.members, family.couples);
+        : buildDescendingTree(member.id, genealogy.members, genealogy.couples);
 
     return [tree, treeHeight(tree)];
-  }, [member, currMode, family.members, family.couples]);
+  }, [member, currMode, genealogy.members, genealogy.couples]);
 
   const [currDepth, setCurrDepth] = React.useState(0);
 

geneit_app/src/routes/family/genealogy/FamilyMembersListRoute.tsx

@@ -21,12 +21,14 @@ import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
 import { MemberPhoto } from "../../../widgets/MemberPhoto";
 import { RouterLink } from "../../../widgets/RouterLink";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
 
 export function FamilyMembersListRoute(): React.ReactElement {
   const alert = useAlert();
   const confirm = useConfirm();
   const snackbar = useSnackbar();
 
+  const genealogy = useGenealogy();
   const family = useFamily();
 
   const [filter, setFilter] = React.useState("");
@@ -41,7 +43,7 @@ export function FamilyMembersListRoute(): React.ReactElement {
         return;
 
       await MemberApi.Delete(m);
-      await family.reloadMembersList();
+      await genealogy.reloadMembersList();
 
       snackbar("La fiche du membre a été supprimée avec succès !");
     } catch (e) {
@@ -67,7 +69,7 @@ export function FamilyMembersListRoute(): React.ReactElement {
         </RouterLink>
       </div>
 
-      {family.members.isEmpty ? (
+      {genealogy.members.isEmpty ? (
         <p>
           Votre famille n'a aucun membre pour le moment ! Utilisez le bouton
           situé en haut à droite pour créer le premier !
@@ -85,8 +87,8 @@ export function FamilyMembersListRoute(): React.ReactElement {
           <MembersTable
             members={
               filter === ""
-                ? family.members.fullList
+                ? genealogy.members.fullList
-                : family.members.filter((m) =>
+                : genealogy.members.filter((m) =>
                     m.fullName.toLowerCase().includes(filter.toLowerCase())
                   )
             }
@@ -102,6 +104,7 @@ function MembersTable(p: {
   members: Member[];
   onDelete: (m: Member) => void;
 }): React.ReactElement {
+  const genealogy = useGenealogy();
   const family = useFamily();
   const n = useNavigate();
 
@@ -178,7 +181,7 @@ function MembersTable(p: {
       renderCell(params) {
         if (!params.row.father)
           return <Typography color="red">Non renseigné</Typography>;
-        return family.members.get(params.row.father)!.fullName;
+        return genealogy.members.get(params.row.father)!.fullName;
       },
     },
     {
@@ -188,7 +191,7 @@ function MembersTable(p: {
       renderCell(params) {
         if (!params.row.mother)
           return <Typography color="red">Non renseignée</Typography>;
-        return family.members.get(params.row.mother)!.fullName;
+        return genealogy.members.get(params.row.mother)!.fullName;
       },
     },
     {

geneit_app/src/routes/family/genealogy/GenealogyHomeRoute.tsx

@@ -1,8 +1,8 @@
-import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
 
 export function GenealogyHomeRoute(): React.ReactElement {
-  const family = useFamily();
+  const genealogy = useGenealogy();
   return (
     <>
       <FamilyPageTitle title="Généalogie de votre famille" />
@@ -12,8 +12,8 @@ export function GenealogyHomeRoute(): React.ReactElement {
           compléter l'abre généalogique de votre famille.
         </p>
         <p>&nbsp;</p>
-        <p>Nombre de fiches de membres: {family.members.size}</p>
+        <p>Nombre de fiches de membres: {genealogy.members.size}</p>
-        <p>Nombre de fiches de couples: {family.couples.size}</p>
+        <p>Nombre de fiches de couples: {genealogy.couples.size}</p>
       </div>
     </>
   );

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -27,8 +27,6 @@ import {
 import React from "react";
 import { Outlet, useLocation, useParams } from "react-router-dom";
 import { ExtendedFamilyInfo, FamilyApi } from "../api/FamilyApi";
-import { CoupleApi, CouplesList } from "../api/genealogy/CoupleApi";
-import { MemberApi, MembersList } from "../api/genealogy/MemberApi";
 import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
@@ -37,12 +35,8 @@ import { RouterLink } from "./RouterLink";
 
 interface FamilyContext {
   family: ExtendedFamilyInfo;
-  members: MembersList;
-  couples: CouplesList;
   familyId: number;
   reloadFamilyInfo: () => void;
-  reloadMembersList: () => Promise<void>;
-  reloadCouplesList: () => Promise<void>;
 }
 
 const FamilyContextK = React.createContext<FamilyContext | null>(null);
@@ -54,8 +48,6 @@ export function BaseFamilyRoute(): React.ReactElement {
   const confirm = useConfirm();
 
   const [family, setFamily] = React.useState<null | ExtendedFamilyInfo>(null);
-  const [members, setMembers] = React.useState<null | MembersList>(null);
-  const [couples, setCouples] = React.useState<null | CouplesList>(null);
 
   const loadKey = React.useRef(1);
 
@@ -64,15 +56,11 @@ export function BaseFamilyRoute(): React.ReactElement {
   const load = async () => {
     const familyID = Number(familyId);
     setFamily(await FamilyApi.GetSingle(familyID));
-    setMembers(await MemberApi.GetEntireList(familyID));
-    setCouples(await CoupleApi.GetEntireList(familyID));
   };
 
   const onReload = async () => {
     loadKey.current += 1;
     setFamily(null);
-    setMembers(null);
-    setCouples(null);
 
     return new Promise<void>((res, _rej) => {
       loadPromise.current = () => res();
@@ -106,7 +94,7 @@ export function BaseFamilyRoute(): React.ReactElement {
 
   return (
     <AsyncWidget
-      ready={family !== null && members !== null}
+      ready={family !== null}
       loadKey={`${familyId}-${loadKey.current}`}
       load={load}
       errMsg="Échec du chargement des informations de la famille !"
@@ -120,12 +108,8 @@ export function BaseFamilyRoute(): React.ReactElement {
           <FamilyContextK.Provider
             value={{
               family: family!,
-              members: members!,
-              couples: couples!,
               familyId: family!.family_id,
               reloadFamilyInfo: onReload,
-              reloadMembersList: onReload,
-              reloadCouplesList: onReload,
             }}
           >
             <Box

geneit_app/src/widgets/forms/MemberInput.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { Member } from "../../api/genealogy/MemberApi";
 import { useFamily } from "../BaseFamilyRoute";
 import { MemberItem } from "../MemberItem";
+import { useGenealogy } from "../genealogy/BaseGenealogyRoute";
 
 export function MemberInput(p: {
   editable: boolean;
@@ -15,13 +16,14 @@ export function MemberInput(p: {
 }): React.ReactElement {
   const n = useNavigate();
   const family = useFamily();
+  const genealogy = useGenealogy();
 
-  const choices = family.members.filter(p.filter);
+  const choices = genealogy.members.filter(p.filter);
 
   const [inputValue, setInputValue] = React.useState("");
 
   if (p.current) {
-    const member = family.members.get(p.current)!;
+    const member = genealogy.members.get(p.current)!;
     return (
       <div style={{ display: "flex", alignItems: "center" }}>
         <Typography variant="body2">{p.label}</Typography>
@@ -55,7 +57,7 @@ export function MemberInput(p: {
 
   return (
     <Autocomplete
-      value={p.current ? family.members.get(p.current) : undefined}
+      value={p.current ? genealogy.members.get(p.current) : undefined}
       onChange={(_event: any, newValue: Member | null | undefined) => {
         p.onValueChange(newValue?.id);
       }}

geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx

@@ -41,7 +41,7 @@ export function BaseGenealogyRoute(): React.ReactElement {
 
   return (
     <AsyncWidget
-      ready={family !== null && members !== null}
+      ready={members !== null && couples !== null}
       loadKey={`${family.familyId}-${loadKey.current}`}
       load={load}
       errMsg="Échec du chargement des informations de généalogie de la famille !"