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

uncouple breadcrumbs from search input widget

Browse Source
This commit is contained in:
D. Rimron-Soutter
2026-01-11 12:35:22 +00:00
parent 762d13be55
commit dc6db608cd
2 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/zxdb/entries/EntriesExplorer.tsx
View File

@@ -61,6 +61,7 @@ export default function EntriesExplorer({
const pathname = usePathname(); const pathname = usePathname();
const [q, setQ] = useState(initialUrlState?.q ?? ""); const [q, setQ] = useState(initialUrlState?.q ?? "");
const [appliedQ, setAppliedQ] = useState(initialUrlState?.q ?? "");
const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1); const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [data, setData] = useState<Paged<Item> | null>(initial ?? null); const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
@@ -87,7 +88,7 @@ export default function EntriesExplorer({
const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]); const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
const activeFilters = useMemo(() => { const activeFilters = useMemo(() => {
const chips: string[] = []; const chips: string[] = [];
if (q) chips.push(`q: ${q}`); if (appliedQ) chips.push(`q: ${appliedQ}`);
if (genreId !== "") { if (genreId !== "") {
const name = genres.find((g) => g.id === Number(genreId))?.name ?? `#${genreId}`; const name = genres.find((g) => g.id === Number(genreId))?.name ?? `#${genreId}`;
chips.push(`genre: ${name}`); chips.push(`genre: ${name}`);
@@ -103,11 +104,11 @@ export default function EntriesExplorer({
if (scope === "title_aliases") chips.push("scope: titles + aliases"); if (scope === "title_aliases") chips.push("scope: titles + aliases");
if (scope === "title_aliases_origins") chips.push("scope: titles + aliases + origins"); if (scope === "title_aliases_origins") chips.push("scope: titles + aliases + origins");
return chips; return chips;
}, [q, genreId, languageId, machinetypeId, scope, genres, languages, machines]); }, [appliedQ, genreId, languageId, machinetypeId, scope, genres, languages, machines]);
function updateUrl(nextPage = page) { function updateUrl(nextPage = page) {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (q) params.set("q", q); if (appliedQ) params.set("q", appliedQ);
params.set("page", String(nextPage)); params.set("page", String(nextPage));
if (genreId !== "") params.set("genreId", String(genreId)); if (genreId !== "") params.set("genreId", String(genreId));
if (languageId !== "") params.set("languageId", String(languageId)); if (languageId !== "") params.set("languageId", String(languageId));
@@ -161,7 +162,7 @@ export default function EntriesExplorer({
if ( if (
initial && initial &&
page === initialPage && page === initialPage &&
(initialUrlState?.q ?? "") === q && (initialUrlState?.q ?? "") === appliedQ &&
(initialUrlState?.genreId === "" ? "" : Number(initialUrlState?.genreId ?? "")) === (genreId === "" ? "" : Number(genreId)) && (initialUrlState?.genreId === "" ? "" : Number(initialUrlState?.genreId ?? "")) === (genreId === "" ? "" : Number(genreId)) &&
(initialUrlState?.languageId ?? "") === (languageId ?? "") && (initialUrlState?.languageId ?? "") === (languageId ?? "") &&
(initialUrlState?.machinetypeId === "" ? "" : Number(initialUrlState?.machinetypeId ?? "")) === (initialUrlState?.machinetypeId === "" ? "" : Number(initialUrlState?.machinetypeId ?? "")) ===
@@ -173,9 +174,9 @@ export default function EntriesExplorer({
return; return;
} }
updateUrl(page); updateUrl(page);
fetchData(q, page, true); fetchData(appliedQ, page, true);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [page, genreId, languageId, machinetypeId, sort, scope]); }, [page, genreId, languageId, machinetypeId, sort, scope, appliedQ]);
// Load filter lists on mount only if not provided by server // Load filter lists on mount only if not provided by server
useEffect(() => { useEffect(() => {
@@ -197,13 +198,13 @@ export default function EntriesExplorer({
function onSubmit(e: React.FormEvent) { function onSubmit(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
setAppliedQ(q);
setPage(1); setPage(1);
updateUrl(1);
fetchData(q, 1, true);
} }
function resetFilters() { function resetFilters() {
setQ(""); setQ("");
setAppliedQ("");
setGenreId(""); setGenreId("");
setLanguageId(""); setLanguageId("");
setMachinetypeId(""); setMachinetypeId("");
@@ -214,7 +215,7 @@ export default function EntriesExplorer({
const prevHref = useMemo(() => { const prevHref = useMemo(() => {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (q) params.set("q", q); if (appliedQ) params.set("q", appliedQ);
params.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); params.set("page", String(Math.max(1, (data?.page ?? 1) - 1)));
if (genreId !== "") params.set("genreId", String(genreId)); if (genreId !== "") params.set("genreId", String(genreId));
if (languageId !== "") params.set("languageId", String(languageId)); if (languageId !== "") params.set("languageId", String(languageId));
@@ -222,11 +223,11 @@ export default function EntriesExplorer({
if (sort) params.set("sort", sort); if (sort) params.set("sort", sort);
if (scope !== "title") params.set("scope", scope); if (scope !== "title") params.set("scope", scope);
return `/zxdb/entries?${params.toString()}`; return `/zxdb/entries?${params.toString()}`;
}, [q, data?.page, genreId, languageId, machinetypeId, sort, scope]); }, [appliedQ, data?.page, genreId, languageId, machinetypeId, sort, scope]);
const nextHref = useMemo(() => { const nextHref = useMemo(() => {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (q) params.set("q", q); if (appliedQ) params.set("q", appliedQ);
params.set("page", String(Math.max(1, (data?.page ?? 1) + 1))); params.set("page", String(Math.max(1, (data?.page ?? 1) + 1)));
if (genreId !== "") params.set("genreId", String(genreId)); if (genreId !== "") params.set("genreId", String(genreId));
if (languageId !== "") params.set("languageId", String(languageId)); if (languageId !== "") params.set("languageId", String(languageId));
@@ -234,7 +235,7 @@ export default function EntriesExplorer({
if (sort) params.set("sort", sort); if (sort) params.set("sort", sort);
if (scope !== "title") params.set("scope", scope); if (scope !== "title") params.set("scope", scope);
return `/zxdb/entries?${params.toString()}`; return `/zxdb/entries?${params.toString()}`;
}, [q, data?.page, genreId, languageId, machinetypeId, sort, scope]); }, [appliedQ, data?.page, genreId, languageId, machinetypeId, sort, scope]);
return ( return (
<div> <div>

20
src/app/zxdb/releases/ReleasesExplorer.tsx
View File

@@ -55,6 +55,7 @@ export default function ReleasesExplorer({
const pathname = usePathname(); const pathname = usePathname();
const [q, setQ] = useState(initialUrlState?.q ?? ""); const [q, setQ] = useState(initialUrlState?.q ?? "");
const [appliedQ, setAppliedQ] = useState(initialUrlState?.q ?? "");
const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1); const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [data, setData] = useState<Paged<Item> | null>(initial ?? null); const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
@@ -88,7 +89,7 @@ export default function ReleasesExplorer({
function updateUrl(nextPage = page) { function updateUrl(nextPage = page) {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (q) params.set("q", q); if (appliedQ) params.set("q", appliedQ);
params.set("page", String(nextPage)); params.set("page", String(nextPage));
if (year) params.set("year", year); if (year) params.set("year", year);
if (sort) params.set("sort", sort); if (sort) params.set("sort", sort);
@@ -143,7 +144,7 @@ export default function ReleasesExplorer({
if ( if (
initial && initial &&
page === initialPage && page === initialPage &&
(initialUrlState?.q ?? "") === q && (initialUrlState?.q ?? "") === appliedQ &&
(initialUrlState?.year ?? "") === (year ?? "") && (initialUrlState?.year ?? "") === (year ?? "") &&
sort === (initialUrlState?.sort ?? "year_desc") && sort === (initialUrlState?.sort ?? "year_desc") &&
(initialUrlState?.dLanguageId ?? "") === dLanguageId && (initialUrlState?.dLanguageId ?? "") === dLanguageId &&
@@ -166,14 +167,13 @@ export default function ReleasesExplorer({
if (initial && !initialUrlHasParams) return; if (initial && !initialUrlHasParams) return;
} }
updateUrl(page); updateUrl(page);
fetchData(q, page); fetchData(appliedQ, page);
}, [page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]); }, [page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo, appliedQ]);
function onSubmit(e: React.FormEvent) { function onSubmit(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
setAppliedQ(q);
setPage(1); setPage(1);
updateUrl(1);
fetchData(q, 1);
} }
// Load filter option lists on mount // Load filter option lists on mount
@@ -204,7 +204,7 @@ export default function ReleasesExplorer({
const prevHref = useMemo(() => { const prevHref = useMemo(() => {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (q) params.set("q", q); if (appliedQ) params.set("q", appliedQ);
params.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); params.set("page", String(Math.max(1, (data?.page ?? 1) - 1)));
if (year) params.set("year", year); if (year) params.set("year", year);
if (sort) params.set("sort", sort); if (sort) params.set("sort", sort);
@@ -216,11 +216,11 @@ export default function ReleasesExplorer({
if (casetypeId) params.set("casetypeId", casetypeId); if (casetypeId) params.set("casetypeId", casetypeId);
if (isDemo) params.set("isDemo", "1"); if (isDemo) params.set("isDemo", "1");
return `/zxdb/releases?${params.toString()}`; return `/zxdb/releases?${params.toString()}`;
}, [q, data?.page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]); }, [appliedQ, data?.page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
const nextHref = useMemo(() => { const nextHref = useMemo(() => {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (q) params.set("q", q); if (appliedQ) params.set("q", appliedQ);
params.set("page", String(Math.max(1, (data?.page ?? 1) + 1))); params.set("page", String(Math.max(1, (data?.page ?? 1) + 1)));
if (year) params.set("year", year); if (year) params.set("year", year);
if (sort) params.set("sort", sort); if (sort) params.set("sort", sort);
@@ -232,7 +232,7 @@ export default function ReleasesExplorer({
if (casetypeId) params.set("casetypeId", casetypeId); if (casetypeId) params.set("casetypeId", casetypeId);
if (isDemo) params.set("isDemo", "1"); if (isDemo) params.set("isDemo", "1");
return `/zxdb/releases?${params.toString()}`; return `/zxdb/releases?${params.toString()}`;
}, [q, data?.page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]); }, [appliedQ, data?.page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
return ( return (
<div> <div>