Merge pull request #25 from CodeForAfrica/fetch-fact-checks-grid

Fetch fact checks grid

Author: maquchizi

app/fact-checks/[desk]/page.tsx

@@ -9,6 +9,7 @@ import { FactChecksExplorer } from "@/components/fact-checks/FactChecksExplorer"
 import { FactChecksHero } from "@/components/fact-checks/FactChecksHero";
 import { ARTICLES, getArticleBySlug } from "@/lib/article-content";
 import { CONTENT_DESKS, deskBySlug } from "@/lib/content-desks";
+import { FEATURE, FEATURE_SECONDARY, STORIES } from "@/lib/fact-checks-content";
 
 type Params = Promise<{ desk: string }>;
 
@@ -76,7 +77,11 @@ export default async function ContentDeskOrArticlePage({
   return (
     <>
       <FactChecksHero topic={desk.name} />
-      <FactChecksExplorer />
+      <FactChecksExplorer
+        stories={[FEATURE, FEATURE_SECONDARY, ...STORIES]}
+        page={1}
+        totalPages={1}
+      />
       <FactChecksContentDesks activeSlug={desk.slug} />
     </>
   );

app/fact-checks/page.tsx

@@ -1,17 +1,56 @@
 import type { Metadata } from "next";
 import { FactChecksContentDesks } from "@/components/fact-checks/FactChecksContentDesks";
 import { FactChecksExplorer } from "@/components/fact-checks/FactChecksExplorer";
+import {
+  clampPage,
+  pageOffset,
+  parsePageParam,
+  totalPages,
+} from "@/lib/data/pagination";
+import {
+  FACT_CHECKS_PAGE_SIZE,
+  type FactCheckListing,
+  getFactChecks,
+} from "@/lib/data/stories";
+import { FEATURE, FEATURE_SECONDARY, STORIES } from "@/lib/fact-checks-content";
 
 export const metadata: Metadata = {
   title: "Fact-Checks — PesaCheck",
   description:
     "Browse PesaCheck's fact-checks across Africa. Filter by region, language and topic to find the verifications that matter to you.",
 };
 
-export default function FactChecksPage() {
+/** Static design pool, paged the same way as the live query, for fallback. */
+const STATIC_POOL = [FEATURE, FEATURE_SECONDARY, ...STORIES];
+
+function staticPage(page: number): FactCheckListing {
+  const pages = totalPages(STATIC_POOL.length, FACT_CHECKS_PAGE_SIZE);
+  const current = clampPage(page, pages);
+  const start = pageOffset(current, FACT_CHECKS_PAGE_SIZE);
+  return {
+    stories: STATIC_POOL.slice(start, start + FACT_CHECKS_PAGE_SIZE),
+    page: current,
+    totalPages: pages,
+  };
+}
+
+export default async function FactChecksPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string | string[] }>;
+}) {
+  const page = parsePageParam((await searchParams).page);
+
+  const listing =
+    (await getFactChecks(page).catch(() => null)) ?? staticPage(page);
+
   return (
     <>
-      <FactChecksExplorer />
+      <FactChecksExplorer
+        stories={listing.stories}
+        page={listing.page}
+        totalPages={listing.totalPages}
+      />
       <FactChecksContentDesks />
     </>
   );

components/fact-checks/FactChecksExplorer.tsx

@@ -1,29 +1,20 @@
 "use client";
 
+import { usePathname, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { Pagination } from "@/components/ui/Pagination";
 import { Container } from "@/components/ui/SectionHeading";
 import { StoryCard } from "@/components/ui/StoryCard";
 import {
   DEFAULT_FILTERS,
-  FEATURE,
-  FEATURE_SECONDARY,
   FILTERS,
   type FilterDimension,
-  STORIES,
 } from "@/lib/fact-checks-content";
 import type { Story } from "@/lib/home-content";
 import { FilterBar, type Selection } from "./FilterBar";
 
-// Featured story leads the pool, so filtering can promote any matching story
-// into the large feature slot.
-const POOL: Story[] = [FEATURE, FEATURE_SECONDARY, ...STORIES];
-
 const EMPTY: Selection = { region: [], language: [], topic: [] };
 
-// Grid cards per page (the lead feature + secondary always head the listing).
-const GRID_PAGE_SIZE = 8;
-
 function clone(sel: Selection): Selection {
   return {
     region: [...sel.region],
@@ -41,7 +32,18 @@ function matches(story: Story, applied: Selection): boolean {
   });
 }
 
-export function FactChecksExplorer() {
+export function FactChecksExplorer({
+  stories,
+  page,
+  totalPages,
+}: {
+  stories: Story[];
+  page: number;
+  totalPages: number;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+
   // `selected` is the staged set reflected by the dropdowns + chips; `applied`
   // is what actually filters the listing (committed via "Apply Filters"). The
   // page loads showing the design's chips staged but the full listing visible —
@@ -53,7 +55,6 @@ export function FactChecksExplorer() {
   const [openDropdown, setOpenDropdown] = useState<FilterDimension | null>(
     null,
   );
-  const [page, setPage] = useState(1);
 
   const chips = useMemo(
     () =>
@@ -64,8 +65,8 @@ export function FactChecksExplorer() {
   );
 
   const results = useMemo(
-    () => POOL.filter((s) => matches(s, applied)),
-    [applied],
+    () => stories.filter((s) => matches(s, applied)),
+    [stories, applied],
   );
 
   const toggleOption = (dimension: FilterDimension, value: string) => {
@@ -89,28 +90,25 @@ export function FactChecksExplorer() {
   const toggleDropdown = (dimension: FilterDimension) =>
     setOpenDropdown((cur) => (cur === dimension ? null : dimension));
 
+  const goToPage = (next: number) => {
+    router.push(next <= 1 ? pathname : `${pathname}?page=${next}`);
+  };
+
   const apply = () => {
     setApplied(clone(selected));
     setOpenDropdown(null);
-    setPage(1);
+    goToPage(1);
   };
 
   const clear = () => {
     setSelected(clone(EMPTY));
     setApplied(clone(EMPTY));
     setOpenDropdown(null);
-    setPage(1);
+    goToPage(1);
   };
 
   const [feature, secondary, ...grid] = results;
 
-  const totalPages = Math.max(1, Math.ceil(grid.length / GRID_PAGE_SIZE));
-  const currentPage = Math.min(page, totalPages);
-  const gridPage = grid.slice(
-    (currentPage - 1) * GRID_PAGE_SIZE,
-    currentPage * GRID_PAGE_SIZE,
-  );
-
   return (
     <>
       {/* Filter panel — its own band below the hero, not overlapping it. */}
@@ -160,17 +158,17 @@ export function FactChecksExplorer() {
 
               {grid.length > 0 && (
                 <div className="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
-                  {gridPage.map((story) => (
+                  {grid.map((story) => (
                     <StoryCard key={story.href ?? story.title} story={story} />
                   ))}
                 </div>
               )}
 
               <div className="mt-12">
                 <Pagination
-                  page={currentPage}
+                  page={page}
                   totalPages={totalPages}
-                  onPageChange={setPage}
+                  onPageChange={goToPage}
                 />
               </div>
             </>

docs/track-a-tasks.md

@@ -116,14 +116,52 @@ Lowest-risk vertical slice: stand up the data layer and convert the one 1:1 row.
   distinguishes language routes from other collections, so the set is editorial
   (mirrors migration-plan; PR4 reuses it for the language filter).
 
-## PR 2b — Fact-checks grid — Phase 2
+## PR 2b — Fact-checks grid — Phase 2 ✅
 Heavier: client-component data lifting.
-- [ ] `lib/data/stories.ts` — `getFactChecks(): Story[]` (published articles)
-- [ ] Make `app/fact-checks/page.tsx` async, fetch grid data
-- [ ] Refactor `FactChecksExplorer` (client) to receive `stories` as a prop
-      instead of importing `lib/fact-checks-content`
-- [ ] Keep static `GRID` as `?? fallback`
-- [ ] Verify grid renders against staging (filters still static for now)
+- [x] `lib/data/queries/fact-checks.ts` — `GET_FACT_CHECK_ARTICLES`: one page of
+      published fact-checks (newest first) + an `_aggregate` total count. Filters
+      **server-side** to the `Debunk` verdict via the normalized
+      `swp_article_metadata.swp_article_metadata_subjects` relation, with
+      `$limit`/`$offset`. Selects the same fields as `GET_CONTENT_LIST_ITEMS` so
+      `mapStory` consumes the rows unchanged.
+- [x] `lib/data/stories.ts` — `getFactChecks(page): FactCheckListing` (`{ stories,
+      page, totalPages }`), `FACT_CHECKS_PAGE_SIZE = 10`. **A fact-check is
+      defined by carrying a `Debunk` verdict**, enforced in the query (the only
+      signal separating fact-checks from homepage content-blocks + editorial test
+      stubs that share `route`/`profile`). Route-agnostic, so it keeps working
+      once fact-checks land on topic desks (staging desks are empty; everything
+      sits on `english`).
+- [x] `app/fact-checks/page.tsx` made async; reads `?page=`, fetches that DB page
+      with the `?? fallback` pattern (static pool, paged identically).
+- [x] `FactChecksExplorer` (client) takes `stories` + `page`/`totalPages`;
+      pagination navigates by `?page=N` (server re-fetch) — never loads the corpus
+      client-side.
+- [x] `app/fact-checks/[desk]/page.tsx` (PR5 placeholder) passes the static pool
+      on a single page so it compiles + hides pagination.
+- [x] Verify against staging: grid renders live fact-checks (verdict badges,
+      dates, readTime, real media). **Server pagination proven** end-to-end by
+      temporarily setting page size to 2 (5 items → 3 pages): each page is a
+      distinct DB slice, `?page=N` drives the fetch, boundary disables "Next".
+      Restored to 10. tsc + biome clean; 27 Vitest tests pass.
+
+**Notes:**
+- **Why server-side verdict filter (not the verified jsonb path):** the jsonb
+  `metadata` column is exposed by Hasura as an opaque `String` (no jsonb
+  operators), so it can't filter or paginate server-side. Pagination at scale
+  (prod: tens of thousands of fact-checks) forces the normalized relation —
+  which the reference prod app also uses (`GET_COLLECTION_BY_METADATA_QUERY`).
+- **Relation vs jsonb divergence:** the relation drops `altered-yvonne` on
+  staging (its `swp_article_metadata` is `null` though the jsonb carries the
+  verdict — a staging integrity gap). All relation-matched articles still carry
+  the jsonb verdict *name*, so `mapStory`'s badge is unaffected. The French
+  "FAUX" article (no structured `Debunk` tag) is also absent. Both are staging
+  artifacts; production data is consistently pipelined.
+- Filters remain **static** (region/language/topic from `fact-checks-content`)
+  and now operate **client-side on the current page only**: staged chips show
+  but `applied` starts empty, so the full server page is visible on load. Live
+  `Story`s carry no taxonomy yet, so "Apply Filters" narrows to empty — expected.
+  PR4 makes filtering server-side, layering filter params onto the same `?page=`
+  URL the pagination already uses.
 
 ## PR 3 — Single article — Phase 3
 - [ ] `lib/data/queries/` — single-article query (`articleService.queries.js`):
@@ -137,13 +175,18 @@ Heavier: client-component data lifting.
       working when fetching live (article lookup by slug vs desk lookup)
 - [ ] Verify a real fact-check (e.g. `false-equating-somalia-and-al-shabab-is-untrue`)
 
-## PR 4 — Filters & pagination — Phase 4 (depends on 2b)
+## PR 4 — Filters — Phase 4 (depends on 2b)
+> Offset pagination already shipped in PR 2b (server-side `limit`/`offset` +
+> `_aggregate`, driven by `?page=`). PR 4 makes **filtering** server-side and
+> wires it onto that same URL mechanism.
 - [ ] Map filter dimensions to real taxonomy: `region` → `subject[countries]`,
       `topic` → `subject[01harm]`/route, `language` → article language/route
+      (extend `mapStory` to populate `topic`/`region`/`language` on `Story`)
 - [ ] Derive filter option lists from live data (replace hardcoded `REGIONS`/
       `LANGUAGES`/`TOPICS` in `fact-checks-content`)
-- [ ] Offset pagination (cf. `collectionService` + `_aggregate` for counts)
-- [ ] Decide client-side filter vs server query params; verify filtering works
+- [ ] Push selected filters into the query `where` (server-side) + reflect them
+      in the URL alongside `?page=`; reset to page 1 on filter change. Replace
+      the interim client-side, current-page-only filtering in `FactChecksExplorer`.
 
 ## PR 5 — Desk pages — Phase 5 (depends on 3 for route dispatch)
 - [ ] `lib/data/stories.ts` — `getByDesk(slug): Story[]` (by route collection)

lib/data/pagination.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import {
+  clampPage,
+  pageOffset,
+  parsePageParam,
+  totalPages,
+} from "@/lib/data/pagination";
+
+describe("parsePageParam", () => {
+  it("parses a positive integer string", () => {
+    expect(parsePageParam("3")).toBe(3);
+  });
+
+  it("defaults missing/empty to page 1", () => {
+    expect(parsePageParam(undefined)).toBe(1);
+    expect(parsePageParam("")).toBe(1);
+  });
+
+  it("rejects non-positive and non-numeric values", () => {
+    expect(parsePageParam("0")).toBe(1);
+    expect(parsePageParam("-2")).toBe(1);
+    expect(parsePageParam("abc")).toBe(1);
+    expect(parsePageParam("NaN")).toBe(1);
+  });
+
+  it("takes the first entry of a repeated query param", () => {
+    expect(parsePageParam(["4", "9"])).toBe(4);
+    expect(parsePageParam([])).toBe(1);
+  });
+
+  it("truncates a leading-numeric string the same way parseInt does", () => {
+    expect(parsePageParam("2things")).toBe(2);
+  });
+});
+
+describe("totalPages", () => {
+  it("rounds up partial pages", () => {
+    expect(totalPages(10, 10)).toBe(1);
+    expect(totalPages(11, 10)).toBe(2);
+    expect(totalPages(5, 2)).toBe(3);
+  });
+
+  it("returns at least 1 page for an empty corpus", () => {
+    expect(totalPages(0, 10)).toBe(1);
+  });
+
+  it("is null-safe against a zero or negative page size", () => {
+    expect(totalPages(50, 0)).toBe(1);
+    expect(totalPages(50, -10)).toBe(1);
+  });
+
+  it("clamps a negative count to one page", () => {
+    expect(totalPages(-5, 10)).toBe(1);
+  });
+});
+
+describe("pageOffset", () => {
+  it("is 0-based off the 1-based page", () => {
+    expect(pageOffset(1, 10)).toBe(0);
+    expect(pageOffset(2, 10)).toBe(10);
+    expect(pageOffset(3, 2)).toBe(4);
+  });
+
+  it("clamps sub-1 pages to the first page", () => {
+    expect(pageOffset(0, 10)).toBe(0);
+    expect(pageOffset(-3, 10)).toBe(0);
+  });
+});
+
+describe("clampPage", () => {
+  it("passes through an in-range page", () => {
+    expect(clampPage(2, 3)).toBe(2);
+  });
+
+  it("clamps above the total down to the last page", () => {
+    expect(clampPage(9, 3)).toBe(3);
+  });
+
+  it("clamps below 1 up to the first page", () => {
+    expect(clampPage(0, 3)).toBe(1);
+    expect(clampPage(-5, 3)).toBe(1);
+  });
+
+  it("never returns less than 1, even for a zero total", () => {
+    expect(clampPage(1, 0)).toBe(1);
+  });
+});
+
+describe("offset + totalPages round-trip", () => {
+  // The contract getFactChecks/staticPage rely on: a page within range maps to
+  // an offset that lands inside the corpus.
+  it("keeps every in-range page's offset below the item count", () => {
+    const count = 5;
+    const pageSize = 2;
+    const pages = totalPages(count, pageSize); // 3
+    for (let p = 1; p <= pages; p++) {
+      expect(pageOffset(clampPage(p, pages), pageSize)).toBeLessThan(count);
+    }
+  });
+});