Pour pouvoir mettre en place la navigation dans notre application, nous allons avoir besoin d’au moins deux composants qui affichent une page, afin de pouvoir naviguer d’une page à une autre. Or pour le moment, nous ne disposons que d’un seul composant qui affiche une liste de pokémons. Nous allons donc créer un deuxième composant, qui permettra d’afficher plus de détails d’un pokémon, lorsque l’on cliquera ce pokémon depuis la liste :
Remarquez la nouvelle route que nous allons devoir mettre en place pour accèder à cette page : /pokemons/4. Le chiffre 4 correspond à l’identifiant du pokémon à afficher.
Créeons donc un nouveau composant pokemon-detail.tsx, dans le dossier pages :
import React, { FunctionComponent, useState, useEffect } from 'react';
import { RouteComponentProps, Link } from 'react-router-dom';
import Pokemon from '../models/pokemon';
import POKEMONS from '../models/mock-pokemon';
import formatDate from '../helpers/format-date';
import formatType from '../helpers/format-type';
type Params = { id: string };
const PokemonsDetail: FunctionComponent<RouteComponentProps<Params>> = ({ match }) => {
const [pokemon, setPokemon] = useState<Pokemon|null>(null);
useEffect(() => {
POKEMONS.forEach(pokemon => {
if (match.params.id === pokemon.id.toString()) {
setPokemon(pokemon);
}
})
}, [match.params.id]);
return (
<div>
{ pokemon ? (
<div className="row">
<div className="col s12 m8 offset-m2">
<h2 className="header center">{ pokemon.name }</h2>
<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">
<table className="bordered striped">
<tbody>
<tr>
<td>Nom</td>
<td><strong>{ pokemon.name }</strong></td>
</tr>
<tr>
<td>Points de vie</td>
<td><strong>{ pokemon.hp }</strong></td>
</tr>
<tr>
<td>Dégâts</td>
<td><strong>{ pokemon.cp }</strong></td>
</tr>
<tr>
<td>Types</td>
<td>
{pokemon.types.map(type => (
<span key={type} className={formatType(type)}>{type}</span>
))}</td>
</tr>
<tr>
<td>Date de création</td>
<td>{formatDate(pokemon.created)}</td>
</tr>
</tbody>
</table>
</div>
<div className="card-action">
<Link to="/">Retour</Link>
</div>
</div>
</div>
</div>
</div>
) : (
<h4 className="center">Aucun pokémon à afficher !</h4>
)}
</div>
);
}
export default PokemonsDetail;
La plupart du code de ce composant est constitué de code JSX et d’autres concepts de React que nous avons déjà vu. Mais il y a plusieurs nouveautés que je me dois de vous présenter :
Voilà, je pense que vous avez toutes les explications nécessaires pour comprendre le code de ce composant. Prenez le temps de vous familiariser avec ce composant, et prochainement nous allons le raccorder avec le reste de notre application grâce à un système de route.
Pour le moment, notre composant ne fait rien, car il n’est pas relié au routeur de la librairie react-router-dom. Il n’est pas associer à une route, et est donc inaccessible depuis notre interface actuelle. Cependant, plus tard, lorsque nous naviguerons sur l’url : /pokemons/4, ce composant affichera le pokémon avec l’identifiant n°4.