4. Factoriser les comportements communs

Dans notre composant PokemonCard, nous avons maintenant deux méthodes bien pratiques pour mettre en forme nos dates et les types de nos pokémons. Jusque là, tout va bien.

Le problème que nous aurons plus tard, c’est si nous affichons un pokémon sur une autre page. Par exemple, une page de présentation plus précise pour chaque pokémon. Il faudra alors copier-coller nos méthodes formatDate et formatType, afin de profiter de la mise en forme de la date et des types. Mais ça en informatique, c’est interdit ! 🤯

Il faut donc factoriser les comportements communs dans un fichier à part, et les réutiliser à chaque fois que nous en auront besoin. Créons donc un premier fichier format-date.ts, dans un nouveau dossier helpers (à l’intérieur du dossier src) :

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

export default formatDate;

La méthode de formatage de date est désormais dans son propre fichier. Nous pouvons maintenant la réutiliser dans n’importe quel composant !

Heu… mais pourquoi le fichier format-date se termine par *.ts et non *tsx ?

Et bien, notre méthode est une simple fonction JavaScript, il n’y pas de DOM virtuel ou de lien direct avec React. En fait, l’extension tsx est une contraction de TypeScript et JSX. C’est l’extension que nous utilisons pour nos composants React. Mais ici, il s’agit d’un simple fichier JavaScript.

Et le dossier, pourquoi on l’a appelé « helpers » ?

Et bien, c’est un nom totalement arbitraire. Vous pouvez tout à fait nommé ce dossier comme vous voulez : commons, tools, etc. Toutefois, le terme helpers revient souvent dans les projets informatique pour désigner un dossier contenant plusieurs méthodes outils, pouvant être réutilisées à plusieurs endroits du projet.

Maintenant, nous allons importer la méthode formatDate dans le composant PokemonCard, et supprimer l’ancienne déclaration de formatDate, dans le fichier pokemon-card.tsx :

// N°1 : Ajouter l'importation suivante :
import formatDate from '../helpers/format-date';

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

  // N°2 : Supprimer cette méthode, nous n'en avons plus besoin.
  const formatDate = (date: Date): string => {
    return `${date.getDate()}/${date.getMonth()+1}/${date.getFullYear()}`;
  }

  return ( ... );
}

export default PokemonCard;

Nous avons alléger un peu le code de notre composant PokemonCard. Désormais, nous pouvons faire la même chose avec la méthode de formatage des types. On vas donc créer un nouveau fichier dans le dossier helpers, nommé format-type.ts (toujours dans le dossier src) :

const formatType = (type: string): string => {
  let color: string;

    switch (type) {
      case 'Feu': 
        color = 'red lighten-1'; 
        break; 
      case 'Eau': 
        color = 'blue lighten-1'; 
        break; 
      case 'Plante': 
        color = 'green lighten-1'; 
        break; 
      case 'Insecte': 
        color = 'brown lighten-1'; 
        break; 
      case 'Normal': 
        color = 'grey lighten-3'; 
        break; 
      case 'Vol': 
        color = 'blue lighten-3'; 
        break; 
      case 'Poison': 
        color = 'deep-purple accent-1'; 
        break; 
      case 'Fée': 
        color = 'pink lighten-4'; 
        break; 
      case 'Psy': 
        color = 'deep-purple darken-2'; 
        break; 
      case 'Electrik': 
        color = 'lime accent-1'; 
        break; 
      case 'Combat': 
        color = 'deep-orange'; 
        break; 
      default: 
        color = 'grey'; 
        break; 
    }

    return `chip ${color}`;
}

export default formatType;

Ensuite, il nous reste à effectuer la même opération que précédemment. On modifie donc à nouveau le composant pokemon-card.tsx, afin d’importer la méthode formatType depuis un autre fichier :

// N°1 : Ajouter l'importation suivante :
import formatType from '../helpers/format-type';

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

  // N°2 : Supprimer cette méthode, nous n'en avons plus besoin.
  const formatType = (type: string): string => {
    return ...;
  }

  return ( ... );
}

export default PokemonCard;

Nous avons maintenant factoriser le formatage de la date et les types d’un pokémon dans un fichier à part. Nous pourrons réutiliser ces méthodes dans autant de composants que nécessaires, sans avoir à les réécrire à chaque fois. De plus, si plus tard nous voulons modifier le format des dates dans notre application, nous pourrons le faire depuis un seul endroit. Pas besoin de parcourir toute l’application pour appliquer la modification partout. Et ça, c’est bien pratique pour la suite !