CodingNic

Build Movie Discovery

Finish Pagination

Build Movie Discovery 11 min read

Finish Pagination

Finish Pagination

Add the page links that move through TMDB discovery results while preserving the current query, genres, and sort.

Step 1 — Add the page values

The home page already knows page and totalPages. Render a pagination row below the movie grid and create a PageLink helper for the two directions.

Step 2 — Build the outgoing query

Inside PageLink, create URLSearchParams and carry over the current selection before setting the requested page.

typescript
if (query.trim()) params.set("q", query.trim());
if (activeGenreIds.length > 0) params.set("genres", activeGenreIds.join(","));
if (sort !== "rating") params.set("sort", sort);
params.set("page", String(page));

Step 3 — Disable the edges

Disable Prev when page <= 1 and Next when page >= totalPages. The display should show the current page out of the capped TMDB maximum.

tsx
<span style={{ alignSelf: "center", fontSize: 13, color: "#6e695f" }}>
  page {page} of {Math.min(totalPages, 500)}
</span>

Step 4 — Keep search behavior separate

For the finished browse behavior, only show this discovery pagination while the text query is empty. Text search has its own TMDB behavior, which we will finish in the final browse module.

Checkpoint

Move forward and backward through discovery pages. The current page should change, the URL should preserve the active genre and sort choices, and the edge buttons should disable correctly.