Pagination

Pour permettre aux utilisateurs de naviguer à travers différentes pages et de voir toutes les factures, implémentez la pagination en utilisant les paramètres d'URL, similaire à la fonctionnalité de recherche.

Retour au projet

Étape 1

1. Si vous naviguez vers le composant Pagination, vous voyez qu'il s'agit d'un composant client. Pour éviter d'exposer les secrets de la base de données, évitez de récupérer des données côté client. Au lieu de cela, récupérez les données côté serveur et passez-les en tant que prop au composant ;
2. Dans app/dashboard/invoices/page.tsx, importez une nouvelle fonction appelée fetchInvoicesPages et passez la requête de recherche de searchParams comme argument :
   • fetchInvoicesPages calcule le nombre total de pages en fonction de la requête de recherche. Par exemple, s'il y a 12 factures correspondantes avec un affichage de 6 par page, le nombre total de pages serait de 2.
3. Passez la prop totalPages au composant <Pagination/>.

Étape 2

1. Naviguez vers app/ui/invoices/pagination.tsx;
2. Importez les hooks usePathname et useSearchParams;
3. Utilisez ces hooks pour récupérer la page actuelle et définir la nouvelle page ;
4. Décommentez le code dans ce composant.

Remarque

Votre application peut temporairement se casser car la logique de <Pagination/> n'est pas encore implémentée. Nous y travaillerons plus tard.

Étape 3

1. À l'intérieur du composant <Pagination>, créez une nouvelle fonction appelée createPageURL;
2. Similaire à la fonctionnalité de recherche, utilisez URLSearchParams pour définir le nouveau numéro de page;
3. Utilisez pathName pour construire la chaîne URL;
4. Décommentez la variable allPages.

Étape 4

Dernière étape - lorsque l'utilisateur saisit une nouvelle requête de recherche, il est essentiel de réinitialiser le numéro de page à 1. Pour ce faire, mettez à jour la fonction handleSearch dans le fichier app/ui/search.tsx.

En Pratique