From 79020b14757f0187335e847c32960bf215b19d23 Mon Sep 17 00:00:00 2001 From: carolfortuna <63572811+carolfortuna@users.noreply.github.com> Date: Wed, 20 Jul 2022 19:20:10 -0300 Subject: [PATCH] tentativa de consumir API falha --- pokedex/src/Pages/Home/Home.jsx | 92 ++++++++++++++- .../components/PokemonCard/PokemonCard.jsx | 107 +++++++++++++++++- pokedex/src/components/PokemonCard/styles.js | 53 ++++----- 3 files changed, 219 insertions(+), 33 deletions(-) diff --git a/pokedex/src/Pages/Home/Home.jsx b/pokedex/src/Pages/Home/Home.jsx index 2cd852c..74800e6 100644 --- a/pokedex/src/Pages/Home/Home.jsx +++ b/pokedex/src/Pages/Home/Home.jsx @@ -1,14 +1,100 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect} from 'react'; import styled from 'styled-components'; import axios from "axios" import {useNavigate} from "react-router-dom" import { PokemonCard } from '../../components/PokemonCard/PokemonCard'; function Home() { + const [pokemons, setPokemons] = useState([]) + // const [names, setNames] = useState([]) + const [details, setDetails]= useState([]) + + + useEffect(()=>{ + + getAllPokemons() + // getDetails() + },[] +) + +const getAllPokemons = () =>{ + axios.get('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0') + .then((response)=>{ + + setPokemons(response.data.results) + console.log(response.data.results) + console.log('poke', pokemons) + alert('SUCESSO') + }) + .catch((error)=>{ + console.log(error) + alert('erro') + + }) + +} +const names = pokemons.filter((item) => { + return item.name +}) + + +const getDetails = () =>{ +console.log('poke',pokemons) + names.map((item)=>{ + return( + axios.get(`https://pokeapi.co/api/v2/pokemon/${item}/`) + .then((response)=>{ + + setDetails([... details, response.data]) + console.log(response.data) + console.log('detalhes', details) + + }) + .catch((error)=>{ + console.log(error) + + }) + ) + + + }) +} +// let id +// const getOnePokemon = () =>{ +// for(let i=1; i< 21; i++){ +// // id = i; + +// axios.get(`https://pokeapi.co/api/v2/pokemon/${i}/`) +// .then((response)=>{ +// console.log(i) +// // setPokemons([..., response.data]) +// console.log(response.data) +// const lista = [...names, response.data.name] +// setNames(lista) +// // names.push(response.data.name) +// // num.push(response.data.id) +// console.log(names, num) + + +// }) +// .catch((error)=>{ +// console.log(error) +// alert('erro') + +// }) +// } + +// } + +const listCards = names.map((item)=>{ + return +}) + return ( -
- +
+ + {listCards}
) diff --git a/pokedex/src/components/PokemonCard/PokemonCard.jsx b/pokedex/src/components/PokemonCard/PokemonCard.jsx index ca4d761..12b7027 100644 --- a/pokedex/src/components/PokemonCard/PokemonCard.jsx +++ b/pokedex/src/components/PokemonCard/PokemonCard.jsx @@ -1,15 +1,114 @@ -import {Card, PhotoContainer, Background, ButtonType, DetalhesContainer, ButtonDiv} from './styles' +import { PhotoContainer, Background, ButtonType, DetalhesContainer, ButtonDiv} from './styles' import bulbasaur from './img/bulbasaur.png' import background from '../../components/PokemonCard/img/pokebola-bg.png' import folha from './img/folha.png' +import { useEffect, useState } from 'react' +import styled from 'styled-components' +import axios from 'axios'; -export const PokemonCard =()=>{ +const Card = styled.div` +color: white; +width: 420px; +height: 180px; +margin: 90px; +background-color: #729F92; +/* ${(props) => props.color}; */ +border-radius: 12px; +padding: 20px; + +& h1{ + font-family: sans-serif; +font-style: normal; +font-weight: 700; +font-size: 32px; +line-height: 39px; +margin-top: -20px; +} +& p{ + font-family: sans-serif; +font-style: normal; +font-weight: 700; +font-size: 16px; +line-height: 19px; + +} +` +export const PokemonCard =(props)=>{ + // const [pokemons, setPokemons] = useState([]) + + // useEffect(()=>{ + // axios.get('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0') + // .then((response)=>{ + + // // names.map((item)=>{ + // // console.log(response.data.results.name) + // // }) + // setPokemons(response.data.results) + // console.log(response.data.results) + // alert('SUCESSO') + // }) + // .catch((error)=>{ + // console.log(error) + // alert('erro') + + // }) + // },[] + // ) + + // const names = pokemons.map((item)=>{ + // return

{item.name}

+ // }) + // const [color, setColor] = useState('') + // const [type, setType] = useState('') + + // setType('Bug'); + + // const changeColor = () =>{ + // switch (type){ + // case 'Water': + // // return 'type-water' + // // break + // // case 'Bug': + // // return 'type-bug' + // // break + // // case 'Fire': + // // return 'type-fire' + // // break + // // default: + // // return 'type-water' + // return color='#71C3FF'; + // break; + + // case 'Fire': + // return color='#EAAB7D'; + // break; + + // case 'Bug': + // return color='#76A866' + // break; + + // case 'Grass': + // return color='#729F92' + // break; + + // case 'Normal': + // return color='#BF9762' + + // break; + + // default: + // return color='#D60F60' + + // } + // } + // {console.log(color, type)} + return (
- +

#01

-

Bulbasaur

+

{props.nome}

{/* */} diff --git a/pokedex/src/components/PokemonCard/styles.js b/pokedex/src/components/PokemonCard/styles.js index 1c1af92..6aa2e88 100644 --- a/pokedex/src/components/PokemonCard/styles.js +++ b/pokedex/src/components/PokemonCard/styles.js @@ -1,31 +1,32 @@ import styled from 'styled-components'; import background from './img/pokebola-bg.png' - -export const Card = styled.div` -color: white; -width: 420px; -height: 180px; -margin: 90px; -background: #729F92; -border-radius: 12px; -padding: 20px; -& h1{ - font-family: sans-serif; -font-style: normal; -font-weight: 700; -font-size: 32px; -line-height: 39px; -margin-top: -20px; -} -& p{ - font-family: sans-serif; -font-style: normal; -font-weight: 700; -font-size: 16px; -line-height: 19px; - -} +// import {changeColor} from './PokemonCard' + +// export const Card = styled.div` +// color: white; +// width: 420px; +// height: 180px; +// margin: 90px; +// /* background-color: {changeColor}; */ +// border-radius: 12px; +// padding: 20px; +// & h1{ +// font-family: sans-serif; +// font-style: normal; +// font-weight: 700; +// font-size: 32px; +// line-height: 39px; +// margin-top: -20px; +// } +// & p{ +// font-family: sans-serif; +// font-style: normal; +// font-weight: 700; +// font-size: 16px; +// line-height: 19px; + +// } /* & img { position: absolute; @@ -35,7 +36,7 @@ transform: rotate(30deg); opacity: 0.17; } */ -` + export const PhotoContainer = styled.div ` margin-left: 250px;