Jotta käyttäjät voivat siirtyä eri sivujen välillä ja tarkastella kaikkia laskuja, ota käyttöön sivutus URL-parametrien avulla, samalla tavalla kuin hakutoiminnossa.

Takaisin projektiin

Vaihe 1

1. Siirry Pagination-komponenttiin, jossa huomaat sen olevan asiakaskomponentti. Tietokantasalaisuuksien suojaamiseksi vältä tietojen hakemista asiakaspuolella. Hae tiedot palvelimella ja välitä ne komponentille propina;
2. Tiedostossa app/dashboard/invoices/page.tsx tuo uusi funktio nimeltä fetchInvoicesPages ja välitä hakukysely searchParams-parametrina:
   • fetchInvoicesPages laskee sivujen kokonaismäärän hakukyselyn perusteella. Esimerkiksi, jos hakutuloksia on 12 ja näytetään 6 per sivu, sivujen kokonaismäärä on 2.
3. Välitä totalPages-proppi <Pagination/>-komponentille.

Vaihe 2

1. Siirry tiedostoon app/ui/invoices/pagination.tsx;
2. Tuo usePathname- ja useSearchParams-hookit;
3. Käytä näitä hookeja nykyisen sivun hakemiseen ja uuden sivun asettamiseen;
4. Poista kommentointi tämän komponentin koodista.

Huomio

Sovelluksesi saattaa tilapäisesti lakata toimimasta, koska <Pagination/>-logiikkaa ei ole vielä toteutettu. Työstämme sitä myöhemmin.

Vaihe 3

1. Luo <Pagination>-komponentin sisälle uusi funktio nimeltä createPageURL;
2. Käytä URLSearchParams-rakennetta uuden sivunumeron asettamiseen, kuten hakutoiminnossa;
3. Hyödynnä pathName-muuttujaa URL-osoitteen muodostamiseen;
4. Poista kommentointi allPages-muuttujasta.

Vaihe 4

Viimeinen vaihe – kun käyttäjä syöttää uuden hakukyselyn, sivunumero on tärkeää palauttaa arvoon 1. Tämän saavuttamiseksi päivitä handleSearch-funktio tiedostossa app/ui/search.tsx.

Käytännössä