Hartmut/Nexus
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(web): persist list-page filters in URL search params

Browse Source 
Resources, projects, and allocations filter state now syncs to/from
URL so filters survive refresh and can be shared via link.
Text inputs are debounced (300ms) to avoid URL churn.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-09 17:00:30 +02:00
parent 7264f0728a
commit 6bf60c8e07
4 changed files with 172 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/(app)/resources/ResourcesClient.tsx
+59 -24
View File
@@ -2,6 +2,8 @@
import { createPortal } from "react-dom";
import { useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from "react";
import { useUrlFilters } from "~/hooks/useUrlFilters.js";
import { useDebounce } from "~/hooks/useDebounce.js";
import Link from "next/link";
import type { Resource, SkillEntry } from "@capakraken/shared";
import { RESOURCE_COLUMNS } from "@capakraken/shared";
@@ -147,9 +149,48 @@ function BooleanBadge({ value }: { value: boolean }) {
}
export function ResourcesClient() {
const [search, setSearch] = useState("");
const [chapterFilter, setChapterFilter] = useState<string[]>([]);
const [isActiveFilter, setIsActiveFilter] = useState<ActiveFilter>("active");
const [resourceUrlFilters, setResourceUrlFilters] = useUrlFilters({
search: "",
activeFilter: "active" as string,
rolledOff: DEFAULT_BOOLEAN_FILTER as string,
departed: DEFAULT_BOOLEAN_FILTER as string,
chapters: "",
});
// Debounced local state for search text input
const [searchInput, setSearchInput] = useState(resourceUrlFilters.search);
const debouncedSearch = useDebounce(searchInput, 300);
const search = resourceUrlFilters.search;
const isActiveFilter = resourceUrlFilters.activeFilter as ActiveFilter;
const rolledOffFilter = resourceUrlFilters.rolledOff as BooleanFilter;
const departedFilter = resourceUrlFilters.departed as BooleanFilter;
// chapters stored as comma-separated string; empty string means "all chapters visible"
const chaptersParam = resourceUrlFilters.chapters;
// eslint-disable-next-line react-hooks/exhaustive-deps
const chapterFilter: string[] = useMemo(
() => (chaptersParam ? chaptersParam.split(",").filter(Boolean) : []),
[chaptersParam],
);
// Flush debounced search input to URL
useEffect(() => {
setResourceUrlFilters({ search: debouncedSearch });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedSearch]);
// Keep local search input in sync when URL changes externally
useEffect(() => {
setSearchInput(resourceUrlFilters.search);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [resourceUrlFilters.search]);
const setIsActiveFilter = useCallback((v: ActiveFilter) => setResourceUrlFilters({ activeFilter: v }), [setResourceUrlFilters]);
const setRolledOffFilter = useCallback((v: BooleanFilter) => setResourceUrlFilters({ rolledOff: v }), [setResourceUrlFilters]);
const setDepartedFilter = useCallback((v: BooleanFilter) => setResourceUrlFilters({ departed: v }), [setResourceUrlFilters]);
const setChapterFilter = useCallback((v: string[]) => {
setResourceUrlFilters({ chapters: v.join(",") });
}, [setResourceUrlFilters]);
const [includeProposedChargeability, setIncludeProposedChargeability] = useState(false);
const [hiddenCountryIds, setHiddenCountryIds] = useState<string[]>([]);
const [includeWithoutCountry, setIncludeWithoutCountry] = useState(true);
@@ -157,8 +198,6 @@ export function ResourcesClient() {
...DEFAULT_HIDDEN_RESOURCE_TYPES,
]);
const [includeWithoutResourceType, setIncludeWithoutResourceType] = useState(true);
const [rolledOffFilter, setRolledOffFilter] = useState<BooleanFilter>(DEFAULT_BOOLEAN_FILTER);
const [departedFilter, setDepartedFilter] = useState<BooleanFilter>(DEFAULT_BOOLEAN_FILTER);
const [modal, setModal] = useState<ModalState>({ type: "closed" });
const [confirm, setConfirm] = useState<ConfirmState>({ type: "closed" });
const [successToast, setSuccessToast] = useState<string | null>(null);
@@ -372,15 +411,12 @@ export function ResourcesClient() {
}
function clearAll() {
setSearch("");
setChapterFilter([]);
setIsActiveFilter("active");
setSearchInput("");
setResourceUrlFilters({ search: "", activeFilter: "active", rolledOff: DEFAULT_BOOLEAN_FILTER, departed: DEFAULT_BOOLEAN_FILTER, chapters: "" });
setHiddenCountryIds([]);
setIncludeWithoutCountry(true);
setHiddenResourceTypes([...DEFAULT_HIDDEN_RESOURCE_TYPES]);
setIncludeWithoutResourceType(true);
setRolledOffFilter(DEFAULT_BOOLEAN_FILTER);
setDepartedFilter(DEFAULT_BOOLEAN_FILTER);
clearCustomFilters();
}
@@ -425,18 +461,17 @@ export function ResourcesClient() {
const toggleChapter = useCallback(
(chapter: string) => {
setChapterFilter((current) => {
const currentSelection = current.length === 0 ? [...chapters] : current;
const next = currentSelection.includes(chapter)
? currentSelection.filter((value) => value !== chapter)
: [...currentSelection, chapter];
if (next.length === chapters.length) {
return [];
}
return next.sort((left, right) => chapters.indexOf(left) - chapters.indexOf(right));
});
const currentSelection = chapterFilter.length === 0 ? [...chapters] : chapterFilter;
const next = currentSelection.includes(chapter)
? currentSelection.filter((value) => value !== chapter)
: [...currentSelection, chapter];
if (next.length === chapters.length) {
setChapterFilter([]);
} else {
setChapterFilter(next.sort((left, right) => chapters.indexOf(left) - chapters.indexOf(right)));
}
},
[chapters],
[chapters, chapterFilter, setChapterFilter],
);
const visibleCountryCount = countries.length - hiddenCountryIds.length;
@@ -504,7 +539,7 @@ export function ResourcesClient() {
}, [displayedResources, selection.selectedIds]);
const chips = [
...(search ? [{ label: `Search: "${search}"`, onRemove: () => setSearch("") }] : []),
...(search ? [{ label: `Search: "${search}"`, onRemove: () => { setSearchInput(""); setResourceUrlFilters({ search: "" }); } }] : []),
...(chapterFilter.length > 0
? [
{
@@ -625,8 +660,8 @@ export function ResourcesClient() {
<input
type="search"
placeholder="Search by name, EID, email..."
value={search}
onChange={(e) => setSearch(e.target.value)}
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="app-input max-w-xs"
/>
<InfoTooltip