Pour permettre aux utilisateurs de naviguer entre différentes pages et de consulter toutes les factures, implémenter la pagination à l'aide de paramètres d'URL, de manière similaire à la fonctionnalité de recherche.

Retour au projet

Étape 1

1. En naviguant vers le composant Pagination, il est constaté qu'il s'agit d'un composant client. Afin d'éviter l'exposition des informations sensibles de la base de données, il convient de ne pas effectuer la récupération des données côté client. Préférer la récupération des données côté serveur et leur transmission en tant que prop au composant ;
2. Dans app/dashboard/invoices/page.tsx, importer une nouvelle fonction nommée fetchInvoicesPages et transmettre la requête de recherche issue de searchParams en tant qu'argument :
   • fetchInvoicesPages calcule le nombre total de pages en fonction de la requête de recherche. Par exemple, s'il existe 12 factures correspondantes avec un affichage de 6 par page, le nombre total de pages sera de 2.
3. Transmettre la prop totalPages au composant <Pagination/>.

Étape 2

1. Accéder à app/ui/invoices/pagination.tsx ;
2. Importer les hooks usePathname et useSearchParams ;
3. Utiliser ces hooks pour récupérer la page actuelle et définir la nouvelle page ;
4. Décommenter le code dans ce composant.

Remarque

L'application peut temporairement ne plus fonctionner car la logique du composant <Pagination/> n'est pas encore implémentée. Cette partie sera traitée ultérieurement.

Étape 3

1. À l'intérieur du composant <Pagination>, créer une nouvelle fonction nommée createPageURL ;
2. De manière similaire à la fonctionnalité de recherche, utiliser URLSearchParams pour définir le nouveau numéro de page ;
3. Utiliser pathName pour construire la chaîne d'URL ;
4. Décommenter 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 cela, mettez à jour la fonction handleSearch dans app/ui/search.tsx.

En pratique