Add person-detail page with events timeline and relationships
New /trees/[id]/persons/[personId] view: life-events timeline with add/remove, and relationships grouped into parents/children/partners/siblings with an add form (kind + person picker + qualifier). People in the tree list now link here. Regenerated the OpenAPI client for the new endpoints. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
This commit is contained in:
@@ -81,11 +81,15 @@ export default function TreeDetailPage() {
|
||||
<ul className="space-y-2">
|
||||
{persons.map((person) => (
|
||||
<li key={person.id}>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
{person.primary_name ?? <span className="text-[var(--muted)]">Unnamed</span>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Link href={`/trees/${treeId}/persons/${person.id}`}>
|
||||
<Card className="transition-colors hover:border-bronze/50">
|
||||
<CardContent className="p-4">
|
||||
{person.primary_name ?? (
|
||||
<span className="text-[var(--muted)]">Unnamed</span>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { api } from "@/lib/api/client";
|
||||
import type { components } from "@/lib/api/schema";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
type Person = components["schemas"]["PersonRead"];
|
||||
type Event = components["schemas"]["EventRead"];
|
||||
type Relationship = components["schemas"]["RelationshipRead"];
|
||||
type Qualifier = components["schemas"]["ParentChildQualifier"];
|
||||
type RelCreate = components["schemas"]["RelationshipCreate"];
|
||||
|
||||
const fieldCls =
|
||||
"h-10 rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 text-sm";
|
||||
|
||||
const QUALIFIERS: Qualifier[] = ["biological", "adoptive", "step", "foster", "donor", "guardian"];
|
||||
|
||||
export default function PersonDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams<{ id: string; personId: string }>();
|
||||
const treeId = params.id;
|
||||
const personId = params.personId;
|
||||
|
||||
const [person, setPerson] = useState<Person | null>(null);
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [rels, setRels] = useState<Relationship[]>([]);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
const [evType, setEvType] = useState("birth");
|
||||
const [evDate, setEvDate] = useState("");
|
||||
|
||||
const [relKind, setRelKind] = useState<"parent" | "child" | "partner" | "sibling">("parent");
|
||||
const [relOther, setRelOther] = useState("");
|
||||
const [relQual, setRelQual] = useState<Qualifier>("biological");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const p = await api.GET("/api/v1/trees/{tree_id}/persons/{person_id}", {
|
||||
params: { path: { tree_id: treeId, person_id: personId } },
|
||||
});
|
||||
if (p.response.status === 401) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
setPerson(p.data ?? null);
|
||||
const [all, ev, rl] = await Promise.all([
|
||||
api.GET("/api/v1/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
|
||||
api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/events", {
|
||||
params: { path: { tree_id: treeId, person_id: personId } },
|
||||
}),
|
||||
api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/relationships", {
|
||||
params: { path: { tree_id: treeId, person_id: personId } },
|
||||
}),
|
||||
]);
|
||||
setPeople(all.data ?? []);
|
||||
setEvents(ev.data ?? []);
|
||||
setRels(rl.data ?? []);
|
||||
setReady(true);
|
||||
}, [router, treeId, personId]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
const nameOf = useMemo(() => {
|
||||
const m = new Map(people.map((p) => [p.id, p.primary_name ?? "Unnamed"]));
|
||||
return (id: string) => m.get(id) ?? "Unknown";
|
||||
}, [people]);
|
||||
|
||||
const others = people.filter((p) => p.id !== personId);
|
||||
const parents = rels.filter((r) => r.type === "parent_child" && r.person_to_id === personId);
|
||||
const children = rels.filter((r) => r.type === "parent_child" && r.person_from_id === personId);
|
||||
const partners = rels.filter((r) => r.type === "partnership");
|
||||
const siblings = rels.filter((r) => r.type === "sibling");
|
||||
|
||||
async function addEvent(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!evType.trim()) return;
|
||||
const { error } = await api.POST("/api/v1/trees/{tree_id}/events", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
body: { event_type: evType, person_id: personId, date_value: evDate || null },
|
||||
});
|
||||
if (!error) {
|
||||
setEvDate("");
|
||||
load();
|
||||
}
|
||||
}
|
||||
|
||||
async function removeEvent(id: string) {
|
||||
await api.DELETE("/api/v1/trees/{tree_id}/events/{event_id}", {
|
||||
params: { path: { tree_id: treeId, event_id: id } },
|
||||
});
|
||||
load();
|
||||
}
|
||||
|
||||
async function addRel(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!relOther) return;
|
||||
let body: RelCreate;
|
||||
if (relKind === "parent") {
|
||||
body = { type: "parent_child", person_from_id: relOther, person_to_id: personId, qualifier: relQual };
|
||||
} else if (relKind === "child") {
|
||||
body = { type: "parent_child", person_from_id: personId, person_to_id: relOther, qualifier: relQual };
|
||||
} else if (relKind === "partner") {
|
||||
body = { type: "partnership", person_from_id: personId, person_to_id: relOther };
|
||||
} else {
|
||||
body = { type: "sibling", person_from_id: personId, person_to_id: relOther };
|
||||
}
|
||||
const { error } = await api.POST("/api/v1/trees/{tree_id}/relationships", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
body,
|
||||
});
|
||||
if (!error) {
|
||||
setRelOther("");
|
||||
load();
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRel(id: string) {
|
||||
await api.DELETE("/api/v1/trees/{tree_id}/relationships/{relationship_id}", {
|
||||
params: { path: { tree_id: treeId, relationship_id: id } },
|
||||
});
|
||||
load();
|
||||
}
|
||||
|
||||
if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
|
||||
if (!person) return <p className="text-[var(--muted)]">Not found.</p>;
|
||||
|
||||
const relGroup = (label: string, items: Relationship[], otherId: (r: Relationship) => string) =>
|
||||
items.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-bronze">{label}</h3>
|
||||
<ul className="mt-1 space-y-1">
|
||||
{items.map((r) => (
|
||||
<li key={r.id} className="flex items-center justify-between text-sm">
|
||||
<Link href={`/trees/${treeId}/persons/${otherId(r)}`} className="hover:underline">
|
||||
{nameOf(otherId(r))}
|
||||
{r.qualifier ? <span className="text-[var(--muted)]"> · {r.qualifier}</span> : null}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => removeRel(r.id)}
|
||||
className="text-[var(--muted)] hover:text-bronze"
|
||||
aria-label="Remove"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Link href={`/trees/${treeId}`} className="text-sm text-[var(--muted)] hover:underline">
|
||||
← Back to tree
|
||||
</Link>
|
||||
|
||||
<h1 className="text-3xl font-semibold">{person.primary_name ?? "Unnamed person"}</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Life events</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{events.length === 0 ? (
|
||||
<p className="text-sm text-[var(--muted)]">No events yet.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{events.map((ev) => (
|
||||
<li key={ev.id} className="flex items-center justify-between text-sm">
|
||||
<span>
|
||||
<span className="font-medium capitalize">{ev.event_type}</span>
|
||||
{ev.date_value ? (
|
||||
<span className="text-[var(--muted)]"> — {ev.date_value}</span>
|
||||
) : null}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeEvent(ev.id)}
|
||||
className="text-[var(--muted)] hover:text-bronze"
|
||||
aria-label="Remove"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<form onSubmit={addEvent} className="flex flex-wrap gap-2">
|
||||
<Input
|
||||
className="w-36"
|
||||
placeholder="Event type"
|
||||
value={evType}
|
||||
onChange={(e) => setEvType(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
className="w-40"
|
||||
placeholder="Date (e.g. ABT 1850)"
|
||||
value={evDate}
|
||||
onChange={(e) => setEvDate(e.target.value)}
|
||||
/>
|
||||
<Button type="submit">Add event</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Relationships</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{rels.length === 0 ? (
|
||||
<p className="text-sm text-[var(--muted)]">No relationships yet.</p>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{relGroup("Parents", parents, (r) => r.person_from_id)}
|
||||
{relGroup("Children", children, (r) => r.person_to_id)}
|
||||
{relGroup("Partners", partners, (r) =>
|
||||
r.person_from_id === personId ? r.person_to_id : r.person_from_id,
|
||||
)}
|
||||
{relGroup("Siblings", siblings, (r) =>
|
||||
r.person_from_id === personId ? r.person_to_id : r.person_from_id,
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{others.length === 0 ? (
|
||||
<p className="text-sm text-[var(--muted)]">Add more people to the tree to link them.</p>
|
||||
) : (
|
||||
<form onSubmit={addRel} className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm text-[var(--muted)]">Add</span>
|
||||
<select
|
||||
className={fieldCls}
|
||||
value={relKind}
|
||||
onChange={(e) => setRelKind(e.target.value as typeof relKind)}
|
||||
>
|
||||
<option value="parent">parent</option>
|
||||
<option value="child">child</option>
|
||||
<option value="partner">partner</option>
|
||||
<option value="sibling">sibling</option>
|
||||
</select>
|
||||
<select
|
||||
className={fieldCls}
|
||||
value={relOther}
|
||||
onChange={(e) => setRelOther(e.target.value)}
|
||||
>
|
||||
<option value="">— person —</option>
|
||||
{others.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.primary_name ?? "Unnamed"}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{(relKind === "parent" || relKind === "child") && (
|
||||
<select
|
||||
className={fieldCls}
|
||||
value={relQual}
|
||||
onChange={(e) => setRelQual(e.target.value as Qualifier)}
|
||||
>
|
||||
{QUALIFIERS.map((q) => (
|
||||
<option key={q} value={q}>
|
||||
{q}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<Button type="submit">Link</Button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user