2. Ajouter une propriété calculée pour les dates

Nous allons mettre en place une nouvelle propriété calculée pour la date de création d’un pokémon. Nous voulons afficher cette date au format « jj/mm/aaaa », comme ceci :

La date de création d’un pokémon est plus agréable à lire pour l’utilisateur.

Pour se faire, nous allons avoir besoin d’une fonction au sein de notre composant PokemonCard, afin d’effectuer cette transformation. Ouvrez-donc le fichier pokemon-card.tsx, et ajoutons-lui les modifications suivantes :

// ...

const PokemonCard: FunctionComponent<Props> = ({pokemon, borderColor = '#009688'}) => {

  // ...

  const formatDate = (date: Date): string => {
    return `${date.getDate()}/${date.getMonth()+1}/${date.getFullYear()}`;
  }

  return (
    <div className="col s6 m4" onMouseEnter={showBorder} onMouseLeave={hideBorder}>
      <div className="card horizontal" style={{ borderColor: color }}>
        <div className="card-image"> 
          <img src={pokemon.picture} alt={pokemon.name}/>
        </div>
        <div className="card-stacked">
          <div className="card-content">
            <p>{pokemon.name}</p>
            <p><small>{formatDate(pokemon.created)}</small></p>
          </div>
        </div>
      </div> 
    </div>
  );
}

export default PokemonCard;

En premier lieu, de la ligne 7 à 9, on ajoute la méthode formatDate, qui sera la méthode chargé d’afficher notre date correctement pour l’utilisateur. Cette méthode prend en paramètre une date, et retourne une chaîne de caractère correspondant au format jour/mois/année. Ensuite à la ligne 20, on utilise cette méthode formatDate dans notre DOM virtuel, afin de lui passer la date de création du pokémon. Au final, ce sera la date au bon format qui sera affichée à cet endroit. La propriété created d’un pokémon est donc devenue une propriété calculée.

Dans la méthode formatDate, on ajoute « +1 » à la méthode getMonth, car en JavaScript cette fonction retourne le numéro d’un mois en commençant par zéro. Ainsi, le mois de Janvier renvoie 0, et Décembre renvoie 11… Il faut donc incrémenter cette valeur de 1 pour obtenir le numéro du mois à afficher à l’utilisateur.