Skip to content

Add botão voltar #21

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.

Sign up for GitHub

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

Open
franciane-brito wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add botão voltar #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 0 additions & 70 deletions projeto-pokedex/src/Components/CardPokemon/CardPokemon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,74 +67,4 @@ const CardPokemon = (props) => {
);
};
export default CardPokemon;
/*
import React, { useContext } from "react";
import { useHistory } from "react-router-dom";
import GlobalStateContext from "../../Global/GlobalStateContext";
import { goToPokeDetails } from "../../Router/Coordinator";
import ButtonProps from "../../Components/Buttons/Button";
import { CardContainer, CardImg, CardName, Img, CardButton } from "./styled";

const CardPokemon = (props) => {
const { states, setters } = useContext(GlobalStateContext);
const { image, name } = props;
const history = useHistory();

const addToPokedex = (newPokemon) => {
const index = states.pokemonsHome.findIndex((i) => i.id === newPokemon.id);
const newPokedex = [...states.pokedexList, newPokemon];
setters.setPokedexList(newPokedex);
states.pokemonsHome.splice(index, 1);
};

const removeFromPokedex = (newPokemon) => {
const index = states.pokedexList.findIndex((i) => i.id === newPokemon.id);
const newPokedex = [...states.pokemonsHome, newPokemon];
setters.setPokemonsHome(newPokedex);
states.pokedexList.splice(index, 1);
};

const ButtonToChange =
history.location.pathname === "/" ? (
<ButtonProps
title="ADD"
type="button"
class="nes-btn is-primary"
bgColor="#a02dff"
radiusL="20px"
functionButton={() => addToPokedex(props.pokemon)}
/>
) : (
<ButtonProps
title="REMOVE"
type="button"
class="nes-btn is-primary"
bgColor="#a02dff"
radiusL="20px"
functionButton={() => removeFromPokedex(props.pokemon)}
/>
);

return (
<CardContainer>
<CardImg>
<Img src={image} alt={name} />
</CardImg>
<CardName>{name}</CardName>
<CardButton>
{ButtonToChange}
<ButtonProps
title="INFO"
type="button"
class="nes-btn is-primary"
bgColor="#000065"
radiusR="20px"
pokemon={props.pokemon}
functionButton={() => goToPokeDetails(history, props.id)}
/>
</CardButton>
</CardContainer>
);
};

export default CardPokemon; */
8 changes: 7 additions & 1 deletion projeto-pokedex/src/Router/Coordinator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,10 @@ export const goToPokeDetails = (history, id) => {

export const goToHome = (history) => {
history.push("/");
};
};

export const goToBack = (history) => {
history.go(-1)
};


3 changes: 2 additions & 1 deletion projeto-pokedex/src/Router/Router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import PokemonDetailsPage from "../Screens/PokemonDetailsPage";
const Router = () => {
return (
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/">
<Header />
<HomePage />
</Route>
<Route exact path="/pokedex">
<Header />
<PokedexPage />
</Route>
<Route exact path="/pokemon-details/:id">
Expand Down
82 changes: 43 additions & 39 deletions projeto-pokedex/src/Screens/PokemonDetailsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React, { useState, useEffect, useContext } from "react";
import React, { useEffect, useContext } from "react";
import styled from "styled-components";
import { BASE_URL } from "../Constant/Constant";
import axios from "axios"
import GlobalStateContext from "../Global/GlobalStateContext";
import { useParams, useHistory } from "react-router-dom";
import { goToBack } from "../Router/Coordinator"

const ContainerContent = styled.div`
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
font-family: "Lato";
margin: 0;

`;
const ContainerDetails = styled.div`
width: 30vw;
Expand Down Expand Up @@ -108,29 +110,30 @@ const Image = styled.img`
width: 15vw;
margin-bottom: 25px;
background-color: #D6F9EB;
/* opacity: 0.5; */
`;
const HeaderDetails = styled.div`
display: flex;
justify-content: space-between;
width: 100vw;
padding: 20px;
align-items:
const HeaderDetails = styled.div`
height: 10vh;
width: 100%;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: solid 2px #dedede;
padding: 0 35px;
`
const ContainerPokemon = styled.div`
display: flex;
align-items: center;
display: flex;
align-items: center;
`
const Progress = styled.progress`
width: 27.5vw;
height: 3vh;
width: 27.5vw;
height: 3vh;
`

const PokemonDetailsPage = () => {
const params = useParams()
const history = useHistory()
const history = useHistory()
const { states, setters, requests } = useContext(GlobalStateContext);


const detailsPokemon = () => {
axios
Expand All @@ -157,43 +160,44 @@ const PokemonDetailsPage = () => {
requests.getPokemons();
}, [states, setters, requests]);



const removeOrAdd = (newPokemon) => {

if(states.pokedexList.findIndex((item) => item.id === newPokemon.id)) {
console.log("Chamei a função")
removeFromPokedex(newPokemon)
} else {
console.log("Vou remover da pokedex")
addToPokedex(newPokemon)
const removeOrAdd = (newPokemon) => {

if (states.pokedexList.findIndex((item) => item.id === newPokemon.id)) {
console.log("Chamei a função")
removeFromPokedex(newPokemon)
} else {
console.log("Vou remover da pokedex")
addToPokedex(newPokemon)
}
}
}

const addToPokedex = (newPokemon) => {
const index = states.pokemonsHome.findIndex((i) => i.id === newPokemon.id);
const newPokedex = [...states.pokedexList, newPokemon];
setters.setPokedexList(newPokedex);
states.pokemonsHome.splice(index, 1);
};
const addToPokedex = (newPokemon) => {
const index = states.pokemonsHome.findIndex((i) => i.id === newPokemon.id);
const newPokedex = [...states.pokedexList, newPokemon];
setters.setPokedexList(newPokedex);
states.pokemonsHome.splice(index, 1);
};



const removeFromPokedex = (newPokemon) => {
const index = states.pokedexList.findIndex((i) => i.id === newPokemon.id);
const newPokedex = [...states.pokemonsHome, newPokemon];
setters.setPokemonsHome(newPokedex);
states.pokedexList.splice(0, 1);
};
const removeFromPokedex = (newPokemon) => {
const index = states.pokedexList.findIndex((i) => i.id === newPokemon.id);
const newPokedex = [...states.pokemonsHome, newPokemon];
setters.setPokemonsHome(newPokedex);
states.pokedexList.splice(0, 1);
};

let movesThree = states.moves.slice(0, 3)

return (
<ContainerContent>

<HeaderDetails>
<button type="button" class="nes-btn is-primary" onClick={() => { goToBack(history) }}> Voltar</button>
<h1>{states.name}</h1>
<button type="button" class="nes-btn is-success" onClick={() => {removeOrAdd(states.pokemon)}}>Adicionar/RemoverPokedex</button>
<button type="button" class="nes-btn is-success" onClick={() => { removeOrAdd(states.pokemon) }}>Adicionar/RemoverPokedex</button>
</HeaderDetails>
<ContainerPokemon>
<ImageOne>
Expand All @@ -204,7 +208,7 @@ const removeFromPokedex = (newPokemon) => {
</Front>

<Back>
<h1>{states.name}</h1>
<h1>{states.name}</h1>
<Image src={states.image.back_default} />
</Back>
</ImageOne>
Expand Down