Skip to content

Problems List Fetches All Records at Once — Add Server-Side Pagination #12

Description

@rishabhx29

Description

Problems.tsx fetches the entire problem dataset in a single GET /api/content/problems request and renders every problem at once. The backend getAllProblems in contentController.ts uses prisma.problem.findMany() with no take or skip. As the problem set scales, this causes increasingly large API responses, slow renders, and an oversized DOM tree.

Requirements

  • Add page and limit query parameters to GET /api/content/problems (default: page=1, limit=25).
  • Return pagination metadata in the response: { data, totalCount, page, totalPages }.
  • Implement a "Load More" button or IntersectionObserver infinite scroll in Problems.tsx.
  • Changing any filter (difficulty, tag, search) resets pagination to page 1.

Expected Behavior

Initial Load — The first 25 problems are fetched and displayed.

"Load More" / Scroll to Bottom — The next 25 problems are fetched and appended to the list.

Filter Change — Pagination resets to page 1 and only the filtered result set is fetched.

Tasks

  • Update getAllProblems in contentController.ts to accept page and limit query params using Prisma skip/take.
  • Return { data, totalCount, page, totalPages } in the response.
  • Update the getAllProblems API function in app/src/api/content.ts to pass pagination params.
  • Implement a "Load More" button or IntersectionObserver in Problems.tsx.
  • Reset to page 1 and clear existing results when any filter changes.

Acceptance Criteria

  • GET /api/content/problems?page=1&limit=25 returns exactly 25 problems with metadata.
  • Successive pages load correctly and append to the list.
  • Filter changes reset to page 1.
  • No regression in problem filtering, search, or display.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions