From 28b29d6cd643936beba3b8cd6c57a9f526f73aa5 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Wed, 15 May 2024 21:50:32 +0200 Subject: [PATCH] Load genealogy data only on genealogy pages --- .../family/genealogy/FamilyCoupleRoute.tsx | 20 +++++++----- .../genealogy/FamilyCouplesListRoute.tsx | 26 ++++++++++------ .../family/genealogy/FamilyMemberRoute.tsx | 31 +++++++++++-------- .../genealogy/FamilyMemberTreeRoute.tsx | 10 +++--- .../genealogy/FamilyMembersListRoute.tsx | 15 +++++---- .../family/genealogy/GenealogyHomeRoute.tsx | 8 ++--- geneit_app/src/widgets/BaseFamilyRoute.tsx | 18 +---------- geneit_app/src/widgets/forms/MemberInput.tsx | 8 +++-- .../widgets/genealogy/BaseGenealogyRoute.tsx | 2 +- 9 files changed, 72 insertions(+), 66 deletions(-) diff --git a/geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx b/geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx index d6774c5..19e8f50 100644 --- 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(); @@ -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={() => ( (); @@ -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)); diff --git a/geneit_app/src/routes/family/genealogy/FamilyCouplesListRoute.tsx b/geneit_app/src/routes/family/genealogy/FamilyCouplesListRoute.tsx index 940b6bf..465f191 100644 --- 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 { - {family.couples.isEmpty ? ( + {genealogy.couples.isEmpty ? (

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 { (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 ( diff --git a/geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx b/geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx index 6d02ee6..5a5fa01 100644 --- 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(); @@ -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={() => ( 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(); 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 ( diff --git a/geneit_app/src/routes/family/genealogy/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/genealogy/FamilyMemberTreeRoute.tsx index ac3be15..7996a83 100644 --- 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); diff --git a/geneit_app/src/routes/family/genealogy/FamilyMembersListRoute.tsx b/geneit_app/src/routes/family/genealogy/FamilyMembersListRoute.tsx index 425ddb4..234729d 100644 --- 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 { - {family.members.isEmpty ? ( + {genealogy.members.isEmpty ? (

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 { + ? 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 Non renseigné; - 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 Non renseignée; - return family.members.get(params.row.mother)!.fullName; + return genealogy.members.get(params.row.mother)!.fullName; }, }, { diff --git a/geneit_app/src/routes/family/genealogy/GenealogyHomeRoute.tsx b/geneit_app/src/routes/family/genealogy/GenealogyHomeRoute.tsx index 37461af..128ee7d 100644 --- 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 ( <> @@ -12,8 +12,8 @@ export function GenealogyHomeRoute(): React.ReactElement { compléter l'abre généalogique de votre famille.

 

-

Nombre de fiches de membres: {family.members.size}

-

Nombre de fiches de couples: {family.couples.size}

+

Nombre de fiches de membres: {genealogy.members.size}

+

Nombre de fiches de couples: {genealogy.couples.size}

); diff --git a/geneit_app/src/widgets/BaseFamilyRoute.tsx b/geneit_app/src/widgets/BaseFamilyRoute.tsx index ca02be9..d6f10c0 100644 --- 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; - reloadCouplesList: () => Promise; } const FamilyContextK = React.createContext(null); @@ -54,8 +48,6 @@ export function BaseFamilyRoute(): React.ReactElement { const confirm = useConfirm(); const [family, setFamily] = React.useState(null); - const [members, setMembers] = React.useState(null); - const [couples, setCouples] = React.useState(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((res, _rej) => { loadPromise.current = () => res(); @@ -106,7 +94,7 @@ export function BaseFamilyRoute(): React.ReactElement { return ( {p.label} @@ -55,7 +57,7 @@ export function MemberInput(p: { return ( { p.onValueChange(newValue?.id); }} diff --git a/geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx b/geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx index f2b1b3c..247663c 100644 --- 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 (