update project

Author: ManoaRRR

src/App.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import PokemonCard from './components/pokemon-card';
 import './App.css';
 import PokemonList from './pages/pokemon-list';
 
@@ -10,6 +9,4 @@ const App: FunctionComponent = () => {
   </>
   )
 }
-
 export default App;
- 

src/components/pokemon-card.css

@@ -1,4 +1,4 @@
 .horizontal{
-    border : solid 4px #270b0b;
+    border : solid 4px ;
     height : 200px;
 }

src/components/pokemon-card.tsx

@@ -1,22 +1,39 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import Pokemon from '../models/pokemon';
 import './pokemon-card.css';
-type Props = {
-  pokemon: Pokemon
+import formatDate from '../helpers/formatDate';
+import formatType from '../helpers/formatType';
+type Props = {//methodes pour les props
+  pokemon: Pokemon,
+  borderColor ? : string //couleur des bordures par défaut
 };
 
-const PokemonCard: FunctionComponent<Props> = ({ pokemon }) => {
+const PokemonCard: FunctionComponent<Props> = ({ pokemon, borderColor = 'red' }) => { //methode pour les props
+  const [color, setColor] = useState <string>();
+  
+  const showBorder = () => {
+    setColor(borderColor);
+  }
+  const hideBorder = ()=>{
+    setColor("#f5f5f5");
+  }
 
   return (
-    <div className="col s6 m4">
-      <div className="card horizontal">
+    <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>{pokemon.created.toString()}</small></p>
+            <p><small>{formatDate(pokemon.created)}</small></p>
+               
+                {pokemon.types.map(type=>(
+                    <span key={type} className={formatType(type)}> {type}</span>
+                    ))} 
+          
           </div>
         </div>
       </div>

src/helpers/formatDate.ts

@@ -0,0 +1,4 @@
+function formatDate(date: Date) : string{
+    return `${date.getFullYear()}/ ${date.getMonth()+1} / ${date.getDay()}`;
+}   
+export default formatDate;

src/helpers/formatType.ts

@@ -0,0 +1,43 @@
+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;

src/pages/pokemon-list.tsx

@@ -3,25 +3,27 @@ import Pokemon from '../models/pokemon';
 import POKEMONS from '../models/mock-pokemon';
 import PokemonCard from '../components/pokemon-card';
 
-const PokemonList: FunctionComponent = () => {
-  const [pokemons, setPokemons] = useState<Pokemon[]>([]);
+  const PokemonList: FunctionComponent = () => {
+  const [pokemons, setPokemons] = useState<Pokemon[]>([]);// variable d'état avec un type de tableau de pokemon, initié a un tableau vide
 
-  useEffect(() => {
-    setPokemons(POKEMONS);
+  
+  //equivalent de componentDidMount 
+  useEffect(() => { //methode pour cycle de vie d'un composant 
+    setPokemons(POKEMONS);//insertion dans la variable setPokemons 
   }, []);
 
-  return (
+  return ( //le code jsx , utilise le framework MATERIALIZE
     <div>
       <h1 className="center">Pokédex</h1>
       <div className="container"> 
         <div className="row"> 
-        {pokemons.map(pokemon => (
-          <PokemonCard key={pokemon.id} pokemon={pokemon}/>
-        ))}
+          {pokemons.map(pokemon => (//lister les éléments dans un tableau
+            <PokemonCard key={pokemon.id} pokemon={pokemon}/>
+          ))}
         </div>
       </div>
     </div> 
   );
 }
 
-export default PokemonList;
+export default PokemonList;