Skip to content

Commit

Permalink
Se le da funcionalidad a vista favoritos
Browse files Browse the repository at this point in the history
  • Loading branch information
@DannitaZz
DannitaZz committed Feb 1, 2022
1 parent 43e1fb3 commit b6202ae
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 74 deletions.
7 changes: 4 additions & 3 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ function App() {
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path='/' element={<Pokemon state={state} dispatch={dispatch} />} />
<Route exact path='/details' element={<Details state={state} dispatch={dispatch} />} />
<Route exact path='/favorites' element={<Favorites state={state} dispatch={dispatch} />} />
<Route exact path='/' element={<Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} dispatch={dispatch} />} />
{/* <Route exact path='/details' element={<Details state={state} dispatch={dispatch} />} /> */}
<Route exact path='/favorites' element={<Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} dispatch={dispatch} />} />
{/* <Route exact path='/favorites' element={<Favorites state={state} dispatch={dispatch} />} /> */}
</Routes>
</BrowserRouter>
</div>
Expand Down
15 changes: 9 additions & 6 deletions src/components/pages/pokemon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import ResponsiveAppBar from "../navbar"
import PaginationControlled from "../pagination"
import Pokelist from "../pokelist"

function Pokemon({state, dispatch}) {
function Pokemon({favs, actionName, data, page, dispatch}) {

const pokeCount = 898
const pageSize = 20;
const pageCount = Math.round(data.length / pageSize)

const bodyRepo = {
"query": `
Expand Down Expand Up @@ -34,8 +38,7 @@ function Pokemon({state, dispatch}) {
try {
const response = await axios({ method: "post", url: baseUrl, data: JSON.stringify(bodyRepo), headers: headers });
const fulldata = response.data.data.pokemon_v2_pokemon;
const data = fulldata.slice(0, 898);

const data = fulldata.slice(0, pokeCount);
dispatch({ type: 'getData', data: data });
} catch (error) {
console.error(error);
Expand All @@ -48,9 +51,9 @@ function Pokemon({state, dispatch}) {
return (
<>
<ResponsiveAppBar/>
<PaginationControlled state={state} dispatch={dispatch} />
<Pokelist state={state} data={state.currentData} dispatch={dispatch}/>
<PaginationControlled state={state} dispatch={dispatch} />
<PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
<Pokelist favs={favs} pageSize={pageSize} data={data} page={page} dispatch={dispatch}/>
<PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
</>
)
}
Expand Down
7 changes: 4 additions & 3 deletions src/components/pagination.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,17 @@ import Typography from '@mui/material/Typography';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';

export default function PaginationControlled({state, dispatch}) {
export default function PaginationControlled({actionName, page, count, dispatch}) {
const handleChange = (event, value) => {
dispatch({type: 'setPage', page: value});
dispatch({type: actionName, page: value});
};

return (
<div style={{width: '100vw', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Stack spacing={2} sx={{alignSelf: 'center'}}>
{/* <Typography>Page: {state && state.page}</Typography> */}
<Pagination count={45} color="primary" page={state && state.page} onChange={handleChange} />
{/* <Pagination count={Math.round(data.length / page_size)} color="primary" page={page} onChange={handleChange} /> */}
<Pagination count={count} color="primary" page={page} onChange={handleChange} />
</Stack>
</div>
);
Expand Down
13 changes: 7 additions & 6 deletions src/components/pokelist.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ import Typography from '@mui/material/Typography';
import StarBorderSharpIcon from '@mui/icons-material/StarBorderSharp';
import StarIcon from '@mui/icons-material/Star';

function Pokelist({ state, data, dispatch }) {
function Pokelist({ favs, data, page, pageSize, dispatch }) {

const pageData = data.slice((page-1)*pageSize, page*pageSize)

function upperFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
return (
<div style={{ width: '100vw', display: 'flex', flexDirection: 'row', flexFlow: 'row wrap', justifyContent: 'center' }}>
{data && data.map((pokemon, i) => {
{pageData && pageData.map((pokemon, i) => {
return (
<Card key={pokemon.id} sx={{ maxWidth: 600, margin: '5px' }}>
<CardMedia
Expand All @@ -34,11 +36,10 @@ function Pokelist({ state, data, dispatch }) {
</CardContent>
<CardActions>
{(() => {
if (state.data[pokemon.id] == state.favs[pokemon.id]) {
return <StarIcon onClick={(e) => dispatch({ type: 'favs', value: pokemon.id })} />
if (favs.includes(pokemon.id)) {
return <StarIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
} else {
console.log(pokemon.id)
return <StarBorderSharpIcon onClick={(e) => dispatch({ type: 'favs', value: pokemon.id })} />
return <StarBorderSharpIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
}
})()}
<Button size="small">Detalles</Button>
Expand Down
134 changes: 78 additions & 56 deletions src/hooks/reducer.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
export const initialState = {
data: [],
currentData: [],
page: 1,
favs:[],
// pokeFavs: [],
}

const filterFav = (e) => {
if (!e===false){
return true
} else{
return false
favs: [],
favIds: [],
mainPage: {
currentData:[],
page: 1,
},
favPage: {
currentData:[],
page: 1,
},
detailPage: {
currentPoke:[],
}
}

Expand All @@ -21,57 +22,78 @@ function arrayRemove(arr, value) {
});
}

/* function get_cached_item(key){
let item = []
try{
item = JSON.parse(localStorage.getItem(key))
}catch(error){
item = JSON.parse(localStorage.removeItem(key))
item = []
}
return item
}
*/
const pageSize = 20;
export const reducer = (state, action) => {
switch (action.type) {
case 'getData':
const data = action.data;
const dummyFavs = Array(data.length).fill(false);
return {...state, data: data, currentData: data.slice(0, 20), favs: dummyFavs}
case 'setPage':
const page = action.page;
const currentIndex = (page*pageSize)-20;
const pokeData = JSON.parse(JSON.stringify(state.data));
const currentData = pokeData.slice(currentIndex, currentIndex + 20);
return {...state, page: page, currentData: currentData}
case 'favs':
return {...state, data: data}
case 'setMainPage':
return {...state, mainPage: {...state.mainPage, page: action.page}}
case 'setFavPage':
return {...state, favPage: {...state.favPage, page: action.page}}
case 'setFav':
const id = action.value;
const index = id - 1
const currentFavs = JSON.parse(JSON.stringify(state.favs));
const currentPokeEntry = JSON.parse(JSON.stringify(state.data[index]));
currentFavs[index] = currentPokeEntry;
console.log(currentFavs.filter(filterFav))
return {...state, favs: currentFavs}
// const id = action.value;
// let currentFavs = JSON.parse(JSON.stringify(state.favs));
// const currentPokefavs = JSON.parse(JSON.stringify(state.pokeFavs));

// if (currentFavs.includes(id)) {
// currentFavs = arrayRemove(currentFavs, id);
// } else {
// currentFavs.push(id);
// }
// let newPokefavs= [];
// currentPokefavs.forEach(element => {
// if (currentFavs.includes(element.id)) {
// newPokefavs.push(element);
// }
// });
// console.log('favs', currentFavs)
// console.log('pokefavs', newPokefavs)
// return {...state, favs: currentFavs, pokeFavs: newPokefavs}
const index = id - 1;
let currentFavIds = JSON.parse(JSON.stringify(state.favIds));
const currentPokeEntry = JSON.parse(JSON.stringify(state.data));
if (currentFavIds.includes(id)) {
currentFavIds = arrayRemove(currentFavIds, id);
} else {
currentFavIds.push(id);
}
let newFavs = [];
currentPokeEntry.forEach(element => {
if (currentFavIds.includes(element.id)) {
newFavs.push(element);
}
});
return {...state, favs: newFavs, favIds: currentFavIds}
default:
return {...state}
}
}
}

// const pageSize = 20;
// export const reducer = (state, action) => {
// switch (action.type) {
// case 'getData':
// const data = action.data;
// const dummyFavs = Array(data.length).fill(false);
// return {...state, data: data, currentData: data.slice(0, 20), favs: dummyFavs}
// case 'setPage':
// const page = action.page;
// const currentIndex = (page*pageSize)-20;
// const pokeData = JSON.parse(JSON.stringify(state.data));
// const currentData = pokeData.slice(currentIndex, currentIndex + 20);
// return {...state, page: page, currentData: currentData}
// case 'favs':
// const id = action.value;
// const index = id - 1
// const currentFavs = JSON.parse(JSON.stringify(state.favs));
// const currentPokeEntry = JSON.parse(JSON.stringify(state.data[index]));
// currentFavs[index] = currentPokeEntry;
// console.log(currentFavs.filter(filterFav))
// return {...state, favs: currentFavs}
// // const id = action.value;
// // let currentFavs = JSON.parse(JSON.stringify(state.favs));
// // const currentPokefavs = JSON.parse(JSON.stringify(state.pokeFavs));

// // if (currentFavs.includes(id)) {
// // currentFavs = arrayRemove(currentFavs, id);
// // } else {
// // currentFavs.push(id);
// // }
// // let newPokefavs= [];
// // currentPokefavs.forEach(element => {
// // if (currentFavs.includes(element.id)) {
// // newPokefavs.push(element);
// // }
// // });
// // console.log('favs', currentFavs)
// // console.log('pokefavs', newPokefavs)
// // return {...state, favs: currentFavs, pokeFavs: newPokefavs}
// default:
// return {...state}
// }
// }

0 comments on commit b6202ae

Please sign in to comment.