NextBestNetwork/explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ZXDB pagination counters and navigation

Browse Source 
Implement URL-driven pagination and correct total counts across ZXDB:
- Root /zxdb: SSR reads ?page; client syncs to SSR; Prev/Next as Links.
- Sub-index pages (genres, languages, machinetypes): parse ?page on server; use SSR props in clients; Prev/Next via Links.
- Labels browse (/zxdb/labels): dynamic SSR, reads ?q & ?page; typed count(*); client syncs to SSR; Prev/Next preserve q.
- Label detail (/zxdb/labels/[id]): tab-aware Prev/Next Links; counters from server.
- Repo: replace raw counts with typed Drizzle count(*) for reliable totals.

Signed-off-by: Junie <Junie@lucy.xalior.com>
This commit is contained in:
D. Rimron-Soutter
2025-12-12 16:11:12 +00:00
parent 54cfe4f175
commit 3ef3a16bc0
13 changed files with 238 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/zxdb/ZxdbExplorer.tsx
View File

@@ -30,7 +30,7 @@ export default function ZxdbExplorer({
initialMachines?: { id: number; name: string }[];
}) {
const [q, setQ] = useState("");
const [page, setPage] = useState(1);
const [page, setPage] = useState(initial?.page ?? 1);
const [loading, setLoading] = useState(false);
const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
const [genres, setGenres] = useState<{ id: number; name: string }[]>(initialGenres ?? []);
@@ -39,7 +39,7 @@ export default function ZxdbExplorer({
const [genreId, setGenreId] = useState<number | "">("");
const [languageId, setLanguageId] = useState<string | "">("");
const [machinetypeId, setMachinetypeId] = useState<number | "">("");
const [sort, setSort] = useState<"title" | "id_desc">("title");
const [sort, setSort] = useState<"title" | "id_desc">("id_desc");
const pageSize = 20;
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
@@ -69,8 +69,27 @@ export default function ZxdbExplorer({
}
useEffect(() => {
// Avoid immediate client fetch on first paint if server provided initial data
if (initial && page === 1 && q === "" && genreId === "" && languageId === "" && machinetypeId === "" && sort === "title") {
// When navigating via Next.js Links that change ?page=, SSR provides new `initial`.
// Sync local state from new SSR payload so the list and counter update immediately
// without an extra client fetch.
if (initial) {
setData(initial);
setPage(initial.page);
}
}, [initial]);
useEffect(() => {
// Avoid immediate client fetch on first paint if server provided initial data for this exact state
const initialPage = initial?.page ?? 1;
if (
initial &&
page === initialPage &&
q === "" &&
genreId === "" &&
languageId === "" &&
machinetypeId === "" &&
sort === "id_desc"
) {
return;
}
fetchData(q, page);
@@ -185,23 +204,25 @@ export default function ZxdbExplorer({
</div>
<div className="d-flex align-items-center gap-2 mt-2">
<button
className="btn btn-outline-secondary"
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={loading || page <= 1}
>
Prev
</button>
<span>
Page {data?.page ?? page} / {totalPages}
Page {data?.page ?? 1} / {totalPages}
</span>
<button
className="btn btn-outline-secondary"
onClick={() => setPage((p) => p + 1)}
disabled={loading || (data ? data.page >= totalPages : false)}
>
Next
</button>
<div className="ms-auto d-flex gap-2">
<Link
className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
aria-disabled={!data || data.page <= 1}
href={`/zxdb?page=${Math.max(1, (data?.page ?? 1) - 1)}`}
>
Prev
</Link>
<Link
className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
aria-disabled={!data || data.page >= totalPages}
href={`/zxdb?page=${Math.min(totalPages, (data?.page ?? 1) + 1)}`}
>
Next
</Link>
</div>
</div>
<hr />

30
src/app/zxdb/genres/[id]/GenreDetail.tsx
View File

@@ -1,21 +1,19 @@
"use client";
import Link from "next/link";
import { useMemo, useState } from "react";
import { useMemo } from "react";
type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
export default function GenreDetailClient({ id, initial }: { id: number; initial: Paged<Item> }) {
const [data] = useState<Paged<Item>>(initial);
const [page] = useState(1);
const totalPages = useMemo(() => Math.max(1, Math.ceil(data.total / data.pageSize)), [data]);
const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
return (
<div className="container">
<h1>Genre #{id}</h1>
{data && data.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
{data && data.items.length > 0 && (
{initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
{initial && initial.items.length > 0 && (
<div className="table-responsive">
<table className="table table-striped table-hover align-middle">
<thead>
@@ -27,7 +25,7 @@ export default function GenreDetailClient({ id, initial }: { id: number; initial
</tr>
</thead>
<tbody>
{data.items.map((it) => (
{initial.items.map((it) => (
<tr key={it.id}>
<td>{it.id}</td>
<td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
@@ -41,7 +39,23 @@ export default function GenreDetailClient({ id, initial }: { id: number; initial
)}
<div className="d-flex align-items-center gap-2 mt-2">
<span>Page {data.page} / {totalPages}</span>
<span>Page {initial.page} / {totalPages}</span>
<div className="ms-auto d-flex gap-2">
<Link
className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
aria-disabled={initial.page <= 1}
href={`/zxdb/genres/${id}?page=${Math.max(1, initial.page - 1)}`}
>
Prev
</Link>
<Link
className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
aria-disabled={initial.page >= totalPages}
href={`/zxdb/genres/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
>
Next
</Link>
</div>
</div>
</div>
);

10
src/app/zxdb/genres/[id]/page.tsx
View File

@@ -3,11 +3,13 @@ import { entriesByGenre } from "@/server/repo/zxdb";
export const metadata = { title: "ZXDB Genre" };
export const revalidate = 3600;
// Depends on searchParams (?page=). Force dynamic so each page renders correctly.
export const dynamic = "force-dynamic";
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
const [{ id }, sp] = await Promise.all([params, searchParams]);
const numericId = Number(id);
const initial = await entriesByGenre(numericId, 1, 20);
const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
const initial = await entriesByGenre(numericId, page, 20);
return <GenreDetailClient id={numericId} initial={initial as any} />;
}

82
src/app/zxdb/labels/LabelsSearch.tsx
View File

@@ -1,51 +1,34 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
type Label = { id: number; name: string; labeltypeId: string | null };
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
export default function LabelsSearch({ initial }: { initial?: Paged<Label> }) {
const [q, setQ] = useState("");
const [page, setPage] = useState(1);
export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<Label>; initialQ?: string }) {
const router = useRouter();
const [q, setQ] = useState(initialQ ?? "");
const [data, setData] = useState<Paged<Label> | null>(initial ?? null);
const [loading, setLoading] = useState(false);
const firstLoadSkipped = useRef(false);
const pageSize = 20;
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
async function load() {
setLoading(true);
try {
const params = new URLSearchParams();
if (q) params.set("q", q);
params.set("page", String(page));
params.set("pageSize", String(pageSize));
const res = await fetch(`/api/zxdb/labels/search?${params.toString()}`, { cache: "no-store" });
const json = (await res.json()) as Paged<Label>;
setData(json);
} catch (e) {
setData({ items: [], page: 1, pageSize, total: 0 });
} finally {
setLoading(false);
}
}
// Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
useEffect(() => {
// If server provided initial data for first page of empty search, skip first fetch
if (!firstLoadSkipped.current && initial && !q && page === 1) {
firstLoadSkipped.current = true;
return;
}
load();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [page]);
if (initial) setData(initial);
}, [initial]);
// Keep input in sync with URL q on navigation
useEffect(() => {
setQ(initialQ ?? "");
}, [initialQ]);
function submit(e: React.FormEvent) {
e.preventDefault();
setPage(1);
load();
const params = new URLSearchParams();
if (q) params.set("q", q);
params.set("page", "1");
router.push(`/zxdb/labels?${params.toString()}`);
}
return (
@@ -56,13 +39,12 @@ export default function LabelsSearch({ initial }: { initial?: Paged<Label> }) {
<input className="form-control" placeholder="Search labels…" value={q} onChange={(e) => setQ(e.target.value)} />
</div>
<div className="col-auto">
<button className="btn btn-primary" disabled={loading}>Search</button>
<button className="btn btn-primary">Search</button>
</div>
</form>
<div className="mt-3">
{loading && <div>Loading…</div>}
{data && data.items.length === 0 && !loading && <div className="alert alert-warning">No labels found.</div>}
{data && data.items.length === 0 && <div className="alert alert-warning">No labels found.</div>}
{data && data.items.length > 0 && (
<ul className="list-group">
{data.items.map((l) => (
@@ -76,15 +58,23 @@ export default function LabelsSearch({ initial }: { initial?: Paged<Label> }) {
</div>
<div className="d-flex align-items-center gap-2 mt-2">
<button className="btn btn-outline-secondary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={loading || page <= 1}>
Prev
</button>
<span>
Page {data?.page ?? page} / {totalPages}
</span>
<button className="btn btn-outline-secondary" onClick={() => setPage((p) => p + 1)} disabled={loading || (data ? data.page >= totalPages : false)}>
Next
</button>
<span>Page {data?.page ?? 1} / {totalPages}</span>
<div className="ms-auto d-flex gap-2">
<Link
className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
aria-disabled={!data || data.page <= 1}
href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
>
Prev
</Link>
<Link
className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
aria-disabled={!data || data.page >= totalPages}
href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
>
Next
</Link>
</div>
</div>
</div>
);

33
src/app/zxdb/labels/[id]/LabelDetail.tsx
View File

@@ -9,22 +9,21 @@ type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
type Payload = { label: Label | null; authored: Paged<Item>; published: Paged<Item> };
export default function LabelDetailClient({ id, initial }: { id: number; initial: Payload }) {
const [data] = useState<Payload>(initial);
const [tab, setTab] = useState<"authored" | "published">("authored");
const [page] = useState(1);
export default function LabelDetailClient({ id, initial, initialTab }: { id: number; initial: Payload; initialTab?: "authored" | "published" }) {
// Keep only interactive UI state (tab). Data should come directly from SSR props so it updates on navigation.
const [tab, setTab] = useState<"authored" | "published">(initialTab ?? "authored");
if (!data || !data.label) return <div className="alert alert-warning">Not found</div>;
if (!initial || !initial.label) return <div className="alert alert-warning">Not found</div>;
const current = useMemo(() => (tab === "authored" ? data.authored : data.published), [data, tab]);
const current = useMemo(() => (tab === "authored" ? initial.authored : initial.published), [initial, tab]);
const totalPages = useMemo(() => Math.max(1, Math.ceil(current.total / current.pageSize)), [current]);
return (
<div className="container">
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
<h1 className="mb-0">{data.label.name}</h1>
<h1 className="mb-0">{initial.label.name}</h1>
<div>
<span className="badge text-bg-light">{data.label.labeltypeId ?? "?"}</span>
<span className="badge text-bg-light">{initial.label.labeltypeId ?? "?"}</span>
</div>
</div>
@@ -66,7 +65,23 @@ export default function LabelDetailClient({ id, initial }: { id: number; initial
</div>
<div className="d-flex align-items-center gap-2 mt-2">
<span>Page {page} / {totalPages}</span>
<span>Page {current.page} / {totalPages}</span>
<div className="ms-auto d-flex gap-2">
<Link
className={`btn btn-sm btn-outline-secondary ${current.page <= 1 ? "disabled" : ""}`}
aria-disabled={current.page <= 1}
href={`/zxdb/labels/${id}?tab=${tab}&page=${Math.max(1, current.page - 1)}`}
>
Prev
</Link>
<Link
className={`btn btn-sm btn-outline-secondary ${current.page >= totalPages ? "disabled" : ""}`}
aria-disabled={current.page >= totalPages}
href={`/zxdb/labels/${id}?tab=${tab}&page=${Math.min(totalPages, current.page + 1)}`}
>
Next
</Link>
</div>
</div>
</div>
);

16
src/app/zxdb/labels/[id]/page.tsx
View File

@@ -3,17 +3,21 @@ import { getLabelById, getLabelAuthoredEntries, getLabelPublishedEntries } from
export const metadata = { title: "ZXDB Label" };
export const revalidate = 3600;
// Depends on searchParams (?page=, ?tab=). Force dynamic so each request renders correctly.
export const dynamic = "force-dynamic";
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
const [{ id }, sp] = await Promise.all([params, searchParams]);
const numericId = Number(id);
const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
const tab = (Array.isArray(sp.tab) ? sp.tab[0] : sp.tab) as "authored" | "published" | undefined;
const [label, authored, published] = await Promise.all([
getLabelById(numericId),
getLabelAuthoredEntries(numericId, { page: 1, pageSize: 20 }),
getLabelPublishedEntries(numericId, { page: 1, pageSize: 20 }),
getLabelAuthoredEntries(numericId, { page, pageSize: 20 }),
getLabelPublishedEntries(numericId, { page, pageSize: 20 }),
]);
// Let the client component handle the "not found" simple state
return <LabelDetailClient id={numericId} initial={{ label: label as any, authored: authored as any, published: published as any }} />;
return <LabelDetailClient id={numericId} initial={{ label: label as any, authored: authored as any, published: published as any }} initialTab={tab} />;
}

13
src/app/zxdb/labels/page.tsx
View File

@@ -3,10 +3,13 @@ import { searchLabels } from "@/server/repo/zxdb";
export const metadata = { title: "ZXDB Labels" };
export const revalidate = 3600;
// Depends on searchParams (?q=, ?page=). Force dynamic so each request renders correctly.
export const dynamic = "force-dynamic";
export default async function Page() {
// Server-render first page of empty search for instant content
const initial = await searchLabels({ page: 1, pageSize: 20 });
return <LabelsSearch initial={initial as any} />;
export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
const sp = await searchParams;
const q = (Array.isArray(sp.q) ? sp.q[0] : sp.q) ?? "";
const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
const initial = await searchLabels({ q, page, pageSize: 20 });
return <LabelsSearch initial={initial as any} initialQ={q} />;
}

29
src/app/zxdb/languages/[id]/LanguageDetail.tsx
View File

@@ -1,20 +1,19 @@
"use client";
import Link from "next/link";
import { useMemo, useState } from "react";
import { useMemo } from "react";
type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
export default function LanguageDetailClient({ id, initial }: { id: string; initial: Paged<Item> }) {
const [data] = useState<Paged<Item>>(initial);
const totalPages = useMemo(() => Math.max(1, Math.ceil(data.total / data.pageSize)), [data]);
const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
return (
<div className="container">
<h1>Language {id}</h1>
{data && data.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
{data && data.items.length > 0 && (
{initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
{initial && initial.items.length > 0 && (
<div className="table-responsive">
<table className="table table-striped table-hover align-middle">
<thead>
@@ -26,7 +25,7 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
</tr>
</thead>
<tbody>
{data.items.map((it) => (
{initial.items.map((it) => (
<tr key={it.id}>
<td>{it.id}</td>
<td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
@@ -40,7 +39,23 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
)}
<div className="d-flex align-items-center gap-2 mt-2">
<span>Page {data.page} / {totalPages}</span>
<span>Page {initial.page} / {totalPages}</span>
<div className="ms-auto d-flex gap-2">
<Link
className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
aria-disabled={initial.page <= 1}
href={`/zxdb/languages/${id}?page=${Math.max(1, initial.page - 1)}`}
>
Prev
</Link>
<Link
className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
aria-disabled={initial.page >= totalPages}
href={`/zxdb/languages/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
>
Next
</Link>
</div>
</div>
</div>
);

10
src/app/zxdb/languages/[id]/page.tsx
View File

@@ -3,10 +3,12 @@ import { entriesByLanguage } from "@/server/repo/zxdb";
export const metadata = { title: "ZXDB Language" };
export const revalidate = 3600;
// Depends on searchParams (?page=). Force dynamic so each page renders correctly.
export const dynamic = "force-dynamic";
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const initial = await entriesByLanguage(id, 1, 20);
export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
const [{ id }, sp] = await Promise.all([params, searchParams]);
const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
const initial = await entriesByLanguage(id, page, 20);
return <LanguageDetailClient id={id} initial={initial as any} />;
}

29
src/app/zxdb/machinetypes/[id]/MachineTypeDetail.tsx
View File

@@ -1,20 +1,19 @@
"use client";
import Link from "next/link";
import { useMemo, useState } from "react";
import { useMemo } from "react";
type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
export default function MachineTypeDetailClient({ id, initial }: { id: number; initial: Paged<Item> }) {
const [data] = useState<Paged<Item>>(initial);
const totalPages = useMemo(() => Math.max(1, Math.ceil(data.total / data.pageSize)), [data]);
const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
return (
<div className="container">
<h1>Machine Type #{id}</h1>
{data && data.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
{data && data.items.length > 0 && (
{initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
{initial && initial.items.length > 0 && (
<div className="table-responsive">
<table className="table table-striped table-hover align-middle">
<thead>
@@ -26,7 +25,7 @@ export default function MachineTypeDetailClient({ id, initial }: { id: number; i
</tr>
</thead>
<tbody>
{data.items.map((it) => (
{initial.items.map((it) => (
<tr key={it.id}>
<td>{it.id}</td>
<td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
@@ -40,7 +39,23 @@ export default function MachineTypeDetailClient({ id, initial }: { id: number; i
)}
<div className="d-flex align-items-center gap-2 mt-2">
<span>Page {data.page} / {totalPages}</span>
<span>Page {initial.page} / {totalPages}</span>
<div className="ms-auto d-flex gap-2">
<Link
className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
aria-disabled={initial.page <= 1}
href={`/zxdb/machinetypes/${id}?page=${Math.max(1, initial.page - 1)}`}
>
Prev
</Link>
<Link
className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
aria-disabled={initial.page >= totalPages}
href={`/zxdb/machinetypes/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
>
Next
</Link>
</div>
</div>
</div>
);

11
src/app/zxdb/machinetypes/[id]/page.tsx
View File

@@ -2,12 +2,13 @@ import MachineTypeDetailClient from "./MachineTypeDetail";
import { entriesByMachinetype } from "@/server/repo/zxdb";
export const metadata = { title: "ZXDB Machine Type" };
// Depends on searchParams (?page=). Force dynamic so each page renders correctly.
export const dynamic = "force-dynamic";
export const revalidate = 3600;
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
const [{ id }, sp] = await Promise.all([params, searchParams]);
const numericId = Number(id);
const initial = await entriesByMachinetype(numericId, 1, 20);
const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
const initial = await entriesByMachinetype(numericId, page, 20);
return <MachineTypeDetailClient id={numericId} initial={initial as any} />;
}

12
src/app/zxdb/page.tsx
View File

@@ -5,12 +5,16 @@ export const metadata = {
title: "ZXDB Explorer",
};
export const revalidate = 3600;
// This page depends on searchParams (?page=, filters in future). Force dynamic
// rendering so ISR doesn’t cache a single HTML for all query strings.
export const dynamic = "force-dynamic";
export default async function Page() {
// Server-render initial page (no query) to avoid first client fetch
export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
const sp = await searchParams;
const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
// Server-render initial page based on URL to avoid first client fetch and keep counter in sync
const [initial, genres, langs, machines] = await Promise.all([
searchEntries({ page: 1, pageSize: 20, sort: "id_desc" }),
searchEntries({ page, pageSize: 20, sort: "id_desc" }),
listGenres(),
listLanguages(),
listMachinetypes(),

47
src/server/repo/zxdb.ts
View File

@@ -68,7 +68,7 @@ export async function searchEntries(params: SearchParams): Promise<PagedResult<S
const whereExpr = whereClauses.length ? and(...whereClauses) : undefined;
const [items, [{ total }]] = await Promise.all([
const [items, countRows] = await Promise.all([
db
.select()
.from(entries)
@@ -76,16 +76,13 @@ export async function searchEntries(params: SearchParams): Promise<PagedResult<S
.orderBy(sort === "id_desc" ? desc(entries.id) : entries.title)
.limit(pageSize)
.offset(offset),
db.execute(
sql`select count(*) as total from ${entries} ${whereExpr ? sql`where ${whereExpr}` : sql``}`
) as Promise<any>,
db
.select({ total: sql<number>`count(*)` })
.from(entries)
.where(whereExpr as any) as unknown as Promise<{ total: number }[]>,
]);
return {
items: items as any,
page,
pageSize,
total: Number((total as any) ?? 0),
};
const total = Number(countRows?.[0]?.total ?? 0);
return { items: items as any, page, pageSize, total };
}
const pattern = `%${q.toLowerCase().replace(/[^a-z0-9]+/g, "")}%`;
@@ -201,11 +198,14 @@ export async function searchLabels(params: LabelSearchParams): Promise<PagedResu
const offset = (page - 1) * pageSize;
if (!q) {
const [items, [{ total }]] = await Promise.all([
const [items, countRows] = await Promise.all([
db.select().from(labels).orderBy(labels.name).limit(pageSize).offset(offset),
db.execute(sql`select count(*) as total from ${labels}`) as Promise<any>,
db
.select({ total: sql<number>`count(*)` })
.from(labels) as unknown as Promise<{ total: number }[]>,
]);
return { items: items as any, page, pageSize, total: Number(total ?? 0) };
const total = Number(countRows?.[0]?.total ?? 0);
return { items: items as any, page, pageSize, total };
}
// Using helper search_by_names for efficiency
@@ -313,7 +313,10 @@ export async function listMachinetypes() {
export async function entriesByGenre(genreId: number, page: number, pageSize: number): Promise<PagedResult<SearchResultItem>> {
const offset = (page - 1) * pageSize;
const [{ total }]: any = await db.execute(sql`select count(*) as total from ${entries} where ${entries.genretypeId} = ${genreId}`);
const countRows = (await db
.select({ total: sql<number>`count(*)` })
.from(entries)
.where(eq(entries.genretypeId, genreId as any))) as unknown as { total: number }[];
const items = await db
.select({ id: entries.id, title: entries.title, isXrated: entries.isXrated, machinetypeId: entries.machinetypeId, languageId: entries.languageId })
.from(entries)
@@ -321,12 +324,15 @@ export async function entriesByGenre(genreId: number, page: number, pageSize: nu
.orderBy(entries.title)
.limit(pageSize)
.offset(offset);
return { items: items as any, page, pageSize, total: Number(total ?? 0) };
return { items: items as any, page, pageSize, total: Number(countRows?.[0]?.total ?? 0) };
}
export async function entriesByLanguage(langId: string, page: number, pageSize: number): Promise<PagedResult<SearchResultItem>> {
const offset = (page - 1) * pageSize;
const [{ total }]: any = await db.execute(sql`select count(*) as total from ${entries} where ${entries.languageId} = ${langId}`);
const countRows = (await db
.select({ total: sql<number>`count(*)` })
.from(entries)
.where(eq(entries.languageId, langId as any))) as unknown as { total: number }[];
const items = await db
.select({ id: entries.id, title: entries.title, isXrated: entries.isXrated, machinetypeId: entries.machinetypeId, languageId: entries.languageId })
.from(entries)
@@ -334,12 +340,15 @@ export async function entriesByLanguage(langId: string, page: number, pageSize:
.orderBy(entries.title)
.limit(pageSize)
.offset(offset);
return { items: items as any, page, pageSize, total: Number(total ?? 0) };
return { items: items as any, page, pageSize, total: Number(countRows?.[0]?.total ?? 0) };
}
export async function entriesByMachinetype(mtId: number, page: number, pageSize: number): Promise<PagedResult<SearchResultItem>> {
const offset = (page - 1) * pageSize;
const [{ total }]: any = await db.execute(sql`select count(*) as total from ${entries} where ${entries.machinetypeId} = ${mtId}`);
const countRows = (await db
.select({ total: sql<number>`count(*)` })
.from(entries)
.where(eq(entries.machinetypeId, mtId as any))) as unknown as { total: number }[];
const items = await db
.select({ id: entries.id, title: entries.title, isXrated: entries.isXrated, machinetypeId: entries.machinetypeId, languageId: entries.languageId })
.from(entries)
@@ -347,7 +356,7 @@ export async function entriesByMachinetype(mtId: number, page: number, pageSize:
.orderBy(entries.title)
.limit(pageSize)
.offset(offset);
return { items: items as any, page, pageSize, total: Number(total ?? 0) };
return { items: items as any, page, pageSize, total: Number(countRows?.[0]?.total ?? 0) };
}
// ----- Facets for search -----