Théorie

Avant de mettre en œuvre la fonctionnalité de recherche, il est essentiel de comprendre ces hooks côté client.

• useSearchParams ;
  • Permet d'accéder aux paramètres actuels de l'URL ;
  • Exemple : Pour l'URL /dashboard/invoices?page=1&query=pending, il fournit {page: '1', query: 'pending'}.
• usePathname ;
  • Lit le chemin actuel de l'URL ;
  • Exemple : Pour la route domain/dashboard/invoices, usePathname retourne "/dashboard/invoices".
• useRouter.
  • Facilite la navigation entre les routes dans les composants client, en offrant plusieurs méthodes.

Aperçu des étapes d’implémentation :

1. Capturer la saisie utilisateur ;
2. Mettre à jour l’URL avec les paramètres de recherche ;
3. Garder l’URL synchronisée avec le champ de saisie ;
4. Mettre à jour la table pour refléter la requête de recherche.

Retour au projet

1. Capturer la saisie utilisateur

1. Ouvrir le composant Search (app/ui/search.tsx) ;
2. Observer l'utilisation de 'use client', indiquant la disponibilité des écouteurs d'événements et des hooks ;
3. Utiliser la fonction handleSearch, qui se déclenche à chaque modification de la saisie.

Après l'implémentation, ouvrir la console développeur dans le navigateur. Tout texte saisi dans le champ de saisie doit s'afficher dans la console du navigateur.

2. Mettre à jour l’URL avec les paramètres de recherche

1. Importer le hook useSearchParams depuis 'next/navigation' et l’assigner à une variable ;
2. À l’intérieur de la fonction handleSearch, créer une nouvelle instance de URLSearchParams en utilisant la variable précédemment définie (searchParams). Cet utilitaire fournit des méthodes pour manipuler les paramètres de requête de l’URL ;
3. Définir la chaîne de paramètres en fonction de la saisie de l’utilisateur. Si le champ est vide, le supprimer ;
4. Utiliser les hooks useRouter et usePathname depuis 'next/navigation' et employer la méthode replace de useRouter() dans handleSearch.
   • ${pathname} représente le chemin actuel, par exemple "/dashboard/invoices" ;
   • Lorsque l’utilisateur saisit du texte dans la barre de recherche, params.toString() convertit la saisie au format compatible avec l’URL ;
   • replace(${pathname}?${params.toString()}) met à jour l’URL avec les données de recherche de l’utilisateur (par exemple, /dashboard/invoices?query=qwerty).

L’URL est mise à jour sans rechargement de la page, grâce à la navigation côté client de Next.js.

Après l’implémentation, tout texte saisi dans le champ de saisie sera reflété dans l’URL.

3. Garder l’URL synchronisée avec le champ de saisie

Pour garantir que le champ de saisie corresponde à l’URL et soit prérempli lors du partage, utiliser defaultValue en lisant depuis searchParams.

4. Mettre à jour le tableau pour refléter la requête de recherche

Enfin, mettez à jour le composant Table afin de refléter la requête de recherche. Les composants de page acceptent une prop nommée searchParams. Passez les paramètres actuels de l’URL au composant <Table>.

N'oubliez pas de décommenter le composant Table.

Super ! Vous avez ajouté avec succès la fonctionnalité de recherche à votre application. Essayez-la – fonctionne-t-elle ? 😊

Dans le prochain chapitre, nous aborderons la pagination, car seulement 6 factures sont actuellement visibles sur la page.

En pratique