Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My branch #19

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ Nome dos integrantes:
Link do Surge: www.link.com.br

O que funciona:
- As rotas funcionam
- Item 2

- Funciona os routers das páginas, sendo possível navegar entre elas.
- É possível ver os detalhes de um pokemon
- A lista dos 20 primeiros pokemons estão sendo renderizadas na página home
- A lista dos pokemons na pokedex estão sendo renderizadas na página pokedex
- O conteudo se adapta a qualqer tamanho de tela
O que não funciona:
- O botao adicionar não funciona
- O botao remover não funciona

2 changes: 1 addition & 1 deletion pokedex/.eslintcache

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions pokedex/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions pokedex/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/logo-pokebola.jpg" />
<meta name="keyword" content="html5,css3,javascript, desenvolvimento-web, reponsividade, acessibilidade"/>
<meta name="description" content="Uma pokedex desenvolvida com react proporcioando uma experiencia de colecionar seus pokemons favortitos"/>
<meta name="author" content="Labenu"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo-pokebola.jpg.png" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
Expand All @@ -24,7 +29,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>PokeDex</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file added pokedex/public/logo-pokebola.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions pokedex/src/App.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react'
import Router from './router/Router'
import GlobalState from './Global/GlobalState.js'
import GlobalState from './global/GlobalState.js.js'

const App = () => {
return (
<div className="App">
<React.Fragment>
<GlobalState>
<Router />
</GlobalState>
</div>
</GlobalState>
</React.Fragment>
);
}

Expand Down
31 changes: 0 additions & 31 deletions pokedex/src/Global/GlobalState.js.js

This file was deleted.

113 changes: 66 additions & 47 deletions pokedex/src/components/DetailsCard/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ 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)=>{
setData(res.data)
}).catch((err)=>{
Expand All @@ -18,54 +20,71 @@ const DetailsCard = (props) => {
getPokeDetails()
}, [])

return(
<div>
<DetailsFlexBox>
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])


<ImgFlexBox>
<PokeImgContainer>
{/*Front img pokemon */}
{data.sprites && <img src={data.sprites.front_default} height="300px" alt=""/>}
</PokeImgContainer>
<PokeImgContainer>
{/*Back img pokemon */}
{data.sprites && <img src={data.sprites.back_default} height="300px" alt=""/>}
</PokeImgContainer>
</ImgFlexBox>
<StatsFlexBox>
<PokeStatsContainer>
<h3>Stats</h3>
<div>
{data.stats && data.stats.map((stat) => {
return <p key={stat.stat.name}><strong>{stat.stat.name}: </strong>{stat.base_stat}</p>
})}
</div>
</PokeStatsContainer>
</StatsFlexBox>
<TypeMovesFlexBox>
<PokeTypeContainer>
<h3>Type: </h3>
{data.types && data.types.map((type) => {
return <p>{type.type.name}</p>
})}
</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>}
</PokeMovesContainer>
</TypeMovesFlexBox>
</DetailsFlexBox>
</div>

return(
<React.Fragment>
<DetailsFlexBox role="main">
<ImgFlexBox role="div">
<PokeImgContainer role="div">
{/*Get front img pokemon */}
{data.sprites && <img
role="img" src={data.sprites.front_default}
height="300px" alt=""/>}
</PokeImgContainer >
<PokeImgContainer role="div">
{/*Get back img pokemon */}
{data.sprites && <img
role="img" src={data.sprites.back_default}
height="300px" alt=""/>}
</PokeImgContainer>
</ImgFlexBox >
<TypeMovesFlexBox role="div">
<PokeTypeContainer role="div">
<h3 role="h3">Type: </h3>
{data.types && data.types.map((type) => {
return <p>
{type.type.name}
</p>
})}
</PokeTypeContainer>
<PokeMovesContainer roles="div">
<h3 role="h3">Moves</h3>
{moves && moves.map((moves) => {
return <p>{moves}</p>
})}
</PokeMovesContainer >
</TypeMovesFlexBox >
<StatsFlexBox role="div">
<PokeStatsContainer roles="div">
<h3 role="h3">Stats</h3>
<React.Fragment>
{data.stats && data.stats.map((stat) => {
return <p role="p"
key={stat.stat.name}>
<strong>{stat.stat.name}:
</strong>{stat.base_stat}
</p>
})}
</React.Fragment>
</PokeStatsContainer >
</StatsFlexBox >
</DetailsFlexBox>
</React.Fragment>
)
}

export default DetailsCard;
112 changes: 72 additions & 40 deletions pokedex/src/components/PokeCard/PokeCard.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,79 @@
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 pokemonPhoto = () => {
axios.get(props.pokemon.url).then((response) => {
setPhoto(response.data.sprites.front_default)
}).catch((error) => {
console.log(error.message)
})
}

useEffect(() => {
pokemonPhoto()
}, [])

return(
<div>
<PokeCardContainer >
<img
src={photo}
alt={props.pokemon.name}/>
<p>{props.pokemon.name}</p>
<DetailsBtnContainer>
<Button Button variant="outlined">
Adicionar
</Button>
</DetailsBtnContainer>

<DetailsBtnContainer>
<Button variant="outlined"
onClick={()=>goToDetailsPage(history, props.pokemon.name)}>
Ver detalhes
</Button>
</DetailsBtnContainer>
</PokeCardContainer>
</ div>
)
const PokeCard = (props) => {
const history = useHistory();

const [photo, setPhoto] = useState ([])
const {states, setters, requests} = useContext(GlobalStateContext)

const pokemonPhoto = () => {
axios.get(props.pokemon.url).then((response) => {
setPhoto(response.data.sprites.front_default)
}).catch((error) => {
console.log(error.message)
})
}

useEffect(() => {
pokemonPhoto()
}, [])

const addToPokedex = () => {
const pokeIndex = states.pokemonList.findIndex((item) => item.name === props.pokemon.name)
const newPokemonList = [...states.pokemonList]
newPokemonList.splice(pokeIndex, 1)

const newPokedexList = [...states.pokedex, props.pokemon]
const orderedList = newPokedexList.sort((a, b) => {
return Number(a.url.slice(34,a.url.length-1)) - Number(b.url.slice(34,b.url.length-1))
})

setters.setPokedex(orderedList)
setters.setPokemonList(newPokemonList)
}

const removeFromPokedex = () => {
const pokeIndex = states.pokedex.findIndex((item) => item.name === props.pokemon.name)
const newPokedexList = [...states.pokedex]
newPokedexList.splice(pokeIndex, 1)

const newPokemonList = [...states.pokemonList, props.pokemon]
const orderedList = newPokemonList.sort((a, b) => {
return Number(a.url.slice(34,a.url.length-1)) - Number(b.url.slice(34,b.url.length-1))
})

setters.setPokedex(newPokedexList)
setters.setPokemonList(orderedList)
}

return(
<React.Fragment>
<PokeCardContainer role="div">
<img
src={photo}
alt={props.pokemon.name}/>
<p>{props.pokemon.name}</p>
<DetailsBtnContainer role="div">
<Button roles="button" variant="outlined"
onClick={props.isPokedex ? removeFromPokedex : addToPokedex}>
{props.isPokedex ? "Remover" : "Adicionar"}
</Button>
</DetailsBtnContainer >

<DetailsBtnContainer role="div">
<Button role="button" variant="outlined"
onClick={()=>goToDetailsPage(history, props.pokemon.name)}>
Ver detalhes
</Button>
</DetailsBtnContainer>
</PokeCardContainer>
</ React.Fragment>
)
}
export default PokeCard;
1 change: 1 addition & 0 deletions pokedex/src/constants/urls/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
//URL base da poke api que contem os dados dos pokemons
export const baseURL = "https://pokeapi.co/api/v2/pokemon"
Loading