Anujcodecraft/notes-online

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

Offen

#28 geöffnet am 04.07.2025

Auf GitHub ansehen
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (7 Forks)auto 404
ReactJsUIbugenhancementgood first issue

Repository-Metriken

Stars
 (7 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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-Richtung
Untersuchen Sie, wie die aktuelle Seitennummer in den URL Abfrageparametern gespeichert werden kann. Identifizieren Sie die Komponente, die die Paginierung verwaltet, und implementieren Sie das Lesen des 'page' Parameters beim Einhängen und die Aktualisierung bei Seitenwechsel. Verwenden Sie einen Hook wie useSearchParams von React Router oder eine benutzerdefinierte Lösung.
Tech Stack
javascript
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitJavaScript
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75