Show couple state in basic family tree

geneit_app/src/api/CoupleApi.ts

@@ -1,5 +1,6 @@
 import { APIClient } from "./ApiClient";
 import { DateValue, Member } from "./MemberApi";
+import { ServerApi } from "./ServerApi";
 
 interface CoupleApiInterface {
   id: number;
@@ -103,6 +104,13 @@ export class Couple implements CoupleApiInterface {
   otherPersonID(id: number): number | undefined {
     return id === this.wife ? this.husband : this.wife;
   }
+
+  get stateFr(): string {
+    return (
+      ServerApi.Config.couples_states.find((c) => c.code === this.state)?.fr ??
+      ""
+    );
+  }
 }
 
 export class CouplesList {

geneit_app/src/widgets/BasicFamilyTree.tsx

@@ -7,6 +7,7 @@ import { MemberPhoto } from "./MemberPhoto";
 import { Member, fmtDate } from "../api/MemberApi";
 import Icon from "@mdi/react";
 import { mdiBabyCarriage, mdiCross } from "@mdi/js";
+import { Couple } from "../api/CoupleApi";
 
 export function BasicFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -46,7 +47,7 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
                 marginLeft: "20px",
               }}
             >
-              <BasicFamilyMemberItem member={c.member} />
+              <BasicFamilyMemberItem member={c.member} couple={c.couple} />
             </span>
           ))}
         </div>
@@ -62,6 +63,7 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
 function BasicFamilyMemberItem(p: {
   member: Member;
   primary?: boolean;
+  couple?: Couple;
 }): React.ReactElement {
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
@@ -69,7 +71,7 @@ function BasicFamilyMemberItem(p: {
       <span style={{ width: "10px" }}></span>
       <div style={{ display: "flex", flexDirection: "column" }}>
         <span style={{ fontWeight: p.primary ? "bold" : "unset" }}>
-          {p.member.fullName}{" "}
+          {p.member.fullName} {p.couple?.state && `(${p.couple.stateFr}) `}
           {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
         </span>
         <span style={{ display: "inline-flex", alignItems: "center" }}>