Um den Benutzern das Navigieren durch verschiedene Seiten und das Anzeigen aller Rechnungen zu ermöglichen, implementieren Sie die Paginierung mithilfe von URL-Parametern, ähnlich der Suchfunktionalität.

Zurück zum Projekt

Schritt 1

1. Wenn Sie zur Pagination-Komponente navigieren, sehen Sie, dass es sich um eine Client-Komponente handelt. Um zu vermeiden, dass Datenbankgeheimnisse offengelegt werden, sollten Sie keine Daten auf der Client-Seite abrufen. Stattdessen sollten Sie die Daten auf dem Server abrufen und als Prop an die Komponente übergeben;

2. Importieren Sie in app/dashboard/invoices/page.tsx eine neue Funktion namens fetchInvoicesPages und übergeben Sie die Suchanfrage aus searchParams als Argument:

   • fetchInvoicesPages berechnet die Gesamtanzahl der Seiten basierend auf der Suchanfrage. Wenn es beispielsweise 12 passende Rechnungen mit einer Anzeige von 6 pro Seite gibt, wäre die Gesamtanzahl der Seiten 2.

3. Übergeben Sie das totalPages-Prop an die <Pagination/>-Komponente.

Schritt 2

1. Navigieren Sie zu app/ui/invoices/pagination.tsx;

2. Importieren Sie die Hooks usePathname und useSearchParams;

3. Verwenden Sie diese Hooks, um die aktuelle Seite abzurufen und die neue Seite festzulegen;

4. Kommentieren Sie den Code in dieser Komponente aus.

Hinweis

Ihre Anwendung kann vorübergehend nicht funktionieren, da die <Pagination/>-Logik noch nicht implementiert ist. Wir werden später daran arbeiten.

Schritt 3

1. Erstellen Sie innerhalb der <Pagination>-Komponente eine neue Funktion namens createPageURL;

2. Ähnlich wie bei der Suchfunktionalität verwenden Sie URLSearchParams, um die neue Seitennummer festzulegen;

3. Verwenden Sie pathName, um den URL-String zu konstruieren;

4. Kommentieren Sie die Variable allPages aus.

Schritt 4

Letzter Schritt - wenn der Benutzer eine neue Suchanfrage eingibt, ist es wichtig, die Seitennummer auf 1 zurückzusetzen. Um dies zu erreichen, aktualisieren Sie die handleSearch-Funktion in der app/ui/search.tsx.

In der Praxis