From 379f9ab64db10ecab4c50cfbdaeb50d2ebd80563 Mon Sep 17 00:00:00 2001
From: TiagoM13 <thyagomotha2000@gmail.com>
Date: Mon, 20 Feb 2023 11:47:07 -0300
Subject: [PATCH 1/3] feat: rename prop

---
 src/components/PokemonCard/index.tsx | 4 ++--
 src/interfaces/pokemonCard.ts        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PokemonCard/index.tsx b/src/components/PokemonCard/index.tsx
index 3ba75ea..0cf041c 100644
--- a/src/components/PokemonCard/index.tsx
+++ b/src/components/PokemonCard/index.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../utils/getTheme';
 import { TypeCard } from './TypeCard';
 
-export const PokemonCard = ({ name, order, types, url_img }: IPokemonCard) => {
+export const PokemonCard = ({ name, id, types, url_img }: IPokemonCard) => {
   return (
     <li
       style={{
@@ -23,7 +23,7 @@ export const PokemonCard = ({ name, order, types, url_img }: IPokemonCard) => {
         <div className="flex flex-col">
           <h3 className="font-black line-clamp-1 text-sm">{name}</h3>
           <span className="font-semibold text-xs">
-            {getNumberOrderFormat(order)}
+            {getNumberOrderFormat(id)}
           </span>
         </div>
         <div className="pt-2 font-semibold text-[10px]">
diff --git a/src/interfaces/pokemonCard.ts b/src/interfaces/pokemonCard.ts
index d59d272..582f127 100644
--- a/src/interfaces/pokemonCard.ts
+++ b/src/interfaces/pokemonCard.ts
@@ -1,5 +1,5 @@
 export interface IPokemonCard {
-  order: number;
+  id: number;
   name: string;
   url_img: string;
   types: {

From 253c0e17dedaf55d2d6ef7b6d16a8f2a92f329c6 Mon Sep 17 00:00:00 2001
From: TiagoM13 <thyagomotha2000@gmail.com>
Date: Mon, 20 Feb 2023 11:48:20 -0300
Subject: [PATCH 2/3] feat: add new sprites and update interface

---
 src/components/ListPokemon/index.tsx |  8 ++++---
 src/hooks/usePokemons.ts             |  2 ++
 src/interfaces/pokemons.ts           | 35 ++++++++++++++++++++++------
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/ListPokemon/index.tsx b/src/components/ListPokemon/index.tsx
index dcc85b1..71b61ce 100644
--- a/src/components/ListPokemon/index.tsx
+++ b/src/components/ListPokemon/index.tsx
@@ -26,8 +26,8 @@ export const ListPokemon = ({ data }: ListProps) => {
           {currentItems.map((pokemon) => {
             return (
               <PokemonCard
-                key={pokemon.data.order}
-                order={pokemon.data.order}
+                key={pokemon.data.id}
+                id={pokemon.data.id}
                 name={getFirstLetterCapitalized(pokemon.data.name)}
                 abilities={{
                   ability_1: pokemon.data.abilities[0]?.ability.name,
@@ -37,7 +37,9 @@ export const ListPokemon = ({ data }: ListProps) => {
                   type_1: pokemon.data.types[0].type.name,
                   type_2: pokemon.data.types[1]?.type.name,
                 }}
-                url_img={pokemon.data.sprites.front_default}
+                url_img={
+                  pokemon.data.sprites.other['official-artwork'].front_default
+                }
               />
             );
           })}
diff --git a/src/hooks/usePokemons.ts b/src/hooks/usePokemons.ts
index 4d13717..8e4459b 100644
--- a/src/hooks/usePokemons.ts
+++ b/src/hooks/usePokemons.ts
@@ -9,6 +9,8 @@ export const useGetPokemonsData = () => {
   const [loading, setLoading] = useState(false);
   const [pokemons, setPokemons] = useState<IPokemons[]>([]);
 
+  // console.log(pokemons);
+
   useEffect(() => {
     setLoading(true);
     getPokemons().finally(() => setLoading(false));
diff --git a/src/interfaces/pokemons.ts b/src/interfaces/pokemons.ts
index 5b3c7bd..5756842 100644
--- a/src/interfaces/pokemons.ts
+++ b/src/interfaces/pokemons.ts
@@ -2,16 +2,37 @@ export interface IPokemons {
   data: {
     id: number;
     name: string;
-    order: number;
-    sprites: {
-      back_default: string;
-      back_shiny: string;
-      front_default: string;
-      front_shiny: string;
-    };
+    sprites: ISprites;
     types: [{ type: { name: string } }, { type: { name: string } }];
     abilities: [{ ability: { name: string } }, { ability: { name: string } }];
     weight: number;
     height: number;
   };
 }
+
+interface ISprites {
+  front_default: string;
+  front_shiny: string;
+  other: {
+    dream_world: {
+      front_default: string;
+      front_female: string | null;
+    };
+    home: {
+      front_default: string;
+      front_shiny: string;
+    };
+    'official-artwork': {
+      front_default: string;
+    };
+  };
+  versions: {
+    'generation-v': {
+      'black-white': {
+        animated: {
+          front_default: string;
+        };
+      };
+    };
+  };
+}

From 0e5a66840071e6bc6775144604dae58750c7e15a Mon Sep 17 00:00:00 2001
From: TiagoM13 <thyagomotha2000@gmail.com>
Date: Mon, 20 Feb 2023 12:38:59 -0300
Subject: [PATCH 3/3] refactor: fixes and shortening the lines of code

---
 src/components/ListPokemon/index.tsx |  9 +--------
 src/components/PokemonCard/index.tsx | 21 +++++++++++----------
 src/interfaces/pokemonCard.ts        | 23 ++++++++++++++++-------
 src/interfaces/pokemons.ts           | 19 +++++++++++++++++--
 4 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/components/ListPokemon/index.tsx b/src/components/ListPokemon/index.tsx
index 71b61ce..b043b3c 100644
--- a/src/components/ListPokemon/index.tsx
+++ b/src/components/ListPokemon/index.tsx
@@ -29,14 +29,7 @@ export const ListPokemon = ({ data }: ListProps) => {
                 key={pokemon.data.id}
                 id={pokemon.data.id}
                 name={getFirstLetterCapitalized(pokemon.data.name)}
-                abilities={{
-                  ability_1: pokemon.data.abilities[0]?.ability.name,
-                  ability_2: pokemon.data.abilities[1]?.ability.name,
-                }}
-                types={{
-                  type_1: pokemon.data.types[0].type.name,
-                  type_2: pokemon.data.types[1]?.type.name,
-                }}
+                types={pokemon.data.types}
                 url_img={
                   pokemon.data.sprites.other['official-artwork'].front_default
                 }
diff --git a/src/components/PokemonCard/index.tsx b/src/components/PokemonCard/index.tsx
index 0cf041c..638c614 100644
--- a/src/components/PokemonCard/index.tsx
+++ b/src/components/PokemonCard/index.tsx
@@ -13,8 +13,8 @@ export const PokemonCard = ({ name, id, types, url_img }: IPokemonCard) => {
   return (
     <li
       style={{
-        backgroundColor: types.type_1
-          ? getTypesToBackgroundColor(types.type_1.toUpperCase())
+        backgroundColor: types[0].type.name
+          ? getTypesToBackgroundColor(types[0].type.name.toUpperCase())
           : '#9d9b9b',
       }}
       className="w-[200px] h-[160px] flex justify-between rounded-3xl p-2 m-1 text-white duration-500 cursor-pointer hover:shadow-md hover:shadow-slate-400 hover:brightness-100 hover:-translate-y-1 animate-reveal"
@@ -27,14 +27,15 @@ export const PokemonCard = ({ name, id, types, url_img }: IPokemonCard) => {
           </span>
         </div>
         <div className="pt-2 font-semibold text-[10px]">
-          <TypeCard
-            icon={`${types.type_1 && getTypesToIconsTypes(types.type_1.toUpperCase())}`}
-            type={types.type_1}
-          />
-          {types.type_2 && <TypeCard
-            icon={`${types.type_2 && getTypesToIconsTypes(types.type_2.toUpperCase())}`}
-            type={types.type_2}
-          />}
+          {types.map((type) => {
+            return (
+              <TypeCard
+                key={type.type.name}
+                icon={`${type.type.name && getTypesToIconsTypes(type.type.name.toUpperCase())}`}
+                type={type.type.name}
+              />
+            )
+          })}
         </div>
       </div>
       <div className="flex items-center h-full w-full">
diff --git a/src/interfaces/pokemonCard.ts b/src/interfaces/pokemonCard.ts
index 582f127..535d2fe 100644
--- a/src/interfaces/pokemonCard.ts
+++ b/src/interfaces/pokemonCard.ts
@@ -3,11 +3,20 @@ export interface IPokemonCard {
   name: string;
   url_img: string;
   types: {
-    type_1: string;
-    type_2?: string;
-  };
-  abilities: {
-    ability_1: string;
-    ability_2: string;
-  };
+    type: {
+      name: string;
+    };
+  }[];
+  abilities?: {
+    ability: {
+      name: string;
+    };
+  }[];
+  stats?: {
+    base_stat: number;
+    effort: number;
+    stat: {
+      name: string;
+    };
+  }[];
 }
diff --git a/src/interfaces/pokemons.ts b/src/interfaces/pokemons.ts
index 5756842..f42707d 100644
--- a/src/interfaces/pokemons.ts
+++ b/src/interfaces/pokemons.ts
@@ -3,10 +3,25 @@ export interface IPokemons {
     id: number;
     name: string;
     sprites: ISprites;
-    types: [{ type: { name: string } }, { type: { name: string } }];
-    abilities: [{ ability: { name: string } }, { ability: { name: string } }];
+    types: {
+      type: {
+        name: string;
+      };
+    }[];
+    abilities: {
+      ability: {
+        name: string;
+      };
+    }[];
     weight: number;
     height: number;
+    stats: {
+      base_stat: number;
+      effort: number;
+      stat: {
+        name: string;
+      };
+    }[];
   };
 }