Anujcodecraft/notes-online

## 🐞 Issue: Pagination Resets to First Page on Refresh

Open

#28 opened on Jul 4, 2025

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (7 forks)auto 404
ReactJsUIbugenhancementgood first issue

Repository metrics

Stars
 (7 stars)
PR merge metrics
 (PR metrics pending)

Description

Description

When a user navigates to Browse Notes or Browse PYQ, changes to page 2 (or any other page), and then refreshes the browser, the page resets to page 1 instead of staying on the selected page.

This breaks the expected behavior of persistent pagination and impacts user experience, especially when browsing large datasets.

✅ Expected Behavior

  • After refreshing the page, the user should remain on the same page number they were on before the refresh (e.g., page 2).
  • Pagination state should persist through browser refreshes or deep links.

🧪 Steps to Reproduce

  1. Go to Browse Notes or Browse PYQ of 🌐 Live Demo.
  2. Click to navigate to Page 2.
  3. Refresh the browser.
  4. Observe: The user is redirected back to Page 1.

💡 Proposed Solution

  • Use URL query parameters to store the current page number (e.g., ?page=2).
  • On component mount, read the page query param from the URL and set it as the current page state.
  • Update the query param whenever the user navigates to a new page.

Contributor guide

Research direction
Explore how to persist the current page number in the URL query parameters. Identify the component handling pagination and implement reading the 'page' parameter on mount and updating it when the page changes. Use a library like React Router's useSearchParams or a custom solution.
Tech stack
javascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75