From 944c9eac83cad407af12ea01bdaa2d123d3d078d Mon Sep 17 00:00:00 2001
From: Alex Gutierrez <gutierrez.lx@gmail.com>
Date: Thu, 22 Apr 2021 14:41:25 -0700
Subject: [PATCH] fix/refac(list-item/home): refactored list item component to
 receive a pokemon prop. resolved issue #4

---
 src/components/ListItem.tsx | 19 +++++++++----------
 src/pages/Home.tsx          | 23 ++---------------------
 2 files changed, 11 insertions(+), 31 deletions(-)

diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
index 6246bbd..e649e87 100644
--- a/src/components/ListItem.tsx
+++ b/src/components/ListItem.tsx
@@ -2,24 +2,23 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 interface ListItemProps {
-  poke: Pokemon;
-  index: number;
+  pokemon: Pokemon;
 }
 
-const ListItem: React.FC<ListItemProps> = ({ poke, index }) => {
+const ListItem: React.FC<ListItemProps> = ({ pokemon }) => {
   return (
-    <li
-      className='list-group-item d-flex justify-content-around align-items-center'
-      key={index}>
+    <li className='list-group-item d-flex justify-content-around align-items-center'>
       {/* section img pulled to left */}
-      <img src={poke.img} alt={poke.name} />
+      <img src={pokemon.img} alt={pokemon.name} />
       <div className='poke-info'>
         <h2>
-          <Link to={`/pokemon/${poke.name.toLowerCase()}`}>{poke.name}</Link>
+          <Link to={`/pokemon/${pokemon.name.toLowerCase()}`}>
+            {pokemon.name}
+          </Link>
         </h2>
         <div>
-          <small>Height: {poke.height}</small>
-          <small>Weight: {poke.weight}</small>
+          <small>Height: {pokemon.height}</small>
+          <small>Weight: {pokemon.weight}</small>
         </div>
       </div>
       {/* section pokemon name that is wrapped in a link */}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ac33451..8ac9ca0 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, ChangeEvent } from 'react';
 import { Link } from 'react-router-dom';
 import { pokemonData } from '../data/pokemonData';
+import ListItem from '../components/ListItem';
 
 const HomePage: React.FC = () => {
   const [pokemon, setPokemon] = useState<Pokemon[]>(pokemonData);
@@ -52,27 +53,7 @@ const HomePage: React.FC = () => {
         <div className='col'>
           <ul className='list-group'>
             {pokemon.map((poke, index) => {
-              return (
-                <li
-                  className='list-group-item d-flex justify-content-around align-items-center'
-                  key={index}>
-                  {/* section img pulled to left */}
-                  <img src={poke.img} alt={poke.name} />
-                  <div className='poke-info'>
-                    <h2>
-                      <Link to={`/pokemon/${poke.name.toLowerCase()}`}>
-                        {poke.name}
-                      </Link>
-                    </h2>
-                    <div>
-                      <small>Height: {poke.height}</small>
-                      <small>Weight: {poke.weight}</small>
-                    </div>
-                  </div>
-                  {/* section pokemon name that is wrapped in a link */}
-                  {/* section for details under the pokemon name */}
-                </li>
-              );
+              return <ListItem pokemon={poke} key={index} />;
             })}
           </ul>
         </div>