Per consentire agli utenti di navigare tra le diverse pagine e visualizzare tutte le fatture, implementare la paginazione utilizzando i parametri URL, in modo simile alla funzionalità di ricerca.

Torna al progetto

Passo 1

1. Navigando nel componente Pagination, si nota che è un componente client. Per evitare di esporre segreti del database, evitare di recuperare dati lato client. Invece, recuperare i dati lato server e passarli come prop al componente;
2. In app/dashboard/invoices/page.tsx, importare una nuova funzione chiamata fetchInvoicesPages e passare la query di ricerca da searchParams come argomento:
   • fetchInvoicesPages calcola il numero totale di pagine in base alla query di ricerca. Ad esempio, se ci sono 12 fatture corrispondenti con una visualizzazione di 6 per pagina, il numero totale di pagine sarà 2.
3. Passare la prop totalPages al componente <Pagination/>.

Passo 2

1. Navigare in app/ui/invoices/pagination.tsx;
2. Importare gli hook usePathname e useSearchParams;
3. Utilizzare questi hook per recuperare la pagina corrente e impostare la nuova pagina;
4. Decommentare il codice in questo componente.

Nota

L'applicazione potrebbe temporaneamente non funzionare poiché la logica di <Pagination/> non è ancora implementata. Verrà sviluppata successivamente.

Passo 3

1. All'interno del componente <Pagination>, creare una nuova funzione chiamata createPageURL;
2. In modo simile alla funzionalità di ricerca, utilizzare URLSearchParams per impostare il nuovo numero di pagina;
3. Utilizzare pathName per costruire la stringa URL;
4. Decommentare la variabile allPages.

Passaggio 4

Passaggio finale - quando l'utente inserisce una nuova query di ricerca, è fondamentale reimpostare il numero di pagina a 1. Per ottenere questo risultato, aggiorna la funzione handleSearch in app/ui/search.tsx.

In pratica