For å la brukere navigere mellom ulike sider og vise alle fakturaer, implementeres paginering ved hjelp av URL-parametere, på samme måte som søkefunksjonaliteten.

Tilbake til prosjektet

Steg 1

1. Hvis du navigerer til Pagination-komponenten, ser du at det er en klientkomponent. For å unngå å eksponere databasehemmeligheter, bør du unngå å hente data på klientsiden. Hent i stedet dataene på serveren og send dem som en prop til komponenten;
2. I app/dashboard/invoices/page.tsx, importer en ny funksjon kalt fetchInvoicesPages og send søkespørringen fra searchParams som et argument:
   • fetchInvoicesPages beregner totalt antall sider basert på søkespørringen. For eksempel, hvis det finnes 12 samsvarende fakturaer og 6 vises per side, vil totalt antall sider være 2.
3. Send totalPages-propen til <Pagination/>-komponenten.

Steg 2

1. Naviger til app/ui/invoices/pagination.tsx;
2. Importer hookene usePathname og useSearchParams;
3. Bruk disse hookene for å hente gjeldende side og sette ny side;
4. Fjern kommentaren fra koden i denne komponenten.

Merk

Applikasjonen din kan midlertidig slutte å fungere ettersom logikken for <Pagination/> ennå ikke er implementert. Vi vil arbeide med dette senere.

Steg 3

1. Inne i <Pagination>-komponenten, opprett en ny funksjon kalt createPageURL;
2. På samme måte som med søkefunksjonaliteten, bruk URLSearchParams for å sette nytt sidenummer;
3. Bruk pathName for å konstruere URL-strengen;
4. Fjern kommentaren fra variabelen allPages.

Steg 4

Siste steg – når brukeren skriver inn et nytt søk, er det viktig å tilbakestille sidenummeret til 1. For å oppnå dette, oppdater handleSearch-funksjonen i app/ui/search.tsx.

I praksis