From cae70ee738662920f546b9b85a24348fd7b918ae Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Tue, 22 Aug 2023 11:59:56 +0200
Subject: [PATCH] Can access member page from basic family tree

---
 geneit_app/src/widgets/BasicFamilyTree.tsx | 28 +++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/geneit_app/src/widgets/BasicFamilyTree.tsx b/geneit_app/src/widgets/BasicFamilyTree.tsx
index df1fbfe..ad3ef02 100644
--- a/geneit_app/src/widgets/BasicFamilyTree.tsx
+++ b/geneit_app/src/widgets/BasicFamilyTree.tsx
@@ -1,13 +1,15 @@
-import { TreeItem, TreeView } from "@mui/lab";
-import { FamilyTreeNode } from "../utils/family_tree";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import React from "react";
-import { MemberPhoto } from "./MemberPhoto";
-import { Member, fmtDate } from "../api/MemberApi";
-import Icon from "@mdi/react";
 import { mdiBabyCarriage, mdiCross } from "@mdi/js";
+import Icon from "@mdi/react";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { TreeItem, TreeView } from "@mui/lab";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 import { Couple } from "../api/CoupleApi";
+import { Member, fmtDate } from "../api/MemberApi";
+import { FamilyTreeNode } from "../utils/family_tree";
+import { useFamily } from "./BaseFamilyRoute";
+import { MemberPhoto } from "./MemberPhoto";
 
 export function BasicFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -65,8 +67,14 @@ function BasicFamilyMemberItem(p: {
   primary?: boolean;
   couple?: Couple;
 }): React.ReactElement {
+  const family = useFamily();
+  const n = useNavigate();
+
   return (
-    <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{ display: "flex", alignItems: "center" }}
+      onDoubleClick={() => n(family.family.memberURL(p.member))}
+    >
       <MemberPhoto member={p.member} />
       <span style={{ width: "10px" }}></span>
       <div style={{ display: "flex", flexDirection: "column" }}>
@@ -74,6 +82,8 @@ function BasicFamilyMemberItem(p: {
           {p.member.fullName} {p.couple?.state && `(${p.couple.stateFr}) `}
           {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
         </span>
+
+        {/* secondary information */}
         <span style={{ display: "inline-flex", alignItems: "center" }}>
           {p.member.dateOfBirth && (
             <>