funções de adicionar a pokedex e remover da pokedex ainda em construção

pokedex/src/Global/GlobalState.js.js

@@ -12,6 +12,7 @@ const GlobalState = (props) => {
 
     axios.get(baseURL).then(response => {
       setPokemonList(response.data.results)
+      setPokedex(response.data.results)
   })
   .catch(error =>{console.log(error)})
 }

pokedex/src/components/DetailsCard/index.js

@@ -5,6 +5,7 @@ import { baseURL } from '../../constants/urls'
 
 const DetailsCard = (props) => {
   const [data, setData] = useState({})
+  const [moves, setMoves] = useState([])
 
   const getPokeDetails = () => {
     axios.get(`${baseURL}/${props.pokemon.pokemon}`).then((res)=>{
@@ -18,6 +19,20 @@ const DetailsCard = (props) => {
     getPokeDetails()
   }, [])
 
+  const renderMoves = () => {
+    const newMoves = []
+    if (data.moves) {
+      for (let i=0; (i < 7 && i < data.moves.length); i++){
+        newMoves.push(data.moves[i].move.name)
+      }
+      setMoves(newMoves)
+    }
+  }
+
+  useEffect(() => {
+    renderMoves()
+  }, [data])
+
   return(
     <div>
           <DetailsFlexBox>
@@ -51,16 +66,9 @@ const DetailsCard = (props) => {
               </PokeTypeContainer>
               <PokeMovesContainer>
                   <h3>Moves</h3>
-                  {data.moves && <div>
-                    <p>{data.moves[0].move.name}</p>
-                    <p>{data.moves[1].move.name}</p>
-                    <p>{data.moves[2].move.name}</p>
-                    <p>{data.moves[3].move.name}</p>
-                    <p>{data.moves[4].move.name}</p>
-                    <p>{data.moves[5].move.name}</p>
-                    <p>{data.moves[6].move.name}</p>
-                    <p>{data.moves[7].move.name}</p>
-                    </div>}
+                  {moves && moves.map((moves) => {
+                    return <p>{moves}</p>
+                  })}
             </PokeMovesContainer>
           </TypeMovesFlexBox>
       </DetailsFlexBox>

pokedex/src/components/PokeCard/PokeCard.js

@@ -1,15 +1,24 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { DetailsBtnContainer,PokeCardContainer} from '../../styles/styles'
 import {Button} from '@material-ui/core'
 import { useHistory } from "react-router-dom";
 import {goToDetailsPage} from '../../router/Coordinator'
 import axios from 'axios'
+import GlobalStateContext from '../../Global/GlobalStateContext';
 
 export default function PokeCard (props) {
   const history = useHistory();
 
   const [photo, setPhoto] = useState ([])
 
+  const {states, setters, requests} = useContext(GlobalStateContext)
+
+  const removePokeFromPokedex = (poke) => {
+    const index = states.pokedex.findIndex((pokemon) => poke.name === pokemon.name)
+    const newPokedex = states.pokedex.splice(index, 1)
+    console.log(newPokedex)
+  }
+
   const pokemonPhoto = () => {
     axios.get(props.pokemon.url).then((response) => {
         setPhoto(response.data.sprites.front_default)
@@ -30,7 +39,8 @@ export default function PokeCard (props) {
            alt={props.pokemon.name}/>
           <p>{props.pokemon.name}</p>    
         <DetailsBtnContainer>
-            <Button Button variant="outlined">
+            <Button Button variant="outlined"
+              onCLick={() => removePokeFromPokedex(props.pokemon)}>
               Adicionar
             </Button>
       </DetailsBtnContainer>

pokedex/src/screens/PokeDexPage/index.js

@@ -3,12 +3,17 @@ import {Header} from '../../styles/styles'
 import { useHistory } from "react-router-dom";
 import {Button} from '@material-ui/core'
 import {ButtonContainer, HomeFlexBox} from '../../styles/styles'
-import {goToHomePage } from '../../router/Coordinator'
+import {goToHomePage} from '../../router/Coordinator'
 import {PokeLogo} from '../../assets/img/PokeLogo'
+import PokeCard from '../../components/PokeCard/PokeCard';
+import { useContext } from 'react';
+import GlobalStateContext from '../../Global/GlobalStateContext';
 
 const PokeDexPage = () => {
   const history = useHistory();
 
+  const {states, setters, requests} = useContext(GlobalStateContext)
+
   return(
     <div>
       <Header>
@@ -23,6 +28,11 @@ const PokeDexPage = () => {
           <img src={PokeLogo} />
       </Header>
       <HomeFlexBox>
+      {states.pokedex && 
+          states.pokedex.map((pokemon) => {
+            return (<PokeCard key={pokemon.name} pokemon={pokemon}/>)
+          })
+        }
       </HomeFlexBox>
     </div>
   )