Faceted filter

"use client";

import { useEffect, useRef, useState } from "react";
import { Tree, type TreeDefinition, type TreeRef } from "react-virtual-checkbox-tree";

/** department → category → subcategories, flattened into the map below. */
const CATALOG: Record<string, Record<string, string[]>> = {
  Electronics: {
    Audio: ["Headphones", "Earbuds", "Speakers", "Microphones"],
    Computers: ["Laptops", "Desktops", "Monitors", "Keyboards", "Mice"],
  },
  Outdoors: {
    Camping: ["Tents", "Sleeping bags", "Stoves", "Lanterns"],
    Cycling: ["Road bikes", "Gravel bikes", "Helmets", "Bike lights"],
  },
};

const slug = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-");

function buildCatalog(): TreeDefinition {
  const data: TreeDefinition = { __root__: { id: "__root__", label: "root", children: [] } };
  const departments: string[] = [];

  for (const [department, categories] of Object.entries(CATALOG)) {
    const departmentId = slug(department);
    const categoryIds: string[] = [];

    for (const [category, leaves] of Object.entries(categories)) {
      const categoryId = departmentId + "/" + slug(category);
      const leafIds = leaves.map((leaf) => categoryId + "/" + slug(leaf));
      leaves.forEach((leaf, i) => {
        data[leafIds[i]] = { id: leafIds[i], label: leaf };
      });
      data[categoryId] = { id: categoryId, label: category, children: leafIds };
      categoryIds.push(categoryId);
    }

    data[departmentId] = { id: departmentId, label: department, children: categoryIds };
    departments.push(departmentId);
  }

  data.__root__.children = departments;
  return data;
}

const catalog = buildCatalog();
const INITIAL_EXPANDED = ["electronics"];
const DEBOUNCE_MS = 250;

export function FacetedFilter() {
  const [query, setQuery] = useState("");
  const [facets, setFacets] = useState<string[]>([]);
  const treeRef = useRef<TreeRef>(null);

  // One router write per pause, not one per keystroke. Without this you push a
  // history entry per character and re-run every server component with it.
  useEffect(() => {
    const timer = window.setTimeout(() => {
      const params = new URLSearchParams();
      if (query) params.set("q", query);
      if (facets.length) params.set("f", [...facets].sort().join(","));
      const qs = params.toString();
      window.history.replaceState(null, "", qs ? "?" + qs : location.pathname);
    }, DEBOUNCE_MS);

    return () => window.clearTimeout(timer);
  }, [facets, query]);

  return (
    <div>
      <input
        aria-label="Filter categories"
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Filter facets…"
        value={query}
      />

      <Tree
        aria-label="Product categories"
        data={catalog}
        estimateSize={30}
        expandedItems={INITIAL_EXPANDED}
        height={300}
        // Two characters is enough for a 60-node taxonomy; the default is 3.
        minSearchChars={2}
        onCheck={setFacets}
        ref={treeRef}
        searchQuery={query}
      />

      <div>
        {[...facets].sort().map((id) => (
          <button
            key={id}
            // Removing a chip goes straight to the engine. Round-tripping it
            // through a controlled `checkedItems` prop is a render slower and,
            // because the prop is applied in an effect, a frame stale.
            onClick={() => treeRef.current?.getEngine().toggle(id, false)}
            type="button"
          >
            {catalog[id]?.label ?? id} ×
          </button>
        ))}
        {facets.length > 0 && (
          <button onClick={() => treeRef.current?.getEngine().uncheckAll()} type="button">
            Clear all
          </button>
        )}
      </div>
    </div>
  );
}

"use client";

import { useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";
import { Tree } from "react-virtual-checkbox-tree";

// The same flat map `buildCatalog()` returns above, exported from its own file
// so both halves of the round trip share one tree.
import { catalog } from "./catalog";

/**
 * Reading the URL back on load. `checkedItems` is applied whenever the array's
 * identity changes, so it must be memoized — rebuilt on every render, it fights
 * the user for control of the selection.
 */
export function FacetsFromUrl() {
  const params = useSearchParams();
  const [query, setQuery] = useState(params.get("q") ?? "");

  const initialFacets = useMemo(
    () => (params.get("f") ?? "").split(",").filter(Boolean),
    [params]
  );

  return (
    <Tree
      aria-label="Product categories"
      checkedItems={initialFacets}
      data={catalog}
      height={300}
      minSearchChars={2}
      onCheck={(ids) => console.log(ids)}
      searchQuery={query}
    />
  );
}