Clickable link to spouse in details panel

src/details/events.tsx

@@ -1,13 +1,36 @@
+import * as queryString from 'query-string';
 import flatMap from 'array.prototype.flatmap';
-import {compareDates, translateDate} from '../util/date_util';
 import {calcAge} from '../util/age_util';
+import {compareDates, translateDate} from '../util/date_util';
 import {DateOrRange, getDate} from 'topola';
-import {dereference, GedcomData, getData} from '../util/gedcom_util';
+import {dereference, GedcomData, getData, getName} from '../util/gedcom_util';
 import {GedcomEntry} from 'parse-gedcom';
 import {IntlShape, useIntl} from 'react-intl';
+import {Link, useLocation} from 'react-router-dom';
 import {MultilineText} from './multiline-text';
+import {pointerToId} from '../util/gedcom_util';
 import {TranslatedTag} from './translated-tag';
 
+function PersonLink(props: {person: GedcomEntry}) {
+  const location = useLocation();
+
+  const name = getName(props.person);
+  if (!name) {
+    return <></>;
+  }
+
+  const search = queryString.parse(location.search);
+  search['indi'] = pointerToId(props.person.pointer);
+
+  return (
+    <div className="meta">
+      <Link to={{pathname: '/view', search: queryString.stringify(search)}}>
+        {name}
+      </Link>
+    </div>
+  );
+}
+
 interface Props {
   gedcom: GedcomData;
   indi: string;
@@ -61,22 +84,12 @@ function eventFamilyDetails(
     .find((familySubEntry) => !familySubEntry.data.includes(indi));
 
   if (spouseReference) {
-    const spouseName = dereference(
+    const spouse = dereference(
       spouseReference,
       gedcom,
       (gedcom) => gedcom.indis,
-    )
-      .tree.filter((subEntry) => subEntry.tag === 'NAME')
-      .find(
-        (subEntry) =>
-          subEntry.tree.filter(
-            (nameEntry) =>
-              nameEntry.tag === 'TYPE' && nameEntry.data === 'married',
-          ).length === 0,
     );
-    if (spouseName) {
+    return <PersonLink person={spouse} />;
-      return <div className="meta">{spouseName.data.replaceAll('/', '')}</div>;
-    }
   }
   return null;
 }

src/util/gedcom_util.spec.ts

@@ -1,4 +1,4 @@
-import {normalizeGedcom} from './gedcom_util';
+import {getName, normalizeGedcom} from './gedcom_util';
 
 describe('normalizeGedcom()', () => {
   it('sorts children', () => {
@@ -68,3 +68,73 @@ describe('normalizeGedcom()', () => {
     ]);
   });
 });
+
+describe('getName()', () => {
+  it('returns undefined with no name available', () => {
+    const person = {
+      level: 1,
+      pointer: '',
+      tag: 'INDI',
+      data: '',
+      tree: [],
+    };
+    expect(getName(person)).toBe(undefined);
+  });
+
+  it('returns first name available', () => {
+    const person = {
+      level: 1,
+      pointer: '',
+      tag: 'INDI',
+      data: '',
+      tree: [
+        {level: 2, pointer: '', tag: 'NAME', data: 'First /Name/', tree: []},
+        {level: 2, pointer: '', tag: 'NAME', data: 'Second /Name/', tree: []},
+      ],
+    };
+    expect(getName(person)).toBe('First Name');
+  });
+
+  it('prefers a name without TYPE=married', () => {
+    const person = {
+      level: 1,
+      pointer: '',
+      tag: 'INDI',
+      data: '',
+      tree: [
+        {
+          level: 2,
+          pointer: '',
+          tag: 'NAME',
+          data: 'First /Name/',
+          tree: [
+            {level: 3, pointer: '', tag: 'TYPE', data: 'married', tree: []},
+          ],
+        },
+        {level: 2, pointer: '', tag: 'NAME', data: 'Second /Name/', tree: []},
+      ],
+    };
+    expect(getName(person)).toBe('Second Name');
+  });
+
+  it('picks a TYPE=married name if no other is available', () => {
+    const person = {
+      level: 1,
+      pointer: '',
+      tag: 'INDI',
+      data: '',
+      tree: [
+        {
+          level: 2,
+          pointer: '',
+          tag: 'NAME',
+          data: 'Only /Name/',
+          tree: [
+            {level: 3, pointer: '', tag: 'TYPE', data: 'married', tree: []},
+          ],
+        },
+      ],
+    };
+    expect(getName(person)).toBe('Only Name');
+  });
+});

src/util/gedcom_util.ts

@@ -270,3 +270,15 @@ export function getSoftware(head: GedcomEntry): string | null {
     sour && sour.tree && sour.tree.find((entry) => entry.tag === 'NAME');
   return (name && name.data) || null;
 }
+
+export function getName(person: GedcomEntry): string | undefined {
+  const names = person.tree.filter((subEntry) => subEntry.tag === 'NAME');
+  const notMarriedName = names.find(
+    (subEntry) =>
+      subEntry.tree.filter(
+        (nameEntry) => nameEntry.tag === 'TYPE' && nameEntry.data === 'married',
+      ).length === 0,
+  );
+  const name = notMarriedName || names[0];
+  return name?.data.replace(/\//g, '');
+}