Use react-bootstrap throughout, improve entry detail
Switch sidebar components (FilterSection, FilterSidebar, Pagination) and both explorer pages to use react-bootstrap: Card, Table, Badge, Button, Alert, Form.Control, Form.Select, InputGroup, Collapse, Spinner. Use react-bootstrap-icons for Search, ChevronDown, Download, BoxArrowUpRight, etc. Entry detail page: remove MD5 columns from Downloads and Files tables. Hide empty sections entirely instead of showing placeholder cards. Human-readable file sizes (KB/MB). Web links shown as compact list with external-link icons. Notes rendered as badge+text instead of table rows. Scores and web links moved to sidebar. No-results alert now shows active machine filter names and offers to search all machines via Alert.Link. Update CLAUDE.md with react-bootstrap design conventions and remove stale ZxdbExplorer.tsx references. claude-opus-4-6@McFiver
This commit is contained in:
23
AGENTS.md
23
AGENTS.md
@@ -67,7 +67,7 @@ next-explorer/
|
||||
- `RegisterDetail.tsx`: Client Component that renders a single register’s details, including modes, notes, and source modal.
|
||||
- `[hex]/page.tsx`: Dynamic route that renders details for a specific register by hex address.
|
||||
- `src/app/zxdb/`: ZXDB Explorer routes and client components.
|
||||
- `page.tsx` + `ZxdbExplorer.tsx`: Search + filters with server-rendered initial content and ISR.
|
||||
- `page.tsx`: ZXDB hub page linking to entries, releases, labels, etc.
|
||||
- `entries/[id]/page.tsx` + `EntryDetail.tsx`: Entry details (SSR initial data).
|
||||
- `releases/page.tsx` + `ReleasesExplorer.tsx`: Releases search + filters.
|
||||
- `labels/page.tsx`, `labels/[id]/page.tsx` + client: Labels search and detail.
|
||||
@@ -108,6 +108,25 @@ Comment what the code does, not what the agent has done. The documentation's pur
|
||||
- Use `type` for interfaces.
|
||||
- No `enum`.
|
||||
|
||||
### UI / Bootstrap Patterns
|
||||
|
||||
The project uses the **Bootswatch Pulse** theme (purple primary) with `react-bootstrap` and `react-bootstrap-icons`.
|
||||
|
||||
- **Always use react-bootstrap components** over raw HTML+className for Bootstrap elements:
|
||||
- `Card`, `Table`, `Badge`, `Button`, `Alert`, `Form.Control`, `Form.Select`, `Form.Check`, `InputGroup`, `Spinner`, `Collapse` etc.
|
||||
- Icons from `react-bootstrap-icons` (e.g. `Search`, `ChevronDown`, `Download`, `BoxArrowUpRight`).
|
||||
- **Match existing patterns** — see `RegisterBrowser.tsx` and `Navbar.tsx` for canonical react-bootstrap usage.
|
||||
- **Shared explorer components** in `src/components/explorer/`:
|
||||
- `ExplorerLayout` — two-column layout (sidebar + content).
|
||||
- `FilterSidebar` — `Card` wrapper with optional "Reset all filters" button.
|
||||
- `FilterSection` — collapsible filter group with label, badge, and `Collapse` animation.
|
||||
- `MultiSelectChips` — chip-toggle selector with optional collapsed summary mode.
|
||||
- `Pagination` — prev/next with page counter and loading spinner.
|
||||
- **Stale-while-revalidate pattern** — show previous results at reduced opacity during loading (`className={loading ? "opacity-50" : ""}`), never blank the screen.
|
||||
- **Empty states** — only show a section/card if it has data. Do not render empty cards with "No X recorded" placeholders; omit them entirely.
|
||||
- **Tables** — use react-bootstrap `<Table size="sm" striped>` for data tables. Human-readable sizes (KB/MB) over raw bytes. Omit columns that add noise without value (e.g. MD5 hashes).
|
||||
- **Alerts** — use `<Alert variant="warning">` for "no results" states with actionable suggestions (e.g. offering to broaden filters).
|
||||
|
||||
### React / Next.js Patterns
|
||||
|
||||
- **Server Components**:
|
||||
@@ -122,7 +141,7 @@ Comment what the code does, not what the agent has done. The documentation's pur
|
||||
- `RegisterDetail.tsx`:
|
||||
- Marked with `'use client'`.
|
||||
- Renders a single register with tabs for different access modes.
|
||||
- ZXDB client components (e.g., `ZxdbExplorer.tsx`, `EntryDetail.tsx`, `labels/*`) receive initial data from the server and keep interactions on the client without blocking the first paint.
|
||||
- ZXDB client components (e.g., `EntriesExplorer.tsx`, `EntryDetail.tsx`, `labels/*`) receive initial data from the server and keep interactions on the client without blocking the first paint.
|
||||
|
||||
- **Dynamic Routing**:
|
||||
- Pages and API routes must await dynamic params in Next.js 15:
|
||||
|
||||
@@ -1,271 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
type Item = {
|
||||
id: number;
|
||||
title: string;
|
||||
isXrated: number;
|
||||
machinetypeId: number | null;
|
||||
machinetypeName?: string | null;
|
||||
languageId: string | null;
|
||||
languageName?: string | null;
|
||||
};
|
||||
|
||||
type Paged<T> = {
|
||||
items: T[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
|
||||
export default function ZxdbExplorer({
|
||||
initial,
|
||||
initialGenres,
|
||||
initialLanguages,
|
||||
initialMachines,
|
||||
}: {
|
||||
initial?: Paged<Item>;
|
||||
initialGenres?: { id: number; name: string }[];
|
||||
initialLanguages?: { id: string; name: string }[];
|
||||
initialMachines?: { id: number; name: string }[];
|
||||
}) {
|
||||
const [q, setQ] = useState("");
|
||||
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 ?? []);
|
||||
const [languages, setLanguages] = useState<{ id: string; name: string }[]>(initialLanguages ?? []);
|
||||
const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialMachines ?? []);
|
||||
const [genreId, setGenreId] = useState<number | "">("");
|
||||
const [languageId, setLanguageId] = useState<string | "">("");
|
||||
const [machinetypeId, setMachinetypeId] = useState<number | "">("");
|
||||
const [year, setYear] = useState<string>("");
|
||||
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]);
|
||||
|
||||
async function fetchData(query: string, p: number) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (query) params.set("q", query);
|
||||
params.set("page", String(p));
|
||||
params.set("pageSize", String(pageSize));
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeId !== "") params.set("machinetypeId", String(machinetypeId));
|
||||
if (year !== "") params.set("year", year);
|
||||
if (sort) params.set("sort", sort);
|
||||
const res = await fetch(`/api/zxdb/search?${params.toString()}`);
|
||||
if (!res.ok) throw new Error(`Failed: ${res.status}`);
|
||||
const json: Paged<Item> = await res.json();
|
||||
setData(json);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setData({ items: [], page: 1, pageSize, total: 0 });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// 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 === "" &&
|
||||
year === "" &&
|
||||
sort === "id_desc"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
fetchData(q, page);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [page, genreId, languageId, machinetypeId, year, sort]);
|
||||
|
||||
// Load filter lists on mount only if not provided by server
|
||||
useEffect(() => {
|
||||
if (initialGenres && initialLanguages && initialMachines) return;
|
||||
async function loadLists() {
|
||||
try {
|
||||
const [g, l, m] = await Promise.all([
|
||||
fetch("/api/zxdb/genres", { cache: "force-cache" }).then((r) => r.json()),
|
||||
fetch("/api/zxdb/languages", { cache: "force-cache" }).then((r) => r.json()),
|
||||
fetch("/api/zxdb/machinetypes", { cache: "force-cache" }).then((r) => r.json()),
|
||||
]);
|
||||
setGenres(g.items ?? []);
|
||||
setLanguages(l.items ?? []);
|
||||
setMachines(m.items ?? []);
|
||||
} catch {}
|
||||
}
|
||||
loadLists();
|
||||
}, [initialGenres, initialLanguages, initialMachines]);
|
||||
|
||||
function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setPage(1);
|
||||
fetchData(q, 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="mb-3">ZXDB Explorer</h1>
|
||||
<form className="row gy-2 gx-2 align-items-center" onSubmit={onSubmit}>
|
||||
<div className="col-sm-8 col-md-6 col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Search titles..."
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button className="btn btn-primary" type="submit" disabled={loading}>Search</button>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<select className="form-select" value={genreId} onChange={(e) => setGenreId(e.target.value === "" ? "" : Number(e.target.value))}>
|
||||
<option value="">Genre</option>
|
||||
{genres.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<select className="form-select" value={languageId} onChange={(e) => setLanguageId(e.target.value)}>
|
||||
<option value="">Language</option>
|
||||
{languages.map((l) => (
|
||||
<option key={l.id} value={l.id}>{l.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<select className="form-select" value={machinetypeId} onChange={(e) => setMachinetypeId(e.target.value === "" ? "" : Number(e.target.value))}>
|
||||
<option value="">Machine</option>
|
||||
{machines.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
style={{ width: 100 }}
|
||||
placeholder="Year"
|
||||
value={year}
|
||||
onChange={(e) => setYear(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<select className="form-select" value={sort} onChange={(e) => setSort(e.target.value as "title" | "id_desc")}>
|
||||
<option value="title">Sort: Title</option>
|
||||
<option value="id_desc">Sort: Newest</option>
|
||||
</select>
|
||||
</div>
|
||||
{loading && (
|
||||
<div className="col-auto text-secondary">Loading...</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<div className="mt-3">
|
||||
{data && data.items.length === 0 && !loading && (
|
||||
<div className="alert alert-warning">No results.</div>
|
||||
)}
|
||||
{data && data.items.length > 0 && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{width: 80}}>ID</th>
|
||||
<th>Title</th>
|
||||
<th style={{width: 160}}>Machine</th>
|
||||
<th style={{width: 120}}>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.items.map((it) => (
|
||||
<tr key={it.id}>
|
||||
<td>{it.id}</td>
|
||||
<td>
|
||||
<Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link>
|
||||
</td>
|
||||
<td>
|
||||
{it.machinetypeId != null ? (
|
||||
it.machinetypeName ? (
|
||||
<Link href={`/zxdb/machinetypes/${it.machinetypeId}`}>{it.machinetypeName}</Link>
|
||||
) : (
|
||||
<span>{it.machinetypeId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{it.languageId ? (
|
||||
it.languageName ? (
|
||||
<Link href={`/zxdb/languages/${it.languageId}`}>{it.languageName}</Link>
|
||||
) : (
|
||||
<span>{it.languageId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-2">
|
||||
<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?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 />
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
<Link className="btn btn-sm btn-outline-secondary" href="/zxdb/labels">Browse Labels</Link>
|
||||
<Link className="btn btn-sm btn-outline-secondary" href="/zxdb/genres">Browse Genres</Link>
|
||||
<Link className="btn btn-sm btn-outline-secondary" href="/zxdb/languages">Browse Languages</Link>
|
||||
<Link className="btn btn-sm btn-outline-secondary" href="/zxdb/machinetypes">Browse Machines</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Form, InputGroup, Button, Table, Alert, Badge } from "react-bootstrap";
|
||||
import { Search } from "react-bootstrap-icons";
|
||||
import EntryLink from "../components/EntryLink";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
|
||||
import ExplorerLayout from "@/components/explorer/ExplorerLayout";
|
||||
import FilterSidebar from "@/components/explorer/FilterSidebar";
|
||||
import FilterSection from "@/components/explorer/FilterSection";
|
||||
import MultiSelectChips from "@/components/explorer/MultiSelectChips";
|
||||
import Pagination from "@/components/explorer/Pagination";
|
||||
import useSearchFetch from "@/hooks/useSearchFetch";
|
||||
|
||||
const preferredMachineIds = [27, 26, 8, 9];
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
type Item = {
|
||||
id: number;
|
||||
@@ -23,8 +29,6 @@ type Item = {
|
||||
languageName?: string | null;
|
||||
};
|
||||
|
||||
type SearchScope = "title" | "title_aliases" | "title_aliases_origins";
|
||||
|
||||
type Paged<T> = {
|
||||
items: T[];
|
||||
page: number;
|
||||
@@ -32,6 +36,8 @@ type Paged<T> = {
|
||||
total: number;
|
||||
};
|
||||
|
||||
type SearchScope = "title" | "title_aliases" | "title_aliases_origins";
|
||||
|
||||
type EntryFacets = {
|
||||
genres: { id: number; name: string; count: number }[];
|
||||
languages: { id: string; name: string; count: number }[];
|
||||
@@ -39,6 +45,15 @@ type EntryFacets = {
|
||||
flags: { hasAliases: number; hasOrigins: number };
|
||||
};
|
||||
|
||||
function parseMachineIds(value?: string) {
|
||||
if (!value) return preferredMachineIds.slice();
|
||||
const ids = value
|
||||
.split(",")
|
||||
.map((id) => Number(id.trim()))
|
||||
.filter((id) => Number.isFinite(id) && id > 0);
|
||||
return ids.length ? ids : preferredMachineIds.slice();
|
||||
}
|
||||
|
||||
export default function EntriesExplorer({
|
||||
initial,
|
||||
initialGenres,
|
||||
@@ -62,26 +77,13 @@ export default function EntriesExplorer({
|
||||
scope?: SearchScope;
|
||||
};
|
||||
}) {
|
||||
const parseMachineIds = (value?: string) => {
|
||||
if (!value) return preferredMachineIds.slice();
|
||||
const ids = value
|
||||
.split(",")
|
||||
.map((id) => Number(id.trim()))
|
||||
.filter((id) => Number.isFinite(id) && id > 0);
|
||||
return ids.length ? ids : preferredMachineIds.slice();
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
// -- Search state --
|
||||
const [q, setQ] = useState(initialUrlState?.q ?? "");
|
||||
const [appliedQ, setAppliedQ] = useState(initialUrlState?.q ?? "");
|
||||
const [page, setPage] = useState(initial?.page ?? initialUrlState?.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 ?? []);
|
||||
const [languages, setLanguages] = useState<{ id: string; name: string }[]>(initialLanguages ?? []);
|
||||
const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialMachines ?? []);
|
||||
const [genreId, setGenreId] = useState<number | "">(
|
||||
initialUrlState?.genreId === "" ? "" : initialUrlState?.genreId ? Number(initialUrlState.genreId) : ""
|
||||
);
|
||||
@@ -90,112 +92,95 @@ export default function EntriesExplorer({
|
||||
const [sort, setSort] = useState<"title" | "id_desc">(initialUrlState?.sort ?? "id_desc");
|
||||
const [scope, setScope] = useState<SearchScope>(initialUrlState?.scope ?? "title");
|
||||
const [facets, setFacets] = useState<EntryFacets | null>(initialFacets ?? null);
|
||||
const preferredMachineNames = useMemo(() => {
|
||||
if (!machines.length) return preferredMachineIds.map((id) => `#${id}`);
|
||||
return preferredMachineIds.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`);
|
||||
}, [machines]);
|
||||
|
||||
// -- Filter lists --
|
||||
const [genres, setGenres] = useState<{ id: number; name: string }[]>(initialGenres ?? []);
|
||||
const [languages, setLanguages] = useState<{ id: string; name: string }[]>(initialLanguages ?? []);
|
||||
const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialMachines ?? []);
|
||||
|
||||
// Capture facets from the API response alongside paged results
|
||||
const handleExtra = useCallback((json: Record<string, unknown>) => {
|
||||
if (json.facets) setFacets(json.facets as EntryFacets);
|
||||
}, []);
|
||||
|
||||
// -- Fetch with abort control --
|
||||
const { data, loading, error, fetch: doFetch, syncData } = useSearchFetch<Item>(
|
||||
"/api/zxdb/search",
|
||||
initial ?? null,
|
||||
handleExtra,
|
||||
);
|
||||
|
||||
// Skip initial fetch when SSR data already matches
|
||||
const isFirstRender = useRef(true);
|
||||
|
||||
const totalPages = useMemo(
|
||||
() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1),
|
||||
[data],
|
||||
);
|
||||
|
||||
// -- URL helpers --
|
||||
const buildParams = useCallback(
|
||||
(p: number) => {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(p));
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
|
||||
if (sort) params.set("sort", sort);
|
||||
if (scope !== "title") params.set("scope", scope);
|
||||
return params;
|
||||
},
|
||||
[appliedQ, genreId, languageId, machinetypeIds, sort, scope],
|
||||
);
|
||||
|
||||
const buildHref = useCallback(
|
||||
(p: number) => {
|
||||
const qs = buildParams(p).toString();
|
||||
return qs ? `${pathname}?${qs}` : pathname;
|
||||
},
|
||||
[buildParams, pathname],
|
||||
);
|
||||
|
||||
// -- Derived --
|
||||
const orderedMachines = useMemo(() => {
|
||||
const seen = new Set(preferredMachineIds);
|
||||
const preferred = preferredMachineIds.map((id) => machines.find((m) => m.id === id)).filter(Boolean) as { id: number; name: string }[];
|
||||
const rest = machines.filter((m) => !seen.has(m.id));
|
||||
return [...preferred, ...rest];
|
||||
}, [machines]);
|
||||
const machineOptions = useMemo(() => orderedMachines.map((m) => ({ id: m.id, label: m.name })), [orderedMachines]);
|
||||
|
||||
const pageSize = 20;
|
||||
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
|
||||
const activeFilters = useMemo(() => {
|
||||
const chips: string[] = [];
|
||||
if (appliedQ) chips.push(`q: ${appliedQ}`);
|
||||
if (genreId !== "") {
|
||||
const name = genres.find((g) => g.id === Number(genreId))?.name ?? `#${genreId}`;
|
||||
chips.push(`genre: ${name}`);
|
||||
}
|
||||
if (languageId !== "") {
|
||||
const name = languages.find((l) => l.id === languageId)?.name ?? languageId;
|
||||
chips.push(`lang: ${name}`);
|
||||
}
|
||||
if (machinetypeIds.length > 0) {
|
||||
const names = machinetypeIds.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`);
|
||||
chips.push(`machine: ${names.join(", ")}`);
|
||||
}
|
||||
if (scope === "title_aliases") chips.push("scope: titles + aliases");
|
||||
if (scope === "title_aliases_origins") chips.push("scope: titles + aliases + origins");
|
||||
return chips;
|
||||
}, [appliedQ, genreId, languageId, machinetypeIds, scope, genres, languages, machines]);
|
||||
const machineOptions = useMemo(
|
||||
() => orderedMachines.map((m) => ({ id: m.id, label: m.name })),
|
||||
[orderedMachines],
|
||||
);
|
||||
|
||||
function updateUrl(nextPage = page) {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(nextPage));
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
|
||||
if (sort) params.set("sort", sort);
|
||||
if (scope !== "title") params.set("scope", scope);
|
||||
const qs = params.toString();
|
||||
router.replace(qs ? `${pathname}?${qs}` : pathname);
|
||||
}
|
||||
const hasNonDefaultMachineFilter = machinetypeIds.join(",") !== preferredMachineIds.join(",") ||
|
||||
machinetypeIds.length !== machines.length;
|
||||
|
||||
async function fetchData(query: string, p: number, withFacets: boolean) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (query) params.set("q", query);
|
||||
params.set("page", String(p));
|
||||
params.set("pageSize", String(pageSize));
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
|
||||
if (sort) params.set("sort", sort);
|
||||
if (scope !== "title") params.set("scope", scope);
|
||||
if (withFacets) params.set("facets", "true");
|
||||
const res = await fetch(`/api/zxdb/search?${params.toString()}`);
|
||||
if (!res.ok) throw new Error(`Failed: ${res.status}`);
|
||||
const json = await res.json();
|
||||
setData(json);
|
||||
if (withFacets && json.facets) {
|
||||
setFacets(json.facets as EntryFacets);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setData({ items: [], page: 1, pageSize, total: 0 });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Sync from SSR payload on navigation
|
||||
// -- Fetch + URL sync on filter/page changes --
|
||||
useEffect(() => {
|
||||
if (initial) {
|
||||
setData(initial);
|
||||
setPage(initial.page);
|
||||
}
|
||||
}, [initial]);
|
||||
|
||||
// Client fetch when filters/paging/sort change; also keep URL in sync
|
||||
useEffect(() => {
|
||||
// Avoid extra fetch if SSR already matches this exact default state
|
||||
const initialPage = initial?.page ?? 1;
|
||||
if (
|
||||
initial &&
|
||||
page === initialPage &&
|
||||
(initialUrlState?.q ?? "") === appliedQ &&
|
||||
(initialUrlState?.genreId === "" ? "" : Number(initialUrlState?.genreId ?? "")) === (genreId === "" ? "" : Number(genreId)) &&
|
||||
(initialUrlState?.languageId ?? "") === (languageId ?? "") &&
|
||||
parseMachineIds(initialUrlState?.machinetypeId).join(",") === machinetypeIds.join(",") &&
|
||||
sort === (initialUrlState?.sort ?? "id_desc") &&
|
||||
(initialUrlState?.scope ?? "title") === scope
|
||||
) {
|
||||
updateUrl(page);
|
||||
if (isFirstRender.current) {
|
||||
isFirstRender.current = false;
|
||||
router.replace(buildHref(page), { scroll: false });
|
||||
return;
|
||||
}
|
||||
updateUrl(page);
|
||||
fetchData(appliedQ, page, true);
|
||||
|
||||
router.replace(buildHref(page), { scroll: false });
|
||||
|
||||
const params = buildParams(page);
|
||||
params.set("pageSize", String(PAGE_SIZE));
|
||||
params.set("facets", "true");
|
||||
doFetch(params);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [page, genreId, languageId, machinetypeIds, sort, scope, appliedQ]);
|
||||
|
||||
// Load filter lists on mount only if not provided by server
|
||||
// Sync SSR data when navigating (browser back/forward)
|
||||
useEffect(() => {
|
||||
if (initial) syncData(initial);
|
||||
}, [initial, syncData]);
|
||||
|
||||
// Load filter lists on mount if not provided by server
|
||||
useEffect(() => {
|
||||
if (initialGenres && initialLanguages && initialMachines) return;
|
||||
async function loadLists() {
|
||||
@@ -208,7 +193,7 @@ export default function EntriesExplorer({
|
||||
setGenres(g.items ?? []);
|
||||
setLanguages(l.items ?? []);
|
||||
setMachines(m.items ?? []);
|
||||
} catch {}
|
||||
} catch { /* filter lists are non-critical */ }
|
||||
}
|
||||
loadLists();
|
||||
}, [initialGenres, initialLanguages, initialMachines]);
|
||||
@@ -219,6 +204,11 @@ export default function EntriesExplorer({
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
function searchAllMachines() {
|
||||
setMachinetypeIds(machineOptions.map((m) => m.id));
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
setQ("");
|
||||
setAppliedQ("");
|
||||
@@ -230,30 +220,6 @@ export default function EntriesExplorer({
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
const prevHref = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(Math.max(1, (data?.page ?? 1) - 1)));
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
|
||||
if (sort) params.set("sort", sort);
|
||||
if (scope !== "title") params.set("scope", scope);
|
||||
return `/zxdb/entries?${params.toString()}`;
|
||||
}, [appliedQ, data?.page, genreId, languageId, machinetypeIds, sort, scope]);
|
||||
|
||||
const nextHref = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(Math.max(1, (data?.page ?? 1) + 1)));
|
||||
if (genreId !== "") params.set("genreId", String(genreId));
|
||||
if (languageId !== "") params.set("languageId", String(languageId));
|
||||
if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
|
||||
if (sort) params.set("sort", sort);
|
||||
if (scope !== "title") params.set("scope", scope);
|
||||
return `/zxdb/entries?${params.toString()}`;
|
||||
}, [appliedQ, data?.page, genreId, languageId, machinetypeIds, sort, scope]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ZxdbBreadcrumbs
|
||||
@@ -266,47 +232,48 @@ export default function EntriesExplorer({
|
||||
<ExplorerLayout
|
||||
title="Entries"
|
||||
subtitle={data ? `${data.total.toLocaleString()} results` : "Loading results..."}
|
||||
chips={activeFilters}
|
||||
onClearChips={resetFilters}
|
||||
sidebar={(
|
||||
<FilterSidebar>
|
||||
<form className="d-flex flex-column gap-2" onSubmit={onSubmit}>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search</label>
|
||||
<input
|
||||
<FilterSidebar onReset={resetFilters} loading={loading}>
|
||||
<Form onSubmit={onSubmit} className="d-flex flex-column gap-2">
|
||||
<InputGroup>
|
||||
<Form.Control
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Search titles..."
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button className="btn btn-primary" type="submit" disabled={loading}>Search</button>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Genre</label>
|
||||
<select className="form-select" value={genreId} onChange={(e) => { setGenreId(e.target.value === "" ? "" : Number(e.target.value)); setPage(1); }}>
|
||||
<Button variant="primary" type="submit" disabled={loading}>
|
||||
<Search size={14} />
|
||||
</Button>
|
||||
</InputGroup>
|
||||
|
||||
<FilterSection label="Genre" badge={genreId !== "" ? genres.find((g) => g.id === Number(genreId))?.name : undefined}>
|
||||
<Form.Select size="sm" value={genreId} onChange={(e) => { setGenreId(e.target.value === "" ? "" : Number(e.target.value)); setPage(1); }}>
|
||||
<option value="">All genres</option>
|
||||
{genres.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Language</label>
|
||||
<select className="form-select" value={languageId} onChange={(e) => { setLanguageId(e.target.value); setPage(1); }}>
|
||||
</Form.Select>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection label="Language" badge={languageId !== "" ? languages.find((l) => l.id === languageId)?.name : undefined}>
|
||||
<Form.Select size="sm" value={languageId} onChange={(e) => { setLanguageId(e.target.value); setPage(1); }}>
|
||||
<option value="">All languages</option>
|
||||
{languages.map((l) => (
|
||||
<option key={l.id} value={l.id}>{l.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Machine</label>
|
||||
</Form.Select>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection
|
||||
label="Machine"
|
||||
badge={`${machinetypeIds.length} selected`}
|
||||
defaultOpen={false}
|
||||
>
|
||||
<MultiSelectChips
|
||||
options={machineOptions}
|
||||
selected={machinetypeIds}
|
||||
collapsible
|
||||
onToggle={(id) => {
|
||||
setMachinetypeIds((current) => {
|
||||
const next = new Set(current);
|
||||
@@ -316,148 +283,158 @@ export default function EntriesExplorer({
|
||||
next.add(id);
|
||||
}
|
||||
const order = machineOptions.map((item) => item.id);
|
||||
return order.filter((value) => next.has(value));
|
||||
const filtered = order.filter((value) => next.has(value));
|
||||
return filtered.length ? filtered : preferredMachineIds.slice();
|
||||
});
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
<div className="form-text">Preferred: {preferredMachineNames.join(", ")}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Sort</label>
|
||||
<select className="form-select" value={sort} onChange={(e) => { setSort(e.target.value as "title" | "id_desc"); setPage(1); }}>
|
||||
<option value="title">Title (A–Z)</option>
|
||||
<div className="d-flex gap-2 mt-1">
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
size="sm"
|
||||
onClick={() => { setMachinetypeIds(machineOptions.map((m) => m.id)); setPage(1); }}
|
||||
disabled={machinetypeIds.length === machineOptions.length}
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
size="sm"
|
||||
onClick={() => { setMachinetypeIds(preferredMachineIds.slice()); setPage(1); }}
|
||||
disabled={machinetypeIds.join(",") === preferredMachineIds.join(",")}
|
||||
>
|
||||
Default
|
||||
</Button>
|
||||
</div>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection label="Sort & Scope">
|
||||
<Form.Select size="sm" className="mb-2" value={sort} onChange={(e) => { setSort(e.target.value as "title" | "id_desc"); setPage(1); }}>
|
||||
<option value="title">Title (A-Z)</option>
|
||||
<option value="id_desc">Newest</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search scope</label>
|
||||
<select className="form-select" value={scope} onChange={(e) => { setScope(e.target.value as SearchScope); setPage(1); }}>
|
||||
<option value="title">Titles</option>
|
||||
</Form.Select>
|
||||
<Form.Select size="sm" value={scope} onChange={(e) => { setScope(e.target.value as SearchScope); setPage(1); }}>
|
||||
<option value="title">Titles only</option>
|
||||
<option value="title_aliases">Titles + Aliases</option>
|
||||
<option value="title_aliases_origins">Titles + Aliases + Origins</option>
|
||||
</select>
|
||||
</div>
|
||||
{facets && (
|
||||
<div>
|
||||
<div className="text-secondary small mb-1">Facets</div>
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm ${scope === "title_aliases" ? "btn-primary" : "btn-outline-secondary"}`}
|
||||
</Form.Select>
|
||||
</FilterSection>
|
||||
|
||||
{facets && (facets.flags.hasAliases > 0 || facets.flags.hasOrigins > 0) && (
|
||||
<FilterSection label="Facets">
|
||||
<div className="d-flex flex-wrap gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={scope === "title_aliases" ? "primary" : "outline-secondary"}
|
||||
onClick={() => { setScope("title_aliases"); setPage(1); }}
|
||||
disabled={facets.flags.hasAliases === 0}
|
||||
title="Show results that match aliases"
|
||||
>
|
||||
Has aliases ({facets.flags.hasAliases})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm ${scope === "title_aliases_origins" ? "btn-primary" : "btn-outline-secondary"}`}
|
||||
Aliases <Badge bg="light" text="dark" className="ms-1">{facets.flags.hasAliases}</Badge>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={scope === "title_aliases_origins" ? "primary" : "outline-secondary"}
|
||||
onClick={() => { setScope("title_aliases_origins"); setPage(1); }}
|
||||
disabled={facets.flags.hasOrigins === 0}
|
||||
title="Show results that match origins"
|
||||
>
|
||||
Has origins ({facets.flags.hasOrigins})
|
||||
</button>
|
||||
Origins <Badge bg="light" text="dark" className="ms-1">{facets.flags.hasOrigins}</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FilterSection>
|
||||
)}
|
||||
{loading && <div className="text-secondary small">Loading...</div>}
|
||||
</form>
|
||||
|
||||
{error && <Alert variant="danger" className="py-1 px-2 small mb-0">{error}</Alert>}
|
||||
</Form>
|
||||
</FilterSidebar>
|
||||
)}
|
||||
>
|
||||
{data && data.items.length === 0 && !loading && (
|
||||
<div className="alert alert-warning">No results.</div>
|
||||
)}
|
||||
{data && data.items.length > 0 && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: 80 }}>ID</th>
|
||||
<th>Title</th>
|
||||
<th style={{ width: 160 }}>Genre</th>
|
||||
<th style={{ width: 160 }}>Machine</th>
|
||||
<th style={{ width: 120 }}>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.items.map((it) => (
|
||||
<tr key={it.id}>
|
||||
<td><EntryLink id={it.id} /></td>
|
||||
<td><EntryLink id={it.id} title={it.title} /></td>
|
||||
<td>
|
||||
{it.genreId != null ? (
|
||||
it.genreName ? (
|
||||
<Link href={`/zxdb/genres/${it.genreId}`}>{it.genreName}</Link>
|
||||
) : (
|
||||
<span>{it.genreId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{it.machinetypeId != null ? (
|
||||
it.machinetypeName ? (
|
||||
<Link href={`/zxdb/machinetypes/${it.machinetypeId}`}>{it.machinetypeName}</Link>
|
||||
) : (
|
||||
<span>{it.machinetypeId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{it.languageId ? (
|
||||
it.languageName ? (
|
||||
<Link href={`/zxdb/languages/${it.languageId}`}>{it.languageName}</Link>
|
||||
) : (
|
||||
<span>{it.languageId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
<div className={loading ? "opacity-50" : ""} style={{ transition: "opacity 0.15s" }}>
|
||||
{data && data.items.length === 0 && !loading && (
|
||||
<Alert variant="warning">
|
||||
No results found.
|
||||
{hasNonDefaultMachineFilter && (
|
||||
<span>
|
||||
{" "}Filtering by{" "}
|
||||
<strong>
|
||||
{machinetypeIds
|
||||
.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`)
|
||||
.join(", ")}
|
||||
</strong>
|
||||
{" "}—{" "}
|
||||
<Alert.Link onClick={searchAllMachines}>
|
||||
search all machines
|
||||
</Alert.Link>?
|
||||
</span>
|
||||
)}
|
||||
</Alert>
|
||||
)}
|
||||
{data && data.items.length > 0 && (
|
||||
<div className="table-responsive">
|
||||
<Table striped hover className="align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: 80 }}>ID</th>
|
||||
<th>Title</th>
|
||||
<th style={{ width: 160 }}>Genre</th>
|
||||
<th style={{ width: 160 }}>Machine</th>
|
||||
<th style={{ width: 120 }}>Language</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.items.map((it) => (
|
||||
<tr key={it.id}>
|
||||
<td><EntryLink id={it.id} /></td>
|
||||
<td><EntryLink id={it.id} title={it.title} /></td>
|
||||
<td>
|
||||
{it.genreId != null ? (
|
||||
it.genreName ? (
|
||||
<Link href={`/zxdb/genres/${it.genreId}`}>{it.genreName}</Link>
|
||||
) : (
|
||||
<span>{it.genreId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{it.machinetypeId != null ? (
|
||||
it.machinetypeName ? (
|
||||
<Link href={`/zxdb/machinetypes/${it.machinetypeId}`}>{it.machinetypeName}</Link>
|
||||
) : (
|
||||
<span>{it.machinetypeId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{it.languageId ? (
|
||||
it.languageName ? (
|
||||
<Link href={`/zxdb/languages/${it.languageId}`}>{it.languageName}</Link>
|
||||
) : (
|
||||
<span>{it.languageId}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-secondary">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ExplorerLayout>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-4">
|
||||
<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={prevHref}
|
||||
onClick={(e) => {
|
||||
if (!data || data.page <= 1) return;
|
||||
e.preventDefault();
|
||||
setPage((p) => Math.max(1, p - 1));
|
||||
}}
|
||||
>
|
||||
Prev
|
||||
</Link>
|
||||
<Link
|
||||
className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
|
||||
aria-disabled={!data || data.page >= totalPages}
|
||||
href={nextHref}
|
||||
onClick={(e) => {
|
||||
if (!data || data.page >= totalPages) return;
|
||||
e.preventDefault();
|
||||
setPage((p) => Math.min(totalPages, p + 1));
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination
|
||||
page={data?.page ?? page}
|
||||
totalPages={totalPages}
|
||||
loading={loading}
|
||||
buildHref={buildHref}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
|
||||
<hr />
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
|
||||
import Pagination from "@/components/explorer/Pagination";
|
||||
|
||||
type Genre = { id: number; name: string };
|
||||
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
|
||||
@@ -30,6 +31,13 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
|
||||
router.push(`/zxdb/genres?${params.toString()}`);
|
||||
}
|
||||
|
||||
const buildHref = useCallback((p: number) => {
|
||||
const params = new URLSearchParams();
|
||||
if (q) params.set("q", q);
|
||||
params.set("page", String(p));
|
||||
return `/zxdb/genres?${params.toString()}`;
|
||||
}, [q]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ZxdbBreadcrumbs
|
||||
@@ -53,7 +61,7 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
|
||||
<form className="d-flex flex-column gap-2" onSubmit={submit}>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search</label>
|
||||
<input className="form-control" placeholder="Search genres…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<input className="form-control" placeholder="Search genres..." value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button className="btn btn-primary">Search</button>
|
||||
@@ -90,25 +98,12 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-2">
|
||||
<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/genres?${(() => { 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/genres?${(() => { 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>
|
||||
<Pagination
|
||||
page={data?.page ?? 1}
|
||||
totalPages={totalPages}
|
||||
buildHref={buildHref}
|
||||
onPageChange={(p) => router.push(buildHref(p))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
|
||||
import Pagination from "@/components/explorer/Pagination";
|
||||
|
||||
type Label = { id: number; name: string; labeltypeId: string | null };
|
||||
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
|
||||
@@ -14,12 +15,10 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
|
||||
const [data, setData] = useState<Paged<Label> | null>(initial ?? null);
|
||||
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
|
||||
|
||||
// Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
|
||||
useEffect(() => {
|
||||
if (initial) setData(initial);
|
||||
}, [initial]);
|
||||
|
||||
// Keep input in sync with URL q on navigation
|
||||
useEffect(() => {
|
||||
setQ(initialQ ?? "");
|
||||
}, [initialQ]);
|
||||
@@ -32,6 +31,13 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
|
||||
router.push(`/zxdb/labels?${params.toString()}`);
|
||||
}
|
||||
|
||||
const buildHref = useCallback((p: number) => {
|
||||
const params = new URLSearchParams();
|
||||
if (q) params.set("q", q);
|
||||
params.set("page", String(p));
|
||||
return `/zxdb/labels?${params.toString()}`;
|
||||
}, [q]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ZxdbBreadcrumbs
|
||||
@@ -55,7 +61,7 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
|
||||
<form className="d-flex flex-column gap-2" onSubmit={submit}>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search</label>
|
||||
<input className="form-control" placeholder="Search labels…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<input className="form-control" placeholder="Search labels..." value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button className="btn btn-primary">Search</button>
|
||||
@@ -96,25 +102,12 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-2">
|
||||
<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>
|
||||
<Pagination
|
||||
page={data?.page ?? 1}
|
||||
totalPages={totalPages}
|
||||
buildHref={buildHref}
|
||||
onPageChange={(p) => router.push(buildHref(p))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
|
||||
import Pagination from "@/components/explorer/Pagination";
|
||||
|
||||
type Language = { id: string; name: string };
|
||||
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
|
||||
@@ -30,6 +31,13 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
|
||||
router.push(`/zxdb/languages?${params.toString()}`);
|
||||
}
|
||||
|
||||
const buildHref = useCallback((p: number) => {
|
||||
const params = new URLSearchParams();
|
||||
if (q) params.set("q", q);
|
||||
params.set("page", String(p));
|
||||
return `/zxdb/languages?${params.toString()}`;
|
||||
}, [q]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ZxdbBreadcrumbs
|
||||
@@ -53,7 +61,7 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
|
||||
<form className="d-flex flex-column gap-2" onSubmit={submit}>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search</label>
|
||||
<input className="form-control" placeholder="Search languages…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<input className="form-control" placeholder="Search languages..." value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button className="btn btn-primary">Search</button>
|
||||
@@ -90,25 +98,12 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-2">
|
||||
<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/languages?${(() => { 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/languages?${(() => { 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>
|
||||
<Pagination
|
||||
page={data?.page ?? 1}
|
||||
totalPages={totalPages}
|
||||
buildHref={buildHref}
|
||||
onPageChange={(p) => router.push(buildHref(p))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
|
||||
import Pagination from "@/components/explorer/Pagination";
|
||||
|
||||
type MT = { id: number; name: string };
|
||||
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
|
||||
@@ -14,12 +15,10 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
|
||||
const [data, setData] = useState<Paged<MT> | null>(initial ?? null);
|
||||
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
|
||||
|
||||
// Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
|
||||
useEffect(() => {
|
||||
if (initial) setData(initial);
|
||||
}, [initial]);
|
||||
|
||||
// Keep input in sync with URL q on navigation
|
||||
useEffect(() => {
|
||||
setQ(initialQ ?? "");
|
||||
}, [initialQ]);
|
||||
@@ -32,6 +31,13 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
|
||||
router.push(`/zxdb/machinetypes?${params.toString()}`);
|
||||
}
|
||||
|
||||
const buildHref = useCallback((p: number) => {
|
||||
const params = new URLSearchParams();
|
||||
if (q) params.set("q", q);
|
||||
params.set("page", String(p));
|
||||
return `/zxdb/machinetypes?${params.toString()}`;
|
||||
}, [q]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ZxdbBreadcrumbs
|
||||
@@ -55,7 +61,7 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
|
||||
<form className="d-flex flex-column gap-2" onSubmit={submit}>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search</label>
|
||||
<input className="form-control" placeholder="Search machine types…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<input className="form-control" placeholder="Search machine types..." value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button className="btn btn-primary">Search</button>
|
||||
@@ -92,25 +98,12 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-2">
|
||||
<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/machinetypes?${(() => { 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/machinetypes?${(() => { 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>
|
||||
<Pagination
|
||||
page={data?.page ?? 1}
|
||||
totalPages={totalPages}
|
||||
buildHref={buildHref}
|
||||
onPageChange={(p) => router.push(buildHref(p))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,20 @@
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Form, InputGroup, Button, Table, Alert } from "react-bootstrap";
|
||||
import { Search } from "react-bootstrap-icons";
|
||||
import EntryLink from "../components/EntryLink";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
|
||||
import ExplorerLayout from "@/components/explorer/ExplorerLayout";
|
||||
import FilterSidebar from "@/components/explorer/FilterSidebar";
|
||||
import FilterSection from "@/components/explorer/FilterSection";
|
||||
import MultiSelectChips from "@/components/explorer/MultiSelectChips";
|
||||
import Pagination from "@/components/explorer/Pagination";
|
||||
import useSearchFetch from "@/hooks/useSearchFetch";
|
||||
|
||||
const preferredMachineIds = [27, 26, 8, 9];
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
function parseMachineIds(value?: string) {
|
||||
if (!value) return preferredMachineIds.slice();
|
||||
@@ -38,7 +44,6 @@ type Paged<T> = {
|
||||
export default function ReleasesExplorer({
|
||||
initial,
|
||||
initialUrlState,
|
||||
initialUrlHasParams,
|
||||
initialLists,
|
||||
}: {
|
||||
initial?: Paged<Item>;
|
||||
@@ -48,12 +53,12 @@ export default function ReleasesExplorer({
|
||||
year: string;
|
||||
sort: "year_desc" | "year_asc" | "title" | "entry_id_desc";
|
||||
dLanguageId?: string;
|
||||
dMachinetypeId?: string; // keep as string for URL/state consistency
|
||||
dMachinetypeId?: string;
|
||||
filetypeId?: string;
|
||||
schemetypeId?: string;
|
||||
sourcetypeId?: string;
|
||||
casetypeId?: string;
|
||||
isDemo?: string; // "1" or "true"
|
||||
isDemo?: string;
|
||||
};
|
||||
initialUrlHasParams?: boolean;
|
||||
initialLists?: {
|
||||
@@ -68,15 +73,12 @@ export default function ReleasesExplorer({
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
// -- Search state --
|
||||
const [q, setQ] = useState(initialUrlState?.q ?? "");
|
||||
const [appliedQ, setAppliedQ] = useState(initialUrlState?.q ?? "");
|
||||
const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
|
||||
const [year, setYear] = useState<string>(initialUrlState?.year ?? "");
|
||||
const [sort, setSort] = useState<"year_desc" | "year_asc" | "title" | "entry_id_desc">(initialUrlState?.sort ?? "year_desc");
|
||||
|
||||
// Download-based filters and their option lists
|
||||
const [dLanguageId, setDLanguageId] = useState<string>(initialUrlState?.dLanguageId ?? "");
|
||||
const [dMachinetypeIds, setDMachinetypeIds] = useState<number[]>(parseMachineIds(initialUrlState?.dMachinetypeId));
|
||||
const [filetypeId, setFiletypeId] = useState<string>(initialUrlState?.filetypeId ?? "");
|
||||
@@ -85,53 +87,52 @@ export default function ReleasesExplorer({
|
||||
const [casetypeId, setCasetypeId] = useState<string>(initialUrlState?.casetypeId ?? "");
|
||||
const [isDemo, setIsDemo] = useState<boolean>(!!(initialUrlState?.isDemo && (initialUrlState.isDemo === "1" || initialUrlState.isDemo === "true")));
|
||||
|
||||
// -- Filter lists --
|
||||
const [langs, setLangs] = useState<{ id: string; name: string }[]>(initialLists?.languages ?? []);
|
||||
const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialLists?.machinetypes ?? []);
|
||||
const [filetypes, setFiletypes] = useState<{ id: number; name: string }[]>(initialLists?.filetypes ?? []);
|
||||
const [schemes, setSchemes] = useState<{ id: string; name: string }[]>(initialLists?.schemetypes ?? []);
|
||||
const [sources, setSources] = useState<{ id: string; name: string }[]>(initialLists?.sourcetypes ?? []);
|
||||
const [cases, setCases] = useState<{ id: string; name: string }[]>(initialLists?.casetypes ?? []);
|
||||
const initialLoad = useRef(true);
|
||||
const preferredMachineNames = useMemo(() => {
|
||||
if (!machines.length) return preferredMachineIds.map((id) => `#${id}`);
|
||||
return preferredMachineIds.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`);
|
||||
}, [machines]);
|
||||
|
||||
// -- Fetch with abort control --
|
||||
const { data, loading, error, fetch: doFetch, syncData } = useSearchFetch<Item>(
|
||||
"/api/zxdb/releases/search",
|
||||
initial ?? null,
|
||||
);
|
||||
|
||||
const isFirstRender = useRef(true);
|
||||
|
||||
// Debounce timer for year input changes
|
||||
const yearDebounce = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
const totalPages = useMemo(
|
||||
() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1),
|
||||
[data],
|
||||
);
|
||||
|
||||
const orderedMachines = useMemo(() => {
|
||||
const seen = new Set(preferredMachineIds);
|
||||
const preferred = preferredMachineIds.map((id) => machines.find((m) => m.id === id)).filter(Boolean) as { id: number; name: string }[];
|
||||
const rest = machines.filter((m) => !seen.has(m.id));
|
||||
return [...preferred, ...rest];
|
||||
}, [machines]);
|
||||
const machineOptions = useMemo(() => orderedMachines.map((m) => ({ id: m.id, label: m.name })), [orderedMachines]);
|
||||
|
||||
const pageSize = 20;
|
||||
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
|
||||
const machineOptions = useMemo(
|
||||
() => orderedMachines.map((m) => ({ id: m.id, label: m.name })),
|
||||
[orderedMachines],
|
||||
);
|
||||
|
||||
const updateUrl = useCallback((nextPage = page) => {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(nextPage));
|
||||
if (year) params.set("year", year);
|
||||
if (sort) params.set("sort", sort);
|
||||
if (dLanguageId) params.set("dLanguageId", dLanguageId);
|
||||
if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
|
||||
if (filetypeId) params.set("filetypeId", filetypeId);
|
||||
if (schemetypeId) params.set("schemetypeId", schemetypeId);
|
||||
if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
|
||||
if (casetypeId) params.set("casetypeId", casetypeId);
|
||||
if (isDemo) params.set("isDemo", "1");
|
||||
const qs = params.toString();
|
||||
router.replace(qs ? `${pathname}?${qs}` : pathname);
|
||||
}, [appliedQ, casetypeId, dLanguageId, dMachinetypeIds, filetypeId, isDemo, page, pathname, router, schemetypeId, sort, sourcetypeId, year]);
|
||||
const hasNonDefaultMachineFilter = dMachinetypeIds.join(",") !== preferredMachineIds.join(",") ||
|
||||
dMachinetypeIds.length !== machines.length;
|
||||
|
||||
const fetchData = useCallback(async (query: string, p: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// -- URL helpers --
|
||||
const buildParams = useCallback(
|
||||
(p: number) => {
|
||||
const params = new URLSearchParams();
|
||||
if (query) params.set("q", query);
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(p));
|
||||
params.set("pageSize", String(pageSize));
|
||||
if (year) params.set("year", String(Number(year)));
|
||||
if (year) params.set("year", year);
|
||||
if (sort) params.set("sort", sort);
|
||||
if (dLanguageId) params.set("dLanguageId", dLanguageId);
|
||||
if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
|
||||
@@ -140,79 +141,44 @@ export default function ReleasesExplorer({
|
||||
if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
|
||||
if (casetypeId) params.set("casetypeId", casetypeId);
|
||||
if (isDemo) params.set("isDemo", "1");
|
||||
const res = await fetch(`/api/zxdb/releases/search?${params.toString()}`);
|
||||
if (!res.ok) throw new Error(`Failed: ${res.status}`);
|
||||
const json: Paged<Item> = await res.json();
|
||||
setData(json);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setData({ items: [], page: 1, pageSize, total: 0 });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [casetypeId, dLanguageId, dMachinetypeIds, filetypeId, isDemo, pageSize, schemetypeId, sort, sourcetypeId, year]);
|
||||
return params;
|
||||
},
|
||||
[appliedQ, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo],
|
||||
);
|
||||
|
||||
const buildHref = useCallback(
|
||||
(p: number) => {
|
||||
const qs = buildParams(p).toString();
|
||||
return qs ? `${pathname}?${qs}` : pathname;
|
||||
},
|
||||
[buildParams, pathname],
|
||||
);
|
||||
|
||||
// -- Fetch + URL sync on filter/page changes --
|
||||
useEffect(() => {
|
||||
if (initial) {
|
||||
setData(initial);
|
||||
setPage(initial.page);
|
||||
}
|
||||
}, [initial]);
|
||||
|
||||
const initialState = useMemo(() => ({
|
||||
q: initialUrlState?.q ?? "",
|
||||
year: initialUrlState?.year ?? "",
|
||||
sort: initialUrlState?.sort ?? "year_desc",
|
||||
dLanguageId: initialUrlState?.dLanguageId ?? "",
|
||||
dMachinetypeId: initialUrlState?.dMachinetypeId ?? "",
|
||||
filetypeId: initialUrlState?.filetypeId ?? "",
|
||||
schemetypeId: initialUrlState?.schemetypeId ?? "",
|
||||
sourcetypeId: initialUrlState?.sourcetypeId ?? "",
|
||||
casetypeId: initialUrlState?.casetypeId ?? "",
|
||||
isDemo: initialUrlState?.isDemo,
|
||||
}), [initialUrlState]);
|
||||
|
||||
useEffect(() => {
|
||||
const initialPage = initial?.page ?? 1;
|
||||
if (
|
||||
initial &&
|
||||
page === initialPage &&
|
||||
initialState.q === appliedQ &&
|
||||
initialState.year === (year ?? "") &&
|
||||
sort === initialState.sort &&
|
||||
initialState.dLanguageId === dLanguageId &&
|
||||
parseMachineIds(initialState.dMachinetypeId).join(",") === dMachinetypeIds.join(",") &&
|
||||
initialState.filetypeId === filetypeId &&
|
||||
initialState.schemetypeId === schemetypeId &&
|
||||
initialState.sourcetypeId === sourcetypeId &&
|
||||
initialState.casetypeId === casetypeId &&
|
||||
(!!initialState.isDemo === isDemo)
|
||||
) {
|
||||
if (initialLoad.current) {
|
||||
initialLoad.current = false;
|
||||
return;
|
||||
}
|
||||
updateUrl(page);
|
||||
if (isFirstRender.current) {
|
||||
isFirstRender.current = false;
|
||||
router.replace(buildHref(page), { scroll: false });
|
||||
return;
|
||||
}
|
||||
if (initialLoad.current) {
|
||||
initialLoad.current = false;
|
||||
if (initial && !initialUrlHasParams) return;
|
||||
}
|
||||
updateUrl(page);
|
||||
fetchData(appliedQ, page);
|
||||
}, [appliedQ, casetypeId, dLanguageId, dMachinetypeIds, fetchData, filetypeId, initial, initialState, initialUrlHasParams, isDemo, page, schemetypeId, sort, sourcetypeId, updateUrl, year]);
|
||||
|
||||
function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setAppliedQ(q);
|
||||
setPage(1);
|
||||
}
|
||||
router.replace(buildHref(page), { scroll: false });
|
||||
|
||||
// Load filter option lists on mount
|
||||
const params = buildParams(page);
|
||||
params.set("pageSize", String(PAGE_SIZE));
|
||||
doFetch(params);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [page, appliedQ, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
|
||||
|
||||
// Sync SSR data when navigating (browser back/forward)
|
||||
useEffect(() => {
|
||||
if (initial) syncData(initial);
|
||||
}, [initial, syncData]);
|
||||
|
||||
// Load filter lists on mount if not provided by server
|
||||
useEffect(() => {
|
||||
if (langs.length || machines.length || filetypes.length || schemes.length || sources.length || cases.length) return;
|
||||
async function loadLists() {
|
||||
if (langs.length || machines.length || filetypes.length || schemes.length || sources.length || cases.length) return;
|
||||
try {
|
||||
const [l, m, ft, sc, so, ca] = await Promise.all([
|
||||
fetch("/api/zxdb/languages", { cache: "force-cache" }).then((r) => r.json()),
|
||||
@@ -228,44 +194,42 @@ export default function ReleasesExplorer({
|
||||
setSchemes(sc.items ?? []);
|
||||
setSources(so.items ?? []);
|
||||
setCases(ca.items ?? []);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
} catch { /* filter lists are non-critical */ }
|
||||
}
|
||||
loadLists();
|
||||
}, [cases.length, filetypes.length, langs.length, machines.length, schemes.length, sources.length]);
|
||||
|
||||
const prevHref = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(Math.max(1, (data?.page ?? 1) - 1)));
|
||||
if (year) params.set("year", year);
|
||||
if (sort) params.set("sort", sort);
|
||||
if (dLanguageId) params.set("dLanguageId", dLanguageId);
|
||||
if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
|
||||
if (filetypeId) params.set("filetypeId", filetypeId);
|
||||
if (schemetypeId) params.set("schemetypeId", schemetypeId);
|
||||
if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
|
||||
if (casetypeId) params.set("casetypeId", casetypeId);
|
||||
if (isDemo) params.set("isDemo", "1");
|
||||
return `/zxdb/releases?${params.toString()}`;
|
||||
}, [appliedQ, data?.page, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
|
||||
function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setAppliedQ(q);
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
const nextHref = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (appliedQ) params.set("q", appliedQ);
|
||||
params.set("page", String(Math.max(1, (data?.page ?? 1) + 1)));
|
||||
if (year) params.set("year", year);
|
||||
if (sort) params.set("sort", sort);
|
||||
if (dLanguageId) params.set("dLanguageId", dLanguageId);
|
||||
if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
|
||||
if (filetypeId) params.set("filetypeId", filetypeId);
|
||||
if (schemetypeId) params.set("schemetypeId", schemetypeId);
|
||||
if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
|
||||
if (casetypeId) params.set("casetypeId", casetypeId);
|
||||
if (isDemo) params.set("isDemo", "1");
|
||||
return `/zxdb/releases?${params.toString()}`;
|
||||
}, [appliedQ, data?.page, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
|
||||
function onYearChange(value: string) {
|
||||
setYear(value);
|
||||
clearTimeout(yearDebounce.current);
|
||||
yearDebounce.current = setTimeout(() => setPage(1), 400);
|
||||
}
|
||||
|
||||
function searchAllMachines() {
|
||||
setDMachinetypeIds(machineOptions.map((m) => m.id));
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
setQ("");
|
||||
setAppliedQ("");
|
||||
setYear("");
|
||||
setSort("year_desc");
|
||||
setDLanguageId("");
|
||||
setDMachinetypeIds(preferredMachineIds.slice());
|
||||
setFiletypeId("");
|
||||
setSchemetypeId("");
|
||||
setSourcetypeId("");
|
||||
setCasetypeId("");
|
||||
setIsDemo(false);
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -280,121 +244,159 @@ export default function ReleasesExplorer({
|
||||
title="Releases"
|
||||
subtitle={data ? `${data.total.toLocaleString()} results` : "Loading results..."}
|
||||
sidebar={(
|
||||
<FilterSidebar>
|
||||
<form className="d-flex flex-column gap-2" onSubmit={onSubmit}>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Search title</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Filter by entry title..."
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
/>
|
||||
<FilterSidebar onReset={resetFilters} loading={loading}>
|
||||
<Form onSubmit={onSubmit} className="d-flex flex-column gap-2">
|
||||
<InputGroup>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder="Search titles..."
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
/>
|
||||
<Button variant="primary" type="submit" disabled={loading}>
|
||||
<Search size={14} />
|
||||
</Button>
|
||||
</InputGroup>
|
||||
|
||||
<FilterSection label="Year" badge={year || undefined}>
|
||||
<Form.Control
|
||||
type="number"
|
||||
size="sm"
|
||||
placeholder="Any"
|
||||
value={year}
|
||||
onChange={(e) => onYearChange(e.target.value)}
|
||||
/>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection label="Language" badge={dLanguageId ? langs.find((l) => l.id === dLanguageId)?.name : undefined}>
|
||||
<Form.Select size="sm" value={dLanguageId} onChange={(e) => { setDLanguageId(e.target.value); setPage(1); }}>
|
||||
<option value="">All languages</option>
|
||||
{langs.map((l) => (
|
||||
<option key={l.id} value={l.id}>{l.name}</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection
|
||||
label="Machine"
|
||||
badge={`${dMachinetypeIds.length} selected`}
|
||||
defaultOpen={false}
|
||||
>
|
||||
<MultiSelectChips
|
||||
options={machineOptions}
|
||||
selected={dMachinetypeIds}
|
||||
collapsible
|
||||
onToggle={(id) => {
|
||||
setDMachinetypeIds((current) => {
|
||||
const next = new Set(current);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
const order = machineOptions.map((item) => item.id);
|
||||
const filtered = order.filter((value) => next.has(value));
|
||||
return filtered.length ? filtered : preferredMachineIds.slice();
|
||||
});
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
<div className="d-flex gap-2 mt-1">
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
size="sm"
|
||||
onClick={() => { setDMachinetypeIds(machineOptions.map((m) => m.id)); setPage(1); }}
|
||||
disabled={dMachinetypeIds.length === machineOptions.length}
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
size="sm"
|
||||
onClick={() => { setDMachinetypeIds(preferredMachineIds.slice()); setPage(1); }}
|
||||
disabled={dMachinetypeIds.join(",") === preferredMachineIds.join(",")}
|
||||
>
|
||||
Default
|
||||
</Button>
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button className="btn btn-primary" type="submit" disabled={loading}>Search</button>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Year</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder="Any"
|
||||
value={year}
|
||||
onChange={(e) => { setYear(e.target.value); setPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">DL Language</label>
|
||||
<select className="form-select" value={dLanguageId} onChange={(e) => { setDLanguageId(e.target.value); setPage(1); }}>
|
||||
<option value="">All languages</option>
|
||||
{langs.map((l) => (
|
||||
<option key={l.id} value={l.id}>{l.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">DL Machine</label>
|
||||
<MultiSelectChips
|
||||
options={machineOptions}
|
||||
selected={dMachinetypeIds}
|
||||
onToggle={(id) => {
|
||||
setDMachinetypeIds((current) => {
|
||||
const next = new Set(current);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
const order = machineOptions.map((item) => item.id);
|
||||
return order.filter((value) => next.has(value));
|
||||
});
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
<div className="form-text">Preferred: {preferredMachineNames.join(", ")}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">File type</label>
|
||||
<select className="form-select" value={filetypeId} onChange={(e) => { setFiletypeId(e.target.value); setPage(1); }}>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection label="Download filters" defaultOpen={false} badge={
|
||||
[filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo ? "demo" : ""].filter(Boolean).length
|
||||
? `${[filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo ? "demo" : ""].filter(Boolean).length} active`
|
||||
: undefined
|
||||
}>
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<Form.Select size="sm" value={filetypeId} onChange={(e) => { setFiletypeId(e.target.value); setPage(1); }}>
|
||||
<option value="">All file types</option>
|
||||
{filetypes.map((ft) => (
|
||||
<option key={ft.id} value={ft.id}>{ft.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Scheme</label>
|
||||
<select className="form-select" value={schemetypeId} onChange={(e) => { setSchemetypeId(e.target.value); setPage(1); }}>
|
||||
</Form.Select>
|
||||
<Form.Select size="sm" value={schemetypeId} onChange={(e) => { setSchemetypeId(e.target.value); setPage(1); }}>
|
||||
<option value="">All schemes</option>
|
||||
{schemes.map((s) => (
|
||||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Source</label>
|
||||
<select className="form-select" value={sourcetypeId} onChange={(e) => { setSourcetypeId(e.target.value); setPage(1); }}>
|
||||
</Form.Select>
|
||||
<Form.Select size="sm" value={sourcetypeId} onChange={(e) => { setSourcetypeId(e.target.value); setPage(1); }}>
|
||||
<option value="">All sources</option>
|
||||
{sources.map((s) => (
|
||||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Case</label>
|
||||
<select className="form-select" value={casetypeId} onChange={(e) => { setCasetypeId(e.target.value); setPage(1); }}>
|
||||
</Form.Select>
|
||||
<Form.Select size="sm" value={casetypeId} onChange={(e) => { setCasetypeId(e.target.value); setPage(1); }}>
|
||||
<option value="">All cases</option>
|
||||
{cases.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</Form.Select>
|
||||
<Form.Check
|
||||
id="demoCheck"
|
||||
label="Demo only"
|
||||
checked={isDemo}
|
||||
onChange={(e) => { setIsDemo(e.target.checked); setPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-check">
|
||||
<input id="demoCheck" className="form-check-input" type="checkbox" checked={isDemo} onChange={(e) => { setIsDemo(e.target.checked); setPage(1); }} />
|
||||
<label className="form-check-label" htmlFor="demoCheck">Demo only</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label small text-secondary">Sort</label>
|
||||
<select className="form-select" value={sort} onChange={(e) => { setSort(e.target.value as typeof sort); setPage(1); }}>
|
||||
<option value="year_desc">Newest</option>
|
||||
<option value="year_asc">Oldest</option>
|
||||
<option value="title">Title</option>
|
||||
<option value="entry_id_desc">Entry ID</option>
|
||||
</select>
|
||||
</div>
|
||||
{loading && <div className="text-secondary small">Loading...</div>}
|
||||
</form>
|
||||
</FilterSidebar>
|
||||
)}
|
||||
>
|
||||
</FilterSection>
|
||||
|
||||
<FilterSection label="Sort">
|
||||
<Form.Select size="sm" value={sort} onChange={(e) => { setSort(e.target.value as typeof sort); setPage(1); }}>
|
||||
<option value="year_desc">Newest</option>
|
||||
<option value="year_asc">Oldest</option>
|
||||
<option value="title">Title</option>
|
||||
<option value="entry_id_desc">Entry ID</option>
|
||||
</Form.Select>
|
||||
</FilterSection>
|
||||
|
||||
{error && <Alert variant="danger" className="py-1 px-2 small mb-0">{error}</Alert>}
|
||||
</Form>
|
||||
</FilterSidebar>
|
||||
)}
|
||||
>
|
||||
<div className={loading ? "opacity-50" : ""} style={{ transition: "opacity 0.15s" }}>
|
||||
{data && data.items.length === 0 && !loading && (
|
||||
<div className="alert alert-warning">No results.</div>
|
||||
<Alert variant="warning">
|
||||
No results found.
|
||||
{hasNonDefaultMachineFilter && (
|
||||
<span>
|
||||
{" "}Filtering by{" "}
|
||||
<strong>
|
||||
{dMachinetypeIds
|
||||
.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`)
|
||||
.join(", ")}
|
||||
</strong>
|
||||
{" "}—{" "}
|
||||
<Alert.Link onClick={searchAllMachines}>
|
||||
search all machines
|
||||
</Alert.Link>?
|
||||
</span>
|
||||
)}
|
||||
</Alert>
|
||||
)}
|
||||
{data && data.items.length > 0 && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover align-middle">
|
||||
<Table striped hover className="align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: 80 }}>Entry ID</th>
|
||||
@@ -411,11 +413,9 @@ export default function ReleasesExplorer({
|
||||
<EntryLink id={it.entryId} />
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex flex-column gap-1">
|
||||
<Link href={`/zxdb/releases/${it.entryId}/${it.releaseSeq}`} className="link-underline link-underline-opacity-0">
|
||||
{it.entryTitle || `Entry #${it.entryId}`}
|
||||
</Link>
|
||||
</div>
|
||||
<Link href={`/zxdb/releases/${it.entryId}/${it.releaseSeq}`} className="link-underline link-underline-opacity-0">
|
||||
{it.entryTitle || `Entry #${it.entryId}`}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link href={`/zxdb/releases/${it.entryId}/${it.releaseSeq}`}>
|
||||
@@ -433,40 +433,19 @@ export default function ReleasesExplorer({
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ExplorerLayout>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 mt-4">
|
||||
<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={prevHref}
|
||||
onClick={(e) => {
|
||||
if (!data || data.page <= 1) return;
|
||||
e.preventDefault();
|
||||
setPage((p) => Math.max(1, p - 1));
|
||||
}}
|
||||
>
|
||||
Prev
|
||||
</Link>
|
||||
<Link
|
||||
className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
|
||||
aria-disabled={!data || data.page >= totalPages}
|
||||
href={nextHref}
|
||||
onClick={(e) => {
|
||||
if (!data || data.page >= totalPages) return;
|
||||
e.preventDefault();
|
||||
setPage((p) => Math.min(totalPages, p + 1));
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination
|
||||
page={data?.page ?? page}
|
||||
totalPages={totalPages}
|
||||
loading={loading}
|
||||
buildHref={buildHref}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
54
src/components/explorer/FilterSection.tsx
Normal file
54
src/components/explorer/FilterSection.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode, useState } from "react";
|
||||
import { Collapse } from "react-bootstrap";
|
||||
import { ChevronDown } from "react-bootstrap-icons";
|
||||
|
||||
type FilterSectionProps = {
|
||||
label: string;
|
||||
badge?: string;
|
||||
defaultOpen?: boolean;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export default function FilterSection({
|
||||
label,
|
||||
badge,
|
||||
defaultOpen = true,
|
||||
children,
|
||||
}: FilterSectionProps) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<div className="border-bottom pb-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm w-100 d-flex align-items-center justify-content-between p-0 text-start"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span className="form-label small text-secondary mb-0 fw-semibold">{label}</span>
|
||||
<span className="d-flex align-items-center gap-1">
|
||||
{!open && badge && (
|
||||
<span className="badge text-bg-primary rounded-pill" style={{ fontSize: "0.7rem" }}>
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
<ChevronDown
|
||||
size={10}
|
||||
className="text-secondary"
|
||||
style={{
|
||||
transition: "transform 0.2s",
|
||||
transform: open ? "rotate(180deg)" : "rotate(0deg)",
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<Collapse in={open}>
|
||||
<div>
|
||||
<div className="mt-1">{children}</div>
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,31 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Card, Button } from "react-bootstrap";
|
||||
|
||||
type FilterSidebarProps = {
|
||||
children: ReactNode;
|
||||
onReset?: () => void;
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
export default function FilterSidebar({ children }: FilterSidebarProps) {
|
||||
export default function FilterSidebar({ children, onReset, loading }: FilterSidebarProps) {
|
||||
return (
|
||||
<div className="card shadow-sm">
|
||||
<div className="card-body">{children}</div>
|
||||
</div>
|
||||
<Card className="shadow-sm">
|
||||
<Card.Body className="d-flex flex-column gap-2">
|
||||
{children}
|
||||
{onReset && (
|
||||
<div className="border-top pt-2 mt-1">
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
size="sm"
|
||||
className="w-100"
|
||||
onClick={onReset}
|
||||
disabled={loading}
|
||||
>
|
||||
Reset all filters
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
type ChipOption<T extends number | string> = {
|
||||
id: T;
|
||||
label: string;
|
||||
@@ -8,6 +12,10 @@ type MultiSelectChipsProps<T extends number | string> = {
|
||||
selected: T[];
|
||||
onToggle: (id: T) => void;
|
||||
size?: "sm" | "md";
|
||||
/** When set, chips start collapsed showing just selected count + names */
|
||||
collapsible?: boolean;
|
||||
/** Max selected labels to show in collapsed summary before truncating */
|
||||
collapsedMax?: number;
|
||||
};
|
||||
|
||||
export default function MultiSelectChips<T extends number | string>({
|
||||
@@ -15,23 +23,60 @@ export default function MultiSelectChips<T extends number | string>({
|
||||
selected,
|
||||
onToggle,
|
||||
size = "sm",
|
||||
collapsible = false,
|
||||
collapsedMax = 3,
|
||||
}: MultiSelectChipsProps<T>) {
|
||||
const [expanded, setExpanded] = useState(!collapsible);
|
||||
const btnSize = size === "sm" ? "btn-sm" : "";
|
||||
|
||||
if (!expanded) {
|
||||
const selectedLabels = selected
|
||||
.map((id) => options.find((o) => o.id === id)?.label)
|
||||
.filter(Boolean) as string[];
|
||||
const shown = selectedLabels.slice(0, collapsedMax);
|
||||
const extra = selectedLabels.length - shown.length;
|
||||
const summary = shown.length
|
||||
? shown.join(", ") + (extra > 0 ? ` +${extra}` : "")
|
||||
: "None";
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary w-100 text-start d-flex justify-content-between align-items-center"
|
||||
onClick={() => setExpanded(true)}
|
||||
>
|
||||
<span className="text-truncate">{summary}</span>
|
||||
<span className="badge text-bg-primary rounded-pill ms-2">{selected.length}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{options.map((option) => {
|
||||
const active = selected.includes(option.id);
|
||||
return (
|
||||
<button
|
||||
key={String(option.id)}
|
||||
type="button"
|
||||
className={`btn ${btnSize} ${active ? "btn-primary" : "btn-outline-secondary"}`}
|
||||
onClick={() => onToggle(option.id)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div>
|
||||
<div className="d-flex flex-wrap gap-1">
|
||||
{options.map((option) => {
|
||||
const active = selected.includes(option.id);
|
||||
return (
|
||||
<button
|
||||
key={String(option.id)}
|
||||
type="button"
|
||||
className={`btn ${btnSize} ${active ? "btn-primary" : "btn-outline-secondary"}`}
|
||||
onClick={() => onToggle(option.id)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{collapsible && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link btn-sm p-0 mt-1 text-secondary"
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
Collapse
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
67
src/components/explorer/Pagination.tsx
Normal file
67
src/components/explorer/Pagination.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { Button, Spinner } from "react-bootstrap";
|
||||
import { ChevronLeft, ChevronRight } from "react-bootstrap-icons";
|
||||
|
||||
type PaginationProps = {
|
||||
page: number;
|
||||
totalPages: number;
|
||||
loading?: boolean;
|
||||
/** Build href for a given page number (for SSR/link fallback) */
|
||||
buildHref: (p: number) => string;
|
||||
onPageChange: (p: number) => void;
|
||||
};
|
||||
|
||||
export default function Pagination({
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
buildHref,
|
||||
onPageChange,
|
||||
}: PaginationProps) {
|
||||
const canPrev = page > 1;
|
||||
const canNext = page < totalPages;
|
||||
|
||||
const prevHref = useMemo(() => buildHref(Math.max(1, page - 1)), [buildHref, page]);
|
||||
const nextHref = useMemo(() => buildHref(Math.min(totalPages, page + 1)), [buildHref, page, totalPages]);
|
||||
|
||||
return (
|
||||
<div className="d-flex align-items-center gap-2 mt-4">
|
||||
<span className={loading ? "text-secondary" : ""}>
|
||||
Page {page} / {totalPages}
|
||||
</span>
|
||||
{loading && (
|
||||
<Spinner animation="border" size="sm" variant="secondary" role="status" />
|
||||
)}
|
||||
<div className="ms-auto d-flex gap-2">
|
||||
<Button
|
||||
as="a"
|
||||
variant="outline-secondary"
|
||||
href={prevHref}
|
||||
disabled={!canPrev}
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
if (!canPrev) return;
|
||||
e.preventDefault();
|
||||
onPageChange(page - 1);
|
||||
}}
|
||||
>
|
||||
<ChevronLeft size={14} /> Prev
|
||||
</Button>
|
||||
<Button
|
||||
as="a"
|
||||
variant="outline-secondary"
|
||||
href={nextHref}
|
||||
disabled={!canNext}
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
if (!canNext) return;
|
||||
e.preventDefault();
|
||||
onPageChange(page + 1);
|
||||
}}
|
||||
>
|
||||
Next <ChevronRight size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
src/hooks/useSearchFetch.ts
Normal file
86
src/hooks/useSearchFetch.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
|
||||
type Paged<T> = {
|
||||
items: T[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages API search fetching with automatic request cancellation
|
||||
* to prevent race conditions from rapid filter/page changes.
|
||||
* Keeps previous results visible while a new request is in flight.
|
||||
*
|
||||
* @param onExtra - optional callback to capture extra fields from the response
|
||||
* (e.g., facets) that sit alongside the standard paged fields.
|
||||
*/
|
||||
export default function useSearchFetch<T>(
|
||||
endpoint: string,
|
||||
initialData: Paged<T> | null = null,
|
||||
onExtra?: (json: Record<string, unknown>) => void,
|
||||
) {
|
||||
const [data, setData] = useState<Paged<T> | null>(initialData);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const fetchIdRef = useRef(0);
|
||||
|
||||
const fetch_ = useCallback(
|
||||
async (params: URLSearchParams) => {
|
||||
// Cancel any in-flight request
|
||||
abortRef.current?.abort();
|
||||
const controller = new AbortController();
|
||||
abortRef.current = controller;
|
||||
|
||||
const id = ++fetchIdRef.current;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await globalThis.fetch(
|
||||
`${endpoint}?${params.toString()}`,
|
||||
{ signal: controller.signal },
|
||||
);
|
||||
if (!res.ok) throw new Error(`Search failed (${res.status})`);
|
||||
const json = await res.json();
|
||||
|
||||
// Only apply if this is still the latest request
|
||||
if (id === fetchIdRef.current) {
|
||||
setData({
|
||||
items: json.items,
|
||||
page: json.page,
|
||||
pageSize: json.pageSize,
|
||||
total: json.total,
|
||||
});
|
||||
onExtra?.(json);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof DOMException && e.name === "AbortError") return;
|
||||
if (id === fetchIdRef.current) {
|
||||
const msg = e instanceof Error ? e.message : "Search failed";
|
||||
console.error(msg);
|
||||
setError(msg);
|
||||
setData({ items: [] as T[], page: 1, pageSize: 20, total: 0 });
|
||||
}
|
||||
} finally {
|
||||
if (id === fetchIdRef.current) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
[endpoint, onExtra],
|
||||
);
|
||||
|
||||
// Allow syncing SSR data without a fetch
|
||||
const syncData = useCallback((d: Paged<T>) => {
|
||||
abortRef.current?.abort();
|
||||
setData(d);
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
return { data, loading, error, fetch: fetch_, syncData };
|
||||
}
|
||||
Reference in New Issue
Block a user