3. Mettre en place le composant de recherche

Nous devons maintenant utiliser notre service de pokémons, afin de récupérer les pokémons correspond au terme de recherche de l’utilisateur. Pour mettre en place ce fonctionnement, nous allons créer un nouveau composant PokemonSearch. Ce composant aura pour rôle d’afficher et de gérer le champ de recherche des pokémons, ainsi que l’auto-complétion :

Le template de ce composant sera simple. Il comprendra un champ de recherche, et une liste de résultats correspondants aux termes de la recherche. Créons donc un nouveau fichier pokemon-search.tsx :

import React, { FunctionComponent, useState } from 'react';
import { Link } from 'react-router-dom';
import Pokemon from '../models/pokemon';
import PokemonService from '../services/pokemon-service';

const PokemonSearch: FunctionComponent = () => {
 
  const [term, setTerm] = useState<string>('');
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const term = e.target.value;
    setTerm(term);

    if(term.length <= 1) {
      setPokemons([]);
      return;
    }

    PokemonService.searchPokemon(term).then(pokemons => setPokemons(pokemons));
  }
 
  return (
    <div className="row"> 
    <div className="col s12 m6 offset-m3"> 
      <div className="card"> 
      <div className="card-content"> 
        <div className="input-field"> 
        <input type="text" placeholder="Rechercher un pokémon" value={term} onChange={e => handleInputChange(e)} /> 
        </div> 
        <div className='collection'>
        {pokemons.map((pokemon) => (
          <Link key={pokemon.id} to={`/pokemons/${pokemon.id}`} className="collection-item">
            {pokemon.name}
          </Link>
        ))}
        </div> 
      </div> 
      </div> 
    </div> 
    </div>
  );
}
 
export default PokemonSearch;

Hormis les balises nécessaires pour les feuilles de style, les lignes de code qui nous intéressent se situent :

• À la ligne 8 et 9 : On définit deux états pour ce composant, un premier état pour sauvegarder le terme de recherche saisie par l’utilisateur, et un autre état pour stocker les pokémons correspondant au terme de recherche.
• De la ligne 11 à 21 : On définit les fameuses méthodes propres au formulaire dans React. On définit le comportement qui sera appliqué à chaque fois que l’utilisateur saisit une nouvelle valeur dans le champ de recherche. La première chose que l’on fait c’est de mettre à jour l’état de notre composant avec la nouvelle valeur du terme demandé par l’utilisateur. Ensuite, de la ligne 15 à 18, on vérifie que le terme demandé par l’utilisateur fait au moins deux caractères de long. Si le terme de recherche est une seule lettre, on n’effectue pas la recherche, et on retourne directement un résultat de recherche vide, via « [] ». En effet, la recherche n’est pas assez précise pour mériter d’afficher un résultat. Que signifie une recherche « a » ou « u » ? Pas grand chose… Enfin, on appel la méthode searchPokemon à la ligne 20, en lui passant en paramètre le terme de recherche de l’utilisateur, et on remplit le state des résultats avec les pokémons demandés. 👍
• À la ligne 29 : On branche notre champ de recherche avec notre méthode précédente, afin d’avoir notre formulaire bien « cablé ».
• De la ligne 32 à 36 : On liste les pokémons récupéré depuis le state, qui correspond aux résultats de notre recherche. Si l’utilisateur clique sur un pokémon de la liste des résultats, on le redirige vers la fiche détaillé de ce pokémon. C’est juste… du lourd. 💪

Notre composant de recherche est en place est prêt à être utiliser. C’est ce que nous allons faire juste après !