chore: commit pending ZXDB explorer changes prior to index perf work
Context - Housekeeping commit to capture all current ZXDB Explorer work before index-page performance optimizations. Includes - Server-rendered entry detail page with ISR and parallelized DB queries. - Node runtime for ZXDB API routes and params validation updates for Next 15. - ZXDB repository extensions (facets, label queries, category queries). - Cross-linking and Link-based prefetch across ZXDB UI. - Cache headers on low-churn list APIs. Notes - Follow-up commit will focus specifically on speeding up index pages via SSR initial data and ISR. Signed-off-by: Junie@lucy.xalior.com
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
type Label = { id: number; name: string; labeltypeId: string | null };
|
||||
type EntryDetail = {
|
||||
export type EntryDetailData = {
|
||||
id: number;
|
||||
title: string;
|
||||
isXrated: number;
|
||||
@@ -14,35 +14,7 @@ type EntryDetail = {
|
||||
publishers: Label[];
|
||||
};
|
||||
|
||||
export default function EntryDetailClient({ id }: { id: number }) {
|
||||
const [data, setData] = useState<EntryDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let aborted = false;
|
||||
async function run() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/zxdb/entries/${id}`, { cache: "no-store" });
|
||||
if (!res.ok) throw new Error(`Failed: ${res.status}`);
|
||||
const json: EntryDetail = await res.json();
|
||||
if (!aborted) setData(json);
|
||||
} catch (e: any) {
|
||||
if (!aborted) setError(e?.message ?? "Failed to load");
|
||||
} finally {
|
||||
if (!aborted) setLoading(false);
|
||||
}
|
||||
}
|
||||
run();
|
||||
return () => {
|
||||
aborted = true;
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <div>Loading…</div>;
|
||||
if (error) return <div className="alert alert-danger">{error}</div>;
|
||||
export default function EntryDetailClient({ data }: { data: EntryDetailData }) {
|
||||
if (!data) return <div className="alert alert-warning">Not found</div>;
|
||||
|
||||
return (
|
||||
@@ -50,19 +22,19 @@ export default function EntryDetailClient({ id }: { id: number }) {
|
||||
<div className="d-flex align-items-center gap-2 flex-wrap">
|
||||
<h1 className="mb-0">{data.title}</h1>
|
||||
{data.genre.name && (
|
||||
<a className="badge text-bg-secondary text-decoration-none" href={`/zxdb/genres/${data.genre.id}`}>
|
||||
<Link className="badge text-bg-secondary text-decoration-none" href={`/zxdb/genres/${data.genre.id}`}>
|
||||
{data.genre.name}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
{data.language.name && (
|
||||
<a className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${data.language.id}`}>
|
||||
<Link className="badge text-bg-info text-decoration-none" href={`/zxdb/languages/${data.language.id}`}>
|
||||
{data.language.name}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
{data.machinetype.name && (
|
||||
<a className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${data.machinetype.id}`}>
|
||||
<Link className="badge text-bg-primary text-decoration-none" href={`/zxdb/machinetypes/${data.machinetype.id}`}>
|
||||
{data.machinetype.name}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
{data.isXrated ? <span className="badge text-bg-danger">18+</span> : null}
|
||||
</div>
|
||||
@@ -77,7 +49,7 @@ export default function EntryDetailClient({ id }: { id: number }) {
|
||||
<ul className="list-unstyled mb-0">
|
||||
{data.authors.map((a) => (
|
||||
<li key={a.id}>
|
||||
<a href={`/zxdb/labels/${a.id}`}>{a.name}</a>
|
||||
<Link href={`/zxdb/labels/${a.id}`}>{a.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -90,7 +62,7 @@ export default function EntryDetailClient({ id }: { id: number }) {
|
||||
<ul className="list-unstyled mb-0">
|
||||
{data.publishers.map((p) => (
|
||||
<li key={p.id}>
|
||||
<a href={`/zxdb/labels/${p.id}`}>{p.name}</a>
|
||||
<Link href={`/zxdb/labels/${p.id}`}>{p.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -101,8 +73,8 @@ export default function EntryDetailClient({ id }: { id: number }) {
|
||||
<hr />
|
||||
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<a className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</a>
|
||||
<a className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</a>
|
||||
<Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/entries/${data.id}`}>Permalink</Link>
|
||||
<Link className="btn btn-sm btn-outline-primary" href="/zxdb">Back to Explorer</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user