Drop "Apply" step from filter mechanism

  * Selecting a filter now fetches and filters the listing immediately
    instead of requiring the user to click on "Apply Filters"

Author: maquchizi

app/fact-checks/page.tsx

@@ -1,10 +1,7 @@
 import type { Metadata } from "next";
 import { FactChecksContentDesks } from "@/components/fact-checks/FactChecksContentDesks";
 import { FactChecksExplorer } from "@/components/fact-checks/FactChecksExplorer";
-import {
-  filtersToQuery,
-  parseFilterParams,
-} from "@/lib/data/fact-check-filters";
+import { parseFilterParams } from "@/lib/data/fact-check-filters";
 import {
   clampPage,
   pageOffset,
@@ -55,8 +52,6 @@ export default async function FactChecksPage({
   return (
     <>
       <FactChecksExplorer
-        // Re-key on the applied filters so navigation resets the staged selection.
-        key={JSON.stringify(filtersToQuery(filters))}
         stories={listing.stories}
         page={listing.page}
         totalPages={listing.totalPages}

components/fact-checks/FactChecksExplorer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useOptimistic, useState, useTransition } from "react";
 import { Pagination } from "@/components/ui/Pagination";
 import { Container } from "@/components/ui/SectionHeading";
 import { StoryCard } from "@/components/ui/StoryCard";
@@ -12,9 +12,9 @@ import {
 } from "@/lib/data/fact-check-filters";
 import { FILTERS, type FilterDimension } from "@/lib/fact-checks-content";
 import type { Story } from "@/lib/home-content";
-import { FilterBar, type Selection } from "./FilterBar";
+import { FilterBar } from "./FilterBar";
 
-function clone(sel: Selection): Selection {
+function clone(sel: FilterSelection): FilterSelection {
   return {
     region: [...sel.region],
     language: [...sel.language],
@@ -26,11 +26,14 @@ function clone(sel: Selection): Selection {
  * The fact-checks grid + filter bar. Filtering and pagination are both
  * **server-side and URL-driven**: `stories` arrive already filtered/paged, and
  * every control navigates by mutating the query string (`?region=…&topic=…&page=N`),
- * which re-runs the server fetch. `filters` is the applied selection parsed from
- * the URL; `selected` is the reader's staged edits, committed via "Apply Filters".
+ * which re-runs the server fetch.
  *
- * The parent keys this component by the applied filters, so navigation remounts
- * it and `selected` re-initializes from the new URL state.
+ * Filters **auto-apply** — there's no "Apply" step. The URL (`filters` prop) is
+ * the single source of truth; toggling an option, removing a chip, or clearing
+ * navigates straight away. `useOptimistic` mirrors the change so the checkboxes
+ * and chips update instantly while the server re-fetches the grid in a
+ * transition. Filter changes use `replace` (so a burst of toggles doesn't spam
+ * history); pagination uses `push`.
  */
 export function FactChecksExplorer({
   stories,
@@ -45,66 +48,63 @@ export function FactChecksExplorer({
 }) {
   const router = useRouter();
   const pathname = usePathname();
+  const [, startTransition] = useTransition();
 
-  const [selected, setSelected] = useState<Selection>(() => clone(filters));
+  // Optimistic mirror of the applied (URL) filters — instant checkbox/chip
+  // feedback; rebases to `filters` once the navigation transition resolves.
+  const [optimistic, setOptimistic] = useOptimistic(filters);
   const [openDropdown, setOpenDropdown] = useState<FilterDimension | null>(
     null,
   );
 
-  const chips = useMemo(
-    () =>
-      FILTERS.flatMap(({ dimension }) =>
-        selected[dimension].map((value) => ({ dimension, value })),
-      ),
-    [selected],
+  const chips = FILTERS.flatMap(({ dimension }) =>
+    optimistic[dimension].map((value) => ({ dimension, value })),
   );
 
-  const toggleOption = (dimension: FilterDimension, value: string) => {
-    setSelected((prev) => {
-      const next = clone(prev);
-      next[dimension] = next[dimension].includes(value)
-        ? next[dimension].filter((v) => v !== value)
-        : [...next[dimension], value];
-      return next;
+  // Commit a filter/page change to the URL; the server re-fetches that slice.
+  const navigate = (
+    next: FilterSelection,
+    nextPage: number,
+    mode: "push" | "replace",
+  ) => {
+    const params = new URLSearchParams(filtersToQuery(next));
+    if (nextPage > 1) params.set("page", String(nextPage));
+    const qs = params.toString();
+    const url = qs ? `${pathname}?${qs}` : pathname;
+    startTransition(() => {
+      setOptimistic(next);
+      router[mode](url);
     });
   };
 
-  // Removing a chip commits immediately (like Clear, but for one value) rather
-  // than only un-staging it — the listing re-queries on the spot. `setSelected`
-  // gives instant visual feedback; `navigate` re-fetches and the remount then
-  // re-syncs `selected` from the new URL.
-  const removeChip = (dimension: FilterDimension, value: string) => {
-    const next = clone(selected);
-    next[dimension] = next[dimension].filter((v) => v !== value);
-    setSelected(next);
-    navigate(next, 1);
-  };
+  // Any filter change auto-applies and resets to page 1.
+  const commitFilters = (next: FilterSelection) => navigate(next, 1, "replace");
 
-  const toggleDropdown = (dimension: FilterDimension) =>
-    setOpenDropdown((cur) => (cur === dimension ? null : dimension));
-
-  // Navigate to a new filter+page combination; the server re-fetches that slice.
-  const navigate = (nextFilters: FilterSelection, nextPage: number) => {
-    const params = new URLSearchParams(filtersToQuery(nextFilters));
-    if (nextPage > 1) params.set("page", String(nextPage));
-    const qs = params.toString();
-    router.push(qs ? `${pathname}?${qs}` : pathname);
+  const toggleOption = (dimension: FilterDimension, value: string) => {
+    const next = clone(optimistic);
+    next[dimension] = next[dimension].includes(value)
+      ? next[dimension].filter((v) => v !== value)
+      : [...next[dimension], value];
+    commitFilters(next);
   };
 
-  // Pagination keeps the applied filters; only the page changes.
-  const goToPage = (next: number) => navigate(filters, next);
-
-  const apply = () => {
-    setOpenDropdown(null);
-    navigate(selected, 1);
+  const removeChip = (dimension: FilterDimension, value: string) => {
+    const next = clone(optimistic);
+    next[dimension] = next[dimension].filter((v) => v !== value);
+    commitFilters(next);
   };
 
   const clear = () => {
-    setSelected(clone(EMPTY_FILTERS));
     setOpenDropdown(null);
-    navigate(EMPTY_FILTERS, 1);
+    commitFilters(EMPTY_FILTERS);
   };
 
+  const toggleDropdown = (dimension: FilterDimension) =>
+    setOpenDropdown((cur) => (cur === dimension ? null : dimension));
+
+  // Pagination keeps the applied filters; only the page changes.
+  const goToPage = (next: number) => navigate(filters, next, "push");
+
   const [feature, secondary, ...grid] = stories;
 
   return (
@@ -113,13 +113,12 @@ export function FactChecksExplorer({
       <section className="bg-neutral-50">
         <Container className="py-14 lg:py-16">
           <FilterBar
-            selected={selected}
+            selected={optimistic}
             openDropdown={openDropdown}
             chips={chips}
             onToggleDropdown={toggleDropdown}
             onToggleOption={toggleOption}
             onRemoveChip={removeChip}
-            onApply={apply}
             onClear={clear}
           />
         </Container>

components/fact-checks/FilterBar.tsx

@@ -165,7 +165,6 @@ export function FilterBar({
   onToggleDropdown,
   onToggleOption,
   onRemoveChip,
-  onApply,
   onClear,
 }: {
   selected: Selection;
@@ -174,7 +173,6 @@ export function FilterBar({
   onToggleDropdown: (dimension: FilterDimension) => void;
   onToggleOption: (dimension: FilterDimension, value: string) => void;
   onRemoveChip: (dimension: FilterDimension, value: string) => void;
-  onApply: () => void;
   onClear: () => void;
 }) {
   return (
@@ -227,14 +225,6 @@ export function FilterBar({
               );
             })}
 
-            <button
-              type="button"
-              onClick={onApply}
-              className="inline-flex items-center gap-1.5 text-sm font-semibold text-pesacheck-blue"
-            >
-              <Check />
-              Apply Filters
-            </button>
             <button
               type="button"
               onClick={onClear}

components/search/SearchExplorer.tsx

@@ -92,8 +92,9 @@ function SearchIllustration() {
 }
 
 export function SearchExplorer({ query }: { query: string }) {
+  // Filters auto-apply: `selected` is the live filter set (no separate "Apply"
+  // step), so results recompute as the reader toggles options or removes chips.
   const [selected, setSelected] = useState<Selection>(() => clone(EMPTY));
-  const [applied, setApplied] = useState<Selection>(() => clone(EMPTY));
   const [openDropdown, setOpenDropdown] = useState<FilterDimension | null>(
     null,
   );
@@ -108,8 +109,8 @@ export function SearchExplorer({ query }: { query: string }) {
 
   const results = useMemo(
     () =>
-      POOL.filter((s) => matchesQuery(s, query) && matchesFilters(s, applied)),
-    [query, applied],
+      POOL.filter((s) => matchesQuery(s, query) && matchesFilters(s, selected)),
+    [query, selected],
   );
 
   const toggleOption = (dimension: FilterDimension, value: string) => {
@@ -133,14 +134,8 @@ export function SearchExplorer({ query }: { query: string }) {
   const toggleDropdown = (dimension: FilterDimension) =>
     setOpenDropdown((cur) => (cur === dimension ? null : dimension));
 
-  const apply = () => {
-    setApplied(clone(selected));
-    setOpenDropdown(null);
-  };
-
   const clear = () => {
     setSelected(clone(EMPTY));
-    setApplied(clone(EMPTY));
     setOpenDropdown(null);
   };
 
@@ -209,7 +204,6 @@ export function SearchExplorer({ query }: { query: string }) {
             onToggleDropdown={toggleDropdown}
             onToggleOption={toggleOption}
             onRemoveChip={removeChip}
-            onApply={apply}
             onClear={clear}
           />
         </Container>