7. Sauvegarder les modifications de l’utilisateur

Bien, nous avons ajouté une méthode permettant de persister les modifications effectuées sur un Pokémon, il faut maintenant nous en servir ! Pour cela, nous allons modifier la méthode qui gère la soumission du formulaire d’édition des Pokémons, dans pokemon-form.tsx :

// Les autres importations
import PokemonService from '../services/pokemon-service';

// ...

const PokemonForm: FunctionComponent<Props> = ({pokemon}) => {
  // ...

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const isFormValid = validateForm();
    if(isFormValid) {
      pokemon.name = form.name.value;
      pokemon.hp = form.hp.value;
      pokemon.cp = form.cp.value;
      pokemon.types = form.types.value;
      PokemonService.updatePokemon(pokemon).then(() => history.push(`/pokemons/${pokemon.id}`));
    }
  }

  return (
    ...
  );
};
 
export default PokemonForm;

La méthode handleSubmit persiste les modifications effectuées sur le pokémon, lors de la soumission du formulaire. Avant d’envoyer la requête HTTP, on vérifie rapidement que le formulaire est valide, et on récupère les dernières données du pokémon depuis le state, de la ligne 13 à 16. Ensuite, appelle la méthode updatePokemon que nous venons de développer, et on redirige l’utilisateur vers la page détaillant ce Pokémon grâce au Hook useHistory. En arrivant sur cette nouvelle page, l’utilisateur verra que ses dernières modifications ont bien été prisent en compte.

Rafraîchissez le navigateur et réessayer de modifier un Pokémon. Les changements réalisés via le formulaire devraient maintenant être persistés ! Hourra ! 🎉

Pour sauvegarder les données de notre API Rest, la librairie json-server écrit les modifications directement dans le fichier db.json. Si plus tard vous voulez repartir sur des données « vierge » pour tester votre application avec les douze pokémons que je vous donne au départ, et bien remettez simplement en place le fichier db.json que je vous donne initialement au début de ce chapitre.