Skip to content

Persist list pagination in URL query params across pages.#1222

Closed
bcExpt1123 wants to merge 3 commits into
entrius:testfrom
bcExpt1123:feat/url-pagination-state
Closed

Persist list pagination in URL query params across pages.#1222
bcExpt1123 wants to merge 3 commits into
entrius:testfrom
bcExpt1123:feat/url-pagination-state

Conversation

@bcExpt1123
Copy link
Copy Markdown
Contributor

@bcExpt1123 bcExpt1123 commented May 18, 2026

Summary

Refactor pagination across list-based pages to use URL query parameters instead of local state.

This change introduces a reusable, query-driven pagination system that:

  • Syncs page state with the URL (?page=, ?pageSize=)
  • Automatically restores pagination state on navigation (e.g., browser back)
  • Supports multiple independent paginations on the same page
  • Provides a modular API for consistent usage across the app

Affected pages include:

  • leaderboard/oss-contributions
  • leaderboard/discoveries
  • watchlist/miners
  • watchlist/repositories
  • watchlist/bounties
  • watchlist/prs
  • watchlist/issues
  • bounties
  • repositories
  • onboard/languages

Implementation Details:

  • Introduced a shared pagination utility/hook (e.g., useQueryPagination)
  • Pagination state is now derived from URL search params instead of local state
  • Supports:
    • page (required)
    • pageSize (optional; defaults per page if not provided)
  • Ensures safe handling of multiple paginations via scoped query keys (e.g., minersPage, reposPage)
  • On initial load:
    • Reads query params and renders the correct page immediately
  • On pagination change:
    • Updates URL without full page reload
  • Back/forward navigation:
    • Correctly restores previous pagination state

Related Issues

closes #1221

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation
  • Other (describe below)

Screenshots

Before:

image

After:
image

Checklist

  • New components are modularized/separated where sensible
  • Uses predefined theme (e.g. no hardcoded colors)
  • Responsive/mobile checked
  • Tested against the test API
  • npm run format and npm run lint:fix have been run
  • npm run build passes
  • Screenshots included for any UI/visual changes

Add useUrlPaginationParam with optional rows, 1-based page numbers in the
URL, and helpers to reset page on filter changes and clamp after load.
Wire up leaderboard, bounties, repositories, onboard languages, and
watchlist tabs so reload and back navigation restore the current page.
Fix mount effects and empty-loading clamps that were clearing page params.
@xiao-xiao-mao xiao-xiao-mao Bot added the enhancement New feature or request label May 18, 2026
@anderdc
Copy link
Copy Markdown
Collaborator

anderdc commented May 19, 2026

Fix conflicts.

@bcExpt1123
Copy link
Copy Markdown
Contributor Author

Hi @anderdc
I've fixed the conflicts. Please review again. thanks

@anderdc
Copy link
Copy Markdown
Collaborator

anderdc commented May 20, 2026

Fix conflicts.

@bcExpt1123
Copy link
Copy Markdown
Contributor Author

bcExpt1123 commented May 20, 2026

Fix conflicts.

Hi @anderdc
I've fixed the conflicts. Please review again. thanks

@anderdc anderdc closed this May 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Refactor pagination across multiple list pages to use URL query parameters instead of local state

2 participants