From 075f6007a995a8dd96678d7ee16887c2b36d22b9 Mon Sep 17 00:00:00 2001 From: Danna Cardenas Date: Fri, 11 Feb 2022 12:10:59 -0500 Subject: [PATCH] Reestructuracion del proyecto --- src/App.js | 6 +-- src/components/bottombar.jsx | 3 +- src/components/filterbar.jsx | 1 - src/components/navbar.jsx | 6 --- src/components/pokedetails.jsx | 7 +--- src/components/pokelist.jsx | 5 +-- src/components/searchbar.jsx | 2 - src/hooks/reducer.js | 56 -------------------------- src/index.js | 3 -- src/{components => }/pages/details.jsx | 6 +-- src/{components => }/pages/login.jsx | 2 - src/{components => }/pages/pokemon.jsx | 15 +++---- src/setupTests.js | 4 -- src/utils.js | 9 ----- 14 files changed, 14 insertions(+), 111 deletions(-) rename src/{components => }/pages/details.jsx (67%) rename src/{components => }/pages/login.jsx (97%) rename src/{components => }/pages/pokemon.jsx (89%) diff --git a/src/App.js b/src/App.js index e3394f6..918f09c 100644 --- a/src/App.js +++ b/src/App.js @@ -2,9 +2,9 @@ import React, { useReducer } from 'react'; import './App.css'; import { reducer, initialState } from './hooks/reducer'; import { BrowserRouter, Routes, Route, Navigate} from 'react-router-dom'; -import Pokemon from './components/pages/pokemon'; -import Details from './components/pages/details'; -import SignIn from './components/pages/login'; +import Pokemon from './pages/pokemon'; +import Details from './pages/details'; +import SignIn from './pages/login'; const AuthPokemon = ({state, dispatch}) => { if(state.login === 'true'){ diff --git a/src/components/bottombar.jsx b/src/components/bottombar.jsx index 0cbf64e..2b4d9f1 100644 --- a/src/components/bottombar.jsx +++ b/src/components/bottombar.jsx @@ -12,9 +12,8 @@ import { useNavigate, useLocation } from 'react-router-dom'; export default function FixedBottomNavigation({dispatch}) { const navigateTo = useNavigate(); let location = useLocation(); - /* console.log('Location', location) */ return ( - + { - //(e.target.getAttribute("value")) dispatch({ type: "filterType", value: e.target.getAttribute("value") }) return handleClose(e) } diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index 5edea35..2a69ae1 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -107,12 +107,6 @@ const ResponsiveAppBar = ({ searchValue, currentType, dispatch }) => { ) } })()} - {/* - - - - - */} diff --git a/src/components/pokedetails.jsx b/src/components/pokedetails.jsx index 7f30fea..99d495d 100644 --- a/src/components/pokedetails.jsx +++ b/src/components/pokedetails.jsx @@ -78,7 +78,6 @@ function Pokedetails({ pokemon, dispatch }) { let typeOneColor let typeTwoColor const highestStat = Math.max(...pokemon.stats.map((item) => item.base_stat)) - // console.log(highestStat) if (pokemon.types.length === 2) { typeOneColor = typeColors[String(pokemon.types[0].type.name)] @@ -137,7 +136,6 @@ function Pokedetails({ pokemon, dispatch }) { try { const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${id}/`); const fulldata = response.data; - //console.log('Pokemon: ', fulldata); dispatch({ type: 'getPokemon', pokemon: fulldata }); } catch (error) { console.error(error); @@ -164,7 +162,7 @@ function Pokedetails({ pokemon, dispatch }) { padding: '10px', border: '0px', objectFit: 'contain', - backgroundImage: `linear-gradient(to right, ${typeOneColor + '30'}, ${typeTwoColor + '30'})`// {typeOneColor} + backgroundImage: `linear-gradient(to right, ${typeOneColor + '30'}, ${typeTwoColor + '30'})` }} image={pokemon && pokemon.sprites.other["official-artwork"].front_default} alt="pokemon" @@ -181,7 +179,6 @@ function Pokedetails({ pokemon, dispatch }) { {pokemon && pokemon.types.map((type_, i) => { const type_name = String(type_.type.name) - //console.log('TYPE IS', type_name) const TypeComponent = typeComponents[type_name]; return (} @@ -194,8 +191,6 @@ function Pokedetails({ pokemon, dispatch }) { diff --git a/src/components/pokelist.jsx b/src/components/pokelist.jsx index 2737f58..ed04144 100644 --- a/src/components/pokelist.jsx +++ b/src/components/pokelist.jsx @@ -92,7 +92,6 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) { } function handleClick(e) { const id = e.currentTarget.alt - //console.log('id', id) navigateTo(`/${id}`); } return ( @@ -126,14 +125,13 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) { padding: '0px', border: '0px', objectFit: 'contain', - backgroundImage: `linear-gradient(to right, ${typeTwoColor + '30'}, ${typeOneColor + '30'})`// {typeOneColor} + backgroundImage: `linear-gradient(to right, ${typeTwoColor + '30'}, ${typeOneColor + '30'})` }} /> {pokemon.pokemon_v2_pokemontypes.map((type_, i) => { const type_name = String(type_.pokemon_v2_type.name) - // console.log('TYPE IS', type_name) const TypeComponent = typeComponents[type_name]; return (} @@ -203,7 +201,6 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) { {pokemon.pokemon_v2_pokemontypes.map((type_, i) => { const type_name = String(type_.pokemon_v2_type.name) - //console.log('TYPE IS', type_name) const TypeComponent = typeComponents[type_name]; return (} diff --git a/src/components/searchbar.jsx b/src/components/searchbar.jsx index 82b139b..697f18f 100644 --- a/src/components/searchbar.jsx +++ b/src/components/searchbar.jsx @@ -33,7 +33,6 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ color: 'inherit', '& .MuiInputBase-input': { padding: theme.spacing(1, 1, 1, 0), - // vertical padding + font size from searchIcon paddingLeft: `calc(1em + ${theme.spacing(4)})`, transition: theme.transitions.create('width'), width: '100%', @@ -47,7 +46,6 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ })); export default function SearchAppBar({searchValue, dispatch}) { - //console.log('search Value is', searchValue) return ( diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js index 8b6ca4c..3bcd739 100644 --- a/src/hooks/reducer.js +++ b/src/hooks/reducer.js @@ -40,7 +40,6 @@ function arrayRemove(arr, value) { }); } -// const pageSize = 20; export const reducer = (state, action) => { switch (action.type) { case 'getData': @@ -52,7 +51,6 @@ export const reducer = (state, action) => { return {...state, favPage: {...state.favPage, page: action.page}} case 'getPokemon': const pokemon = action.pokemon; - //console.log('El pokemon es: ', pokemon.name) return {...state, detailPage: {pokemon: pokemon}} case 'setFav': const id = action.value; @@ -77,74 +75,20 @@ export const reducer = (state, action) => { return {...state, filterState: {...state.filterState, name: action.value}, mainPage: {...state.mainPage, page: 1}, favPage: {...state.favPage, page: 1}} case 'filterType': let newType = action.value - // console.log(newType) if (newType === state.filterState.type){ newType = 'all' } else if(types_list.includes(newType)){ - //console.log(newType) } else { newType = 'all' } return {...state, filterState: {...state.filterState, type: newType}, mainPage: {...state.mainPage, page: 1}, favPage: {...state.favPage, page: 1}} case 'login': - //console.log('login got to the reducer') localStorage.setItem('login', 'true') return {...state, login:'true'} case 'logout': - //console.log('logout got to the reducer') localStorage.removeItem('login') return {...state, login:false} - // case 'gen': - // return {...state, filterState: {gen: action.value}} - // const generation = action.generation; - // console.log('Generación: ', generation) - // const filterData = data.filter((pokemon)=> pokemon.pokemon_v2_pokemontypes[0].pokemon_v2_generation.name === generation); - // return {...state, mainPage: {currentData: filterData}} 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} -// } -// } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 77c6b0e..0905d8c 100644 --- a/src/index.js +++ b/src/index.js @@ -38,7 +38,4 @@ ReactDOM.render( document.getElementById('root') ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); diff --git a/src/components/pages/details.jsx b/src/pages/details.jsx similarity index 67% rename from src/components/pages/details.jsx rename to src/pages/details.jsx index 6a36cf7..9926d3c 100644 --- a/src/components/pages/details.jsx +++ b/src/pages/details.jsx @@ -1,6 +1,6 @@ -import FixedBottomNavigation from "../bottombar" -import ResponsiveAppBar from "../navbar" -import Pokedetails from "../pokedetails" +import FixedBottomNavigation from "../components/bottombar" +import ResponsiveAppBar from "../components/navbar" +import Pokedetails from "../components/pokedetails" diff --git a/src/components/pages/login.jsx b/src/pages/login.jsx similarity index 97% rename from src/components/pages/login.jsx rename to src/pages/login.jsx index 2933d69..c878e46 100644 --- a/src/components/pages/login.jsx +++ b/src/pages/login.jsx @@ -44,10 +44,8 @@ export default function SignIn({state, dispatch}) { if (((currentUser===realUser) && (currentPass===realPass))){ dispatch({type:'login'}) - //console.log('correct credentials') navigateTo('/') } else{ - //console.log('bad credentials') } }; diff --git a/src/components/pages/pokemon.jsx b/src/pages/pokemon.jsx similarity index 89% rename from src/components/pages/pokemon.jsx rename to src/pages/pokemon.jsx index d976850..d96d7d0 100644 --- a/src/components/pages/pokemon.jsx +++ b/src/pages/pokemon.jsx @@ -1,12 +1,10 @@ import React, { useEffect } from 'react'; import axios from 'axios'; -import ResponsiveAppBar from "../navbar" -import PaginationControlled from "../pagination" -import Pokelist from "../pokelist" -import FixedBottomNavigation from '../bottombar'; -import {getLocalStorageObj} from '../../utils' -// import { useNavigate } from "react-router-dom" -// import { checkLogin } from '../../utils'; +import ResponsiveAppBar from "../components/navbar" +import PaginationControlled from "../components/pagination" +import Pokelist from "../components/pokelist" +import FixedBottomNavigation from '../components/bottombar'; +import {getLocalStorageObj} from '../utils' const nameFilter = (name, data) => ( data.filter(item=>( @@ -40,15 +38,12 @@ const typeFilter = (type, data) => { function Pokemon({favs, actionName, data, page, filterState, dispatch}) { - // checkLogin(useNavigate) - const pokeCount = 898 const pageSize = 20; let filteredData = data filteredData = nameFilter(filterState.name, filteredData) filteredData = typeFilter(filterState.type, filteredData) - // console.log(filteredData[34]) const pageCount = Math.round(filteredData.length / pageSize) diff --git a/src/setupTests.js b/src/setupTests.js index 8f2609b..7b0828b 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -1,5 +1 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; diff --git a/src/utils.js b/src/utils.js index 7651f1b..2a3991d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -3,15 +3,12 @@ export const getLocalStorageObj = (key, defaultVal) => { const item = JSON.parse(localStorage.getItem(key)) if (item===null){ localStorage.setItem(key, JSON.stringify(defaultVal)) - //console.log(`item ${key} is null, setting to ${defaultVal}`) return [defaultVal, false] }else{ - //console.log(`item ${key} retrieved from localStorage`) return [item, true] } } catch(error) { localStorage.setItem(key, JSON.stringify(defaultVal)) - //console.log(error) console.log(`error getting item ${key} setting to ${defaultVal}`) return [defaultVal, false] } @@ -20,17 +17,11 @@ export const getLocalStorageObj = (key, defaultVal) => { export const checkValue = (key, expectedVal) => { try{ const item = localStorage.getItem(key) - //console.log(item) if (item===expectedVal){ - //console.log(`item ${key} matches the desired ${expectedVal} value`) }else{ localStorage.clear(); - - //console.log(`value ${key} did not match, clearing local storage`) } } catch(error) { localStorage.clear(); - //console.log(`value ${key} error, clearing local storage`) - //console.log(error) } } \ No newline at end of file