2024-05-16 19:15:16 +00:00
9 changed files with 72 additions and 66 deletions
--- a/geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx
+++ b/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 { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";

 /**
 * 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));
--- a/geneit_app/src/routes/family/genealogy/FamilyCouplesListRoute.tsx
+++ b/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
-                : family.couples.filter(
+                ? genealogy.couples.fullList
+                : 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 n2 = ((v2 && family.members.get(v2)?.invertedFullName) ?? "") || "";
+    const n1 =
+      ((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">
--- a/geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx
+++ b/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 { mdiFamilyTree } from "@mdi/js";
-import Icon from "@mdi/react";
-import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
+import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";

 /**
 * 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)}
-          siblings={family.members.siblings(member!.id)}
-          couples={family.couples.getAllOf(member!)}
+          children={genealogy.members.children(member!.id)}
+          siblings={genealogy.members.siblings(member!.id)}
+          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 (
--- a/geneit_app/src/routes/family/genealogy/FamilyMemberTreeRoute.tsx
+++ b/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)
-        : buildDescendingTree(member.id, family.members, family.couples);
+        ? buildAscendingTree(member.id, genealogy.members, genealogy.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);

--- a/geneit_app/src/routes/family/genealogy/FamilyMembersListRoute.tsx
+++ b/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
-                : family.members.filter((m) =>
+                ? genealogy.members.fullList
+                : 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;
      },
    },
    {
--- a/geneit_app/src/routes/family/genealogy/GenealogyHomeRoute.tsx
+++ b/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 couples: {family.couples.size}</p>
+        <p>Nombre de fiches de membres: {genealogy.members.size}</p>
+        <p>Nombre de fiches de couples: {genealogy.couples.size}</p>
      </div>
    </>
  );
--- a/geneit_app/src/widgets/BaseFamilyRoute.tsx
+++ b/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
--- a/geneit_app/src/widgets/forms/MemberInput.tsx
+++ b/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);
      }}
--- a/geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx
+++ b/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 !"