fix(ui): resolve yacht owner names server-side, real user in topbar
Yachts list page rendered each row's Current Owner via OwnerLink, which
fired its own /api/v1/clients/{id} or /companies/{id} fetch — N+1 round-
trips per page load (12+ for the harbor-royale fixture). Worse, until
those fetches resolved each cell showed "Client c68da7..." style raw IDs.
Fix: listYachts now resolves the polymorphic currentOwnerName in two
batched in-array queries after the page query (mirrors the listClients
yachtCount/companyCount pattern), and OwnerLink accepts an optional
preloadedName prop that suppresses the per-row fetch when supplied.
Topbar: show real user name + avatar initial from session/profile, and
expand the My-Account dropdown header to include the user's email.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -58,20 +58,27 @@ export function OwnerLink({
|
||||
portSlug,
|
||||
type,
|
||||
id,
|
||||
preloadedName,
|
||||
}: {
|
||||
portSlug: string;
|
||||
type: 'client' | 'company';
|
||||
id: string;
|
||||
/** Optional name supplied by the parent list/detail endpoint to skip the
|
||||
* per-row fetch (avoids an N+1 round-trip on lists). */
|
||||
preloadedName?: string | null;
|
||||
}) {
|
||||
// Only fetch when the parent didn't already supply a name — list endpoints
|
||||
// batch-resolve owners server-side via a join.
|
||||
const { data } = useQuery<{ fullName?: string; name?: string }>({
|
||||
queryKey: [type === 'client' ? 'clients' : 'companies', id, 'name-only'],
|
||||
queryFn: () =>
|
||||
apiFetch<{ data: { fullName?: string; name?: string } }>(
|
||||
type === 'client' ? `/api/v1/clients/${id}` : `/api/v1/companies/${id}`,
|
||||
).then((r) => r.data),
|
||||
enabled: preloadedName === undefined || preloadedName === null,
|
||||
});
|
||||
|
||||
const label = type === 'client' ? data?.fullName : data?.name;
|
||||
const label = preloadedName ?? (type === 'client' ? data?.fullName : data?.name);
|
||||
const href = type === 'client' ? `/${portSlug}/clients/${id}` : `/${portSlug}/companies/${id}`;
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user