3. Créer notre formulaire

Nous allons donc commencer par créer la partie statique de notre formulaire, c’est-à-dire seulement la partie responsable de l’affichage. Il n’y aura pas de logique propre à notre formulaire pour le moment.

Créer donc un fichier pokemon-form.tsx dans le dossier components :

import React, { FunctionComponent } from 'react';
import Pokemon from '../models/pokemon';
import formatType from '../helpers/format-type';

type Props = {
  pokemon: Pokemon
};

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

  const types: string[] = [
    'Plante', 'Feu', 'Eau', 'Insecte', 'Normal', 'Electrik',
    'Poison', 'Fée', 'Vol', 'Combat', 'Psy'
  ];
 
  return (
    <form>
      <div className="row">
        <div className="col s12 m8 offset-m2">
          <div className="card hoverable"> 
            <div className="card-image">
              <img src={pokemon.picture} alt={pokemon.name} style={{width: '250px', margin: '0 auto'}}/>
            </div>
            <div className="card-stacked">
              <div className="card-content">
                {/* Pokemon name */}
                <div className="form-group">
                  <label htmlFor="name">Nom</label>
                  <input id="name" type="text" className="form-control"></input>
                </div>
                {/* Pokemon hp */}
                <div className="form-group">
                  <label htmlFor="hp">Point de vie</label>
                  <input id="hp" type="number" className="form-control"></input>
                </div>
                {/* Pokemon cp */}
                <div className="form-group">
                  <label htmlFor="cp">Dégâts</label>
                  <input id="cp" type="number" className="form-control"></input>
                </div>
                {/* Pokemon types */}
                <div className="form-group">
                  <label>Types</label>
                  {types.map(type => (
                    <div key={type} style={{marginBottom: '10px'}}>
                      <label>
                        <input id={type} type="checkbox" className="filled-in"></input>
                        <span>
                          <p className={formatType(type)}>{ type }</p>
                        </span>
                      </label>
                    </div>
                  ))}
                </div>
              </div>
              <div className="card-action center">
                {/* Submit button */}
                <button type="submit" className="btn">Valider</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  );
};
 
export default PokemonForm;

Ne vous laissez pas impressionner par la quantité importante de code !

Il s’agit majoritairement de code HTML, agrémenté de certaines classes de la librairie Materialize, afin de donner un aspect plus sympathique au formulaire. 😇

Même si nous connaissons déjà le rôle de la plupart du code de ce composant, nous devons voir quelques explications supplémentaires pour être sûr de ne rien rater.

D’abord, à la ligne 11, on déclare une constante types, qui doit contenir tous les types de pokémons disponibles, afin de les afficher dans le formulaire.

Ensuite, de la ligne 27 à 30, on déclare le champ du formulaire permettant d’éditer le nom d’un pokémon. Les classes form-group et form-control appartiennent à Materialize, et sont responsables de l’apparence de ce champ d’édition. Remarquez également que l’attribut for du DOM pour la balise label, devient htmlFor en JSX. Le fonctionnement des autres champs est identiques, exceptés qu’il s’agit de champ de type number plutôt que text, car les points de vie et les dégâts d’un pokémon sont des chiffres.

Enfin, de la ligne 42 à 54, on met en place un champ un peu plus complexe pour les types des pokémons. Nous itérons sur le type des pokémons, afin d’afficher une liste de case à cocher, chacun associer avec un type précis. Et à la ligne 49, nous utilisons notre méthode formatType pour afficher une petite bulle de couleur en fonction du type à afficher. Le rendu est plus agréable pour l’utilisateur que de simplement afficher le texte du type.

Voilà, nous avons déjà une base pour notre formulaire. Prochainement, nous allons devoir rendre ce formulaire fonctionnel. Mais avant, nous devons relier ce formulaire avec le reste de notre application, car pour l’instant il est totalement invisible dans notre navigateur !