Fonctionnalité de Recherche

Théorie

Avant de mettre en œuvre la fonctionnalité de recherche, il est essentiel de comprendre ces hooks 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 au sein des composants client, offrant plusieurs méthodes.

Aperçu des étapes de mise en œuvre :

1. Capturer l'entrée de l'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 le tableau pour refléter la requête de recherche.

Retour au projet

1. Capturer l'entrée utilisateur

1. Ouvrez le composant Search (app/ui/search.tsx);
2. Observez l'utilisation de 'use client', indiquant la disponibilité des écouteurs d'événements et des hooks;
3. Utilisez la fonction handleSearch, qui se déclenche à chaque changement d'entrée.

Après l'implémentation, ouvrez la Console Développeur dans votre navigateur. Vous devriez voir tout texte saisi dans le champ de saisie reflété dans la console du navigateur.

2. Mettre à jour l'URL avec des paramètres de recherche

1. Importez le hook useSearchParams depuis 'next/navigation' et assignez-le à une variable ;
2. À l'intérieur de la fonction handleSearch, créez 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 URL ;
3. Définissez la chaîne de paramètres en fonction de la saisie de l'utilisateur. Si la saisie est vide, supprimez-la ;
4. Utilisez les hooks useRouter et usePathname depuis 'next/navigation' et utilisez la méthode replace de useRouter() à l'intérieur de handleSearch.
   • ${pathname} représente le chemin actuel, par exemple, "/dashboard/invoices" ;
   • Au fur et à mesure que l'utilisateur tape dans la barre de recherche, params.toString() convertit la saisie en un format compatible avec les 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 s'assurer que le champ de saisie correspond à l'URL et se remplit lorsqu'il est partagé, utilisez defaultValue en lisant à partir de searchParams.

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

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

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

Génial ! Vous avez ajouté avec succès la fonctionnalité de recherche à votre application. Essayez-le - cela fonctionne-t-il ? 😊

Dans le prochain chapitre, nous plongerons dans la pagination puisque seulement 6 factures sont actuellement visibles sur la page.

En Pratique