From b6202aeacc80658683216499ae46f1f0b5624cd8 Mon Sep 17 00:00:00 2001 From: Danna Cardenas Date: Tue, 1 Feb 2022 14:50:16 -0500 Subject: [PATCH] Se le da funcionalidad a vista favoritos --- src/App.js | 7 +- src/components/pages/pokemon.jsx | 15 ++-- src/components/pagination.jsx | 7 +- src/components/pokelist.jsx | 13 +-- src/hooks/reducer.js | 134 ++++++++++++++++++------------- 5 files changed, 102 insertions(+), 74 deletions(-) diff --git a/src/App.js b/src/App.js index 2c5ba7e..1e5b88b 100644 --- a/src/App.js +++ b/src/App.js @@ -16,9 +16,10 @@ function App() {
- } /> - } /> - } /> + } /> + {/* } /> */} + } /> + {/* } /> */}
diff --git a/src/components/pages/pokemon.jsx b/src/components/pages/pokemon.jsx index 0c7a1c5..f317fcf 100644 --- a/src/components/pages/pokemon.jsx +++ b/src/components/pages/pokemon.jsx @@ -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": ` @@ -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); @@ -48,9 +51,9 @@ function Pokemon({state, dispatch}) { return ( <> - - - + + + ) } diff --git a/src/components/pagination.jsx b/src/components/pagination.jsx index 1bff798..4c8974b 100644 --- a/src/components/pagination.jsx +++ b/src/components/pagination.jsx @@ -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 (
{/* Page: {state && state.page} */} - + {/* */} +
); diff --git a/src/components/pokelist.jsx b/src/components/pokelist.jsx index 6960e79..69c37b5 100644 --- a/src/components/pokelist.jsx +++ b/src/components/pokelist.jsx @@ -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 (
- {data && data.map((pokemon, i) => { + {pageData && pageData.map((pokemon, i) => { return ( {(() => { - if (state.data[pokemon.id] == state.favs[pokemon.id]) { - return dispatch({ type: 'favs', value: pokemon.id })} /> + if (favs.includes(pokemon.id)) { + return dispatch({ type: 'setFav', value: pokemon.id })} /> } else { - console.log(pokemon.id) - return dispatch({ type: 'favs', value: pokemon.id })} /> + return dispatch({ type: 'setFav', value: pokemon.id })} /> } })()} diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js index 929b524..d5e4703 100644 --- a/src/hooks/reducer.js +++ b/src/hooks/reducer.js @@ -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:[], } } @@ -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} } -} \ No newline at end of file +} + +// 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} +// } +// } \ No newline at end of file