Skip to content

feat: add cursor-based pagination to projects showcase - #806

Merged
Aditya948351 merged 2 commits into
Aditya948351:masterfrom
nishupr:feat/projects-pagination
Jul 8, 2026
Merged

feat: add cursor-based pagination to projects showcase#806
Aditya948351 merged 2 commits into
Aditya948351:masterfrom
nishupr:feat/projects-pagination

Conversation

@nishupr

@nishupr nishupr commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Summary

Implements #755 — adds a generic Pagination.tsx component and Firestore cursor-based pagination (startAfter, limit) to the Projects Showcase tab on the Community page, so it fetches data one page at a time instead of relying on a single capped query.

Changes

New: src/components/common/Pagination.tsx

A reusable, presentation-only pagination component:

  • Previous / Next buttons with disabled states when there's no previous/next page
  • Current page indicator
  • Disables both buttons while a fetch is in progress (loading prop)
  • No Firestore/data-fetching logic inside — fully decoupled so it can be reused elsewhere in the app

src/app/community/page.tsx

  • Replaced the single limit(20) query with cursor-based pagination:
    • Fetches PAGE_SIZE + 1 documents per request so we can detect whether a next page exists without a second query
    • Maintains a pageCursors stack of QueryDocumentSnapshots, so "Previous" can navigate backward without needing Firestore's (nonexistent) native backward cursor
    • startAfter(cursor) is used for "Next"; popping the cursor stack and re-fetching handles "Previous"
  • Pagination automatically resets to page 1 whenever the tab or sort option (Newest/Popular) changes
  • Rendered the new <Pagination> component below the projects grid, visible only on the Showcase tab

Known limitation (pre-existing, not introduced by this PR)

Client-side search (Fuse.js) only searches within the currently loaded page of projects, since it operates on the fetched projects array rather than the full Firestore collection. This was already the case before this change — pagination doesn't make it worse, but it does make it more visible, so the <Pagination> controls are hidden while a search query is active to avoid confusion.

How to test

  1. npm run dev
  2. Go to the Community page → Showcase tab
  3. With 20+ projects in Firestore, confirm "Next" is enabled and loads the next page correctly
  4. Click "Previous" and confirm it correctly steps back
  5. Switch between "Newest" and "Popular" sort — confirm pagination resets to page 1
  6. Type in the search box — confirm pagination controls hide, since search is scoped to the loaded page only

Verified locally with 25 seeded test projects — pagination correctly showed page 1 (20 projects) → clicked Next → showed remaining 5 (page 2, Next disabled) → clicked Previous → returned to page 1. Sort toggling correctly reset pagination to page 1.

Related Issue

Closes #755

@github-actions github-actions Bot added gssoc26 This is a official GirlScript Summer of Code label. level:intermediate Intermediate level issues type:design type:feature labels Jul 8, 2026
@Aditya948351
Aditya948351 merged commit f25d265 into Aditya948351:master Jul 8, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 This is a official GirlScript Summer of Code label. level:intermediate Intermediate level issues type:design type:feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Build a Custom Pagination Component for Open Source Projects

2 participants