Reestructuracion del proyecto

DannitaZz · Feb 11, 2022 · 075f600 · 075f600
1 parent e1164fd
commit 075f600
Show file tree

Hide file tree

Showing 14 changed files with 14 additions and 111 deletions.
diff --git 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
@@ -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 (
-    <Box sx={{ pb: 7, flexGrow: 1, display: { xs: 'flex', lg: 'none' }}} /* ref={ref} */>
+    <Box sx={{ pb: 7, flexGrow: 1, display: { xs: 'flex', lg: 'none' }}}>
       <CssBaseline />
       <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
         <BottomNavigation

diff --git a/src/components/filterbar.jsx b/src/components/filterbar.jsx
@@ -17,7 +17,6 @@ export default function BasicMenu({ currentType, dispatch }) {
   };
 
   const handleActionClose = (e) => {
-    //(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
@@ -107,12 +107,6 @@ const ResponsiveAppBar = ({ searchValue, currentType, dispatch }) => {
               )
             }
           })()}
-          {/* <Box sx={{ flexGrow: 0, display: 'flex' }}>
-            <BasicMenu currentType={currentType} dispatch={dispatch} />
-          </Box>
-          <Box sx={{ flexGrow: 0, display: 'flex' }}>
-            <SearchAppBar searchValue={searchValue} dispatch={dispatch} />
-          </Box> */}
           <Box sx={{ flexGrow: 0, display: { xs: 'none', lg: 'flex' } }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, color: 'white', marginLeft: '10px' }}>

diff --git 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 }) {
                         <Typography component="div" variant="p" textAlign='center'>
                             {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 (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', margin: '10px' }}
                                     icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}
@@ -194,8 +191,6 @@ function Pokedetails({ pokemon, dispatch }) {
                         </Typography>
                             <Chart className='chart'
                                     chartType="BarChart"
-                                    // width="8%"
-                                    // height="55%"
                                     data={data}
                                     options={options}
                                 />

diff --git 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'})`
                                 }}
                             />
                             <CardContent>
                                 <Typography variant="body2" color="text.secondary" component="div">
                                     {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 (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', marginLeft: '10px', marginRight: '10px', marginTop: '0px', marginBottom: '15px' }}
                                             icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}
@@ -203,7 +201,6 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                                         <Typography variant="subtitle1" color="text.secondary" component="div" sx={{}}>
                                             {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 (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', marginTop: '10px', marginLeft: '10px', marginRight: '10px' }}
                                                     icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}

diff --git 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 (
     <Box sx={{ flexGrow: 1 }}>
           <Search>

diff --git 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}
-//     }
-// }
diff --git 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 → src/pages/details.jsx b/src/components/pages/details.jsx → 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 → src/pages/login.jsx b/src/components/pages/login.jsx → 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 → src/pages/pokemon.jsx b/src/components/pages/pokemon.jsx → 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
@@ -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
@@ -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)
     }
 }