Sync a Filter Panel to the URL Query String with a Custom useSearchParams Hook

import { useCallback, useMemo, useRef } from "react";
import { useSearchParamsState } from "./useSearchParamsState";

export interface Filters {
  q: string;
  category: string;
  min?: number;
  max?: number;
  tags: string[];
}

function useDebouncedCallback<A extends unknown[]>(fn: (...args: A) => void, delay: number) {
  const timer = useRef<ReturnType<typeof setTimeout>>();
  return useCallback((...args: A) => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => fn(...args), delay);
  }, [fn, delay]);
}

function toNumber(value: string | null): number | undefined {
  if (!value) return undefined;
  const n = Number(value);
  return Number.isFinite(n) ? n : undefined;
}

export function useFilters() {
  const { params, setParams } = useSearchParamsState();

  const filters: Filters = useMemo(() => ({
    q: params.get("q") ?? "",
    category: params.get("category") ?? "",
    min: toNumber(params.get("min")),
    max: toNumber(params.get("max")),
    tags: (params.get("tags") ?? "").split(",").filter(Boolean),
  }), [params]);

  const setFilter = useCallback(<K extends keyof Filters>(key: K, value: Filters[K]) => {
    const serialized = Array.isArray(value) ? value.join(",") : value == null ? "" : String(value);
    setParams({ [key]: serialized });
  }, [setParams]);

  const setQuery = useDebouncedCallback((q: string) => {
    setParams({ q }, "replace");
  }, 300);

  const toggleTag = useCallback((tag: string) => {
    const next = filters.tags.includes(tag)
      ? filters.tags.filter((t) => t !== tag)
      : [...filters.tags, tag];
    setParams({ tags: next.join(",") });
  }, [filters.tags, setParams]);

  return { filters, setFilter, setQuery, toggleTag };
}

import { useFilters } from "./useFilters";

const CATEGORIES = ["all", "books", "electronics", "toys"];
const TAGS = ["sale", "new", "popular", "eco"];

export function FilterPanel() {
  const { filters, setFilter, setQuery, toggleTag } = useFilters();

  return (
    <aside className="filter-panel">
      <input
        type="search"
        placeholder="Search products"
        defaultValue={filters.q}
        onChange={(e) => setQuery(e.target.value)}
      />

      <select
        value={filters.category || "all"}
        onChange={(e) => setFilter("category", e.target.value === "all" ? "" : e.target.value)}
      >
        {CATEGORIES.map((c) => (
          <option key={c} value={c}>{c}</option>
        ))}
      </select>

      <div className="price-range">
        <input
          type="number"
          placeholder="Min"
          value={filters.min ?? ""}
          onChange={(e) => setFilter("min", e.target.value ? Number(e.target.value) : undefined)}
        />
        <input
          type="number"
          placeholder="Max"
          value={filters.max ?? ""}
          onChange={(e) => setFilter("max", e.target.value ? Number(e.target.value) : undefined)}
        />
      </div>

      <div className="tags">
        {TAGS.map((tag) => (
          <button
            key={tag}
            type="button"
            aria-pressed={filters.tags.includes(tag)}
            className={filters.tags.includes(tag) ? "tag active" : "tag"}
            onClick={() => toggleTag(tag)}
          >
            {tag}
          </button>
        ))}
      </div>
    </aside>
  );
}