8. Supprimer un pokémon

Je vous propose d’ajouter une nouvelle fonctionnalité permettant de supprimer un Pokémon. Voici comment je vois les choses :

On ajoute la possibilité pour l’utilisateur de supprimer un pokémon grâce à une nouvelle icône.

C’est le composant pokemon-form.tsx qui va implémenter cette nouvelle fonctionnalité. Mais pour commencer, nous devons ajouter une méthode pour supprimer un Pokémon dans notre service de gestion des Pokémons pokemons-service.ts :

import Pokemon from "../models/pokemon";

export default class PokemonService {
  //...

  static deletePokemon(pokemon: Pokemon): Promise<{}> {
    return fetch(`http://localhost:3001/pokemons/${pokemon.id}`, {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .catch(error => this.handleError(error));
  }
}

Cette méthode n’a rien de spécifique, elle prend en paramètre un pokémon, et retourne un objet vide lorsque le pokémon a bien été supprimé. Faites simplement attention à passer le bon type de méthode « DELETE » à la ligne 8.

Ensuite, il ne nous reste plus qu’à mettre à jour notre interface en conséquence. Repérer la balise image <img/> dans le template du composant pokemon-form.tsx. Juste en dessous de cette image, nous allons ajouter une petite icône de suppression ressemblant à une corbeille :

// Les autres importations
import PokemonService from '../services/pokemon-service';
 
// ...
 
const PokemonForm: FunctionComponent<Props> = ({pokemon}) => {
  // ...
 
  const deletePokemon = () => {
    PokemonService.deletePokemon(pokemon).then(() => history.push(`/pokemons`));
  }
 
  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      ... 
            <div className="card-image">
              <img src={pokemon.picture} alt={pokemon.name} style={{width: '250px', margin: '0 auto'}}/>
              <span className="btn-floating halfway-fab waves-effect waves-light">
                <i onClick={deletePokemon} className="material-icons">delete</i>
              </span>
            </div>
            ...
</form>
  );
};
  
export default PokemonForm;

On a ajouté un nouveau bouton de suppression de la ligne 18 à 20, et on l’a également relié à la méthode deletePokemon de la ligne 9, qui s’occupe pour nous d’appeler le service de pokémon et de supprimer ce pokémon de l’API Rest. Une fois le pokémon supprimé, l’utilisateur est redirigé vers la liste de tous les pokémons.

Bon, maintenant on peut supprimer les pokémons de notre application, mais petit à petit il va en rester aucun dans notre application… Et si on ajoutait un bouton permettant d’ajouter un Pokémon dans notre application ? Je dis ça, je dis rien. 😏

Pour rappel, si vous souhaitez repartir d’une base de données « vierge » avec nos douze pokémons de départ, remettez simplement en place le fichier db.json que je vous donne initialement au début de ce chapitre.