Om gebruikers in staat te stellen door verschillende pagina's te navigeren en alle facturen te bekijken, paginering implementeren met behulp van URL-parameters, vergelijkbaar met de zoekfunctionaliteit.

Terug naar het project

Stap 1

1. Navigeer naar de Pagination-component; deze is een clientcomponent. Om het blootstellen van databasesecreties te voorkomen, geen data ophalen aan de clientzijde. Haal in plaats daarvan de data op aan de serverzijde en geef deze door als prop aan de component;
2. Importeer in app/dashboard/invoices/page.tsx een nieuwe functie genaamd fetchInvoicesPages en geef de zoekopdracht uit searchParams als argument door:
   • fetchInvoicesPages berekent het totale aantal pagina's op basis van de zoekopdracht. Bijvoorbeeld: als er 12 overeenkomende facturen zijn met een weergave van 6 per pagina, is het totale aantal pagina's 2.
3. Geef de prop totalPages door aan de <Pagination/>-component.

Stap 2

1. Navigeer naar app/ui/invoices/pagination.tsx;
2. Importeer de hooks usePathname en useSearchParams;
3. Gebruik deze hooks om de huidige pagina op te halen en de nieuwe pagina in te stellen;
4. Haal het commentaar weg bij de code in deze component.

Opmerking

De applicatie kan tijdelijk niet werken omdat de logica van <Pagination/> nog niet is geïmplementeerd. Hier wordt later aan gewerkt.

Stap 3

1. Maak binnen de <Pagination>-component een nieuwe functie genaamd createPageURL;
2. Gebruik, vergelijkbaar met de zoekfunctionaliteit, URLSearchParams om het nieuwe paginanummer in te stellen;
3. Gebruik pathName om de URL-string samen te stellen;
4. Haal het commentaar weg bij de variabele allPages.

Stap 4

Laatste stap - wanneer de gebruiker een nieuwe zoekopdracht invoert, is het essentieel om het paginanummer terug te zetten naar 1. Werk hiervoor de handleSearch-functie bij in app/ui/search.tsx.

In de praktijk