diff --git a/src/app/zxdb/entries/EntriesExplorer.tsx b/src/app/zxdb/entries/EntriesExplorer.tsx index 44e1146..deed8d9 100644 --- a/src/app/zxdb/entries/EntriesExplorer.tsx +++ b/src/app/zxdb/entries/EntriesExplorer.tsx @@ -61,6 +61,7 @@ export default function EntriesExplorer({ const pathname = usePathname(); 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 | 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 activeFilters = useMemo(() => { const chips: string[] = []; - if (q) chips.push(`q: ${q}`); + if (appliedQ) chips.push(`q: ${appliedQ}`); if (genreId !== "") { const name = genres.find((g) => g.id === Number(genreId))?.name ?? `#${genreId}`; 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_origins") chips.push("scope: titles + aliases + origins"); return chips; - }, [q, genreId, languageId, machinetypeId, scope, genres, languages, machines]); + }, [appliedQ, genreId, languageId, machinetypeId, scope, genres, languages, machines]); function updateUrl(nextPage = page) { const params = new URLSearchParams(); - if (q) params.set("q", q); + 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)); @@ -161,7 +162,7 @@ export default function EntriesExplorer({ if ( initial && page === initialPage && - (initialUrlState?.q ?? "") === q && + (initialUrlState?.q ?? "") === appliedQ && (initialUrlState?.genreId === "" ? "" : Number(initialUrlState?.genreId ?? "")) === (genreId === "" ? "" : Number(genreId)) && (initialUrlState?.languageId ?? "") === (languageId ?? "") && (initialUrlState?.machinetypeId === "" ? "" : Number(initialUrlState?.machinetypeId ?? "")) === @@ -173,9 +174,9 @@ export default function EntriesExplorer({ return; } updateUrl(page); - fetchData(q, page, true); + fetchData(appliedQ, page, true); // 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 useEffect(() => { @@ -197,13 +198,13 @@ export default function EntriesExplorer({ function onSubmit(e: React.FormEvent) { e.preventDefault(); + setAppliedQ(q); setPage(1); - updateUrl(1); - fetchData(q, 1, true); } function resetFilters() { setQ(""); + setAppliedQ(""); setGenreId(""); setLanguageId(""); setMachinetypeId(""); @@ -214,7 +215,7 @@ export default function EntriesExplorer({ const prevHref = useMemo(() => { 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))); if (genreId !== "") params.set("genreId", String(genreId)); if (languageId !== "") params.set("languageId", String(languageId)); @@ -222,11 +223,11 @@ export default function EntriesExplorer({ if (sort) params.set("sort", sort); if (scope !== "title") params.set("scope", scope); 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 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))); if (genreId !== "") params.set("genreId", String(genreId)); if (languageId !== "") params.set("languageId", String(languageId)); @@ -234,7 +235,7 @@ export default function EntriesExplorer({ if (sort) params.set("sort", sort); if (scope !== "title") params.set("scope", scope); return `/zxdb/entries?${params.toString()}`; - }, [q, data?.page, genreId, languageId, machinetypeId, sort, scope]); + }, [appliedQ, data?.page, genreId, languageId, machinetypeId, sort, scope]); return (
diff --git a/src/app/zxdb/releases/ReleasesExplorer.tsx b/src/app/zxdb/releases/ReleasesExplorer.tsx index daeea1d..0340a34 100644 --- a/src/app/zxdb/releases/ReleasesExplorer.tsx +++ b/src/app/zxdb/releases/ReleasesExplorer.tsx @@ -55,6 +55,7 @@ export default function ReleasesExplorer({ const pathname = usePathname(); 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 | null>(initial ?? null); @@ -88,7 +89,7 @@ export default function ReleasesExplorer({ function updateUrl(nextPage = page) { const params = new URLSearchParams(); - if (q) params.set("q", q); + if (appliedQ) params.set("q", appliedQ); params.set("page", String(nextPage)); if (year) params.set("year", year); if (sort) params.set("sort", sort); @@ -143,7 +144,7 @@ export default function ReleasesExplorer({ if ( initial && page === initialPage && - (initialUrlState?.q ?? "") === q && + (initialUrlState?.q ?? "") === appliedQ && (initialUrlState?.year ?? "") === (year ?? "") && sort === (initialUrlState?.sort ?? "year_desc") && (initialUrlState?.dLanguageId ?? "") === dLanguageId && @@ -166,14 +167,13 @@ export default function ReleasesExplorer({ if (initial && !initialUrlHasParams) return; } updateUrl(page); - fetchData(q, page); - }, [page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]); + fetchData(appliedQ, page); + }, [page, year, sort, dLanguageId, dMachinetypeId, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo, appliedQ]); function onSubmit(e: React.FormEvent) { e.preventDefault(); + setAppliedQ(q); setPage(1); - updateUrl(1); - fetchData(q, 1); } // Load filter option lists on mount @@ -204,7 +204,7 @@ export default function ReleasesExplorer({ const prevHref = useMemo(() => { 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))); if (year) params.set("year", year); if (sort) params.set("sort", sort); @@ -216,11 +216,11 @@ export default function ReleasesExplorer({ if (casetypeId) params.set("casetypeId", casetypeId); if (isDemo) params.set("isDemo", "1"); 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 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))); if (year) params.set("year", year); if (sort) params.set("sort", sort); @@ -232,7 +232,7 @@ export default function ReleasesExplorer({ if (casetypeId) params.set("casetypeId", casetypeId); if (isDemo) params.set("isDemo", "1"); 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 (