Function useFilter

site/src/components/Filter/Filter.tsx:59–103

({
	fallbackFilter = "",
	searchParams,
	onSearchParamsChange,
	onUpdate,
}: UseFilterConfig)

export const useFilterParamsKey = "filter";

export const useFilter = ({
	fallbackFilter = "",
	searchParams,
	onSearchParamsChange,
	onUpdate,
}: UseFilterConfig): UseFilterResult => {
	const query = searchParams.get(useFilterParamsKey) ?? fallbackFilter;

	const update = (newValues: string | FilterValues) => {
		const serialized =
			typeof newValues === "string" ? newValues : stringifyFilter(newValues);
		const noUpdateNeeded = query === serialized;
		if (noUpdateNeeded) {
			return;
		}

		/**
		 * @todo 2025-07-15 - We have a slightly nasty bug here, where trying to
		 * update state via immutable state updates causes our code to break.
		 *
		 * In theory, it would be better to make a copy of the search params. We
		 * can then mutate and dispatch the copy instead of the original. Doing
		 * that causes other parts of our existing logic to break, though.
		 * That's a sign that our other code is slightly broken, and only just
		 * happens to work by chance right now.
		 */
		searchParams.set(useFilterParamsKey, serialized);
		onSearchParamsChange(searchParams);
		onUpdate?.(serialized);
	};

	const { debounced: debounceUpdate, cancelDebounce } = useDebouncedFunction(
		update,
		500,
	);

	return {
		query,
		update,
		debounceUpdate,
		cancelDebounce,
		values: parseFilterQuery(query),
		used: query !== "" && query !== fallbackFilter,
	};
};

const parseFilterQuery = (filterQuery: string): FilterValues => {
	if (filterQuery === "") {