Se estilizan componentes de listado

src/App.js

@@ -2,22 +2,25 @@ import React, { useReducer } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { reducer, initialState } from './hooks/reducer';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+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 {checkLogin} from './utils'
 
 function App() {
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const loggedIn = checkLogin()
+
   return (
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route exact path='/' element={<Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />} />
-          <Route exact path='/:id' element={<Details pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
-          <Route exact path='/favorites' element={<Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} filterState={state.filterState} dispatch={dispatch} />} />
+          <Route exact path='/' element={!loggedIn ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />} />
+          <Route exact path='/:id' element={!loggedIn ? <Navigate to="/login" /> : <Details pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
+          <Route exact path='/favorites' element={!loggedIn ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} filterState={state.filterState} dispatch={dispatch} />} />
           <Route exact path='/login' element={<SignIn />} />
         </Routes>
       </BrowserRouter>

src/components/bottombar.jsx

@@ -7,10 +7,12 @@ import Paper from '@mui/material/Paper';
 import CatchingPokemonIcon from '@mui/icons-material/CatchingPokemon';
 import StarIcon from '@mui/icons-material/Star';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 export default function FixedBottomNavigation() {
     const navigateTo = useNavigate();
+    let location = useLocation();
+    /* console.log('Location', location) */
   return (
     <Box sx={{ pb: 7, flexGrow: 1, display: { xs: 'flex', lg: 'none' }}} /* ref={ref} */>
       <CssBaseline />
@@ -23,14 +25,33 @@ export default function FixedBottomNavigation() {
               } else if (newValue === '1') {
                   navigateTo('/favorites');
               } else if (newValue === '2') {
-                  /* navigateTo('/login') */
-                  console.log(newValue);
+                  localStorage.removeItem('user')
+                  localStorage.removeItem('pass')  
+                  navigateTo('/login')
+                  // console.log(newValue);
+
               }
           }}
         >
-          <BottomNavigationAction label="Pokémon" value='0' icon={<CatchingPokemonIcon />} />
-          <BottomNavigationAction label="Favorites" value='1' icon={<StarIcon />} />
-          <BottomNavigationAction label="Logout" value='2' icon={<ExitToAppIcon />} />
+          {(()=>{
+            if (location.pathname === '/') {
+              return ( 
+              <BottomNavigationAction sx={{color: '#FF1C1C'}} label="Pokémon" value='0' icon={<CatchingPokemonIcon />} />
+              ) 
+            } else {
+              return (<BottomNavigationAction label="Pokémon" value='0' icon={<CatchingPokemonIcon />} />)
+            }
+          })()}
+          {(()=>{
+            if (location.pathname === '/favorites') {
+              return ( 
+                <BottomNavigationAction sx={{color: '#FF1C1C'}} label="Favorites" value='1' icon={<StarIcon />} />  
+              )
+            } else {
+              return (<BottomNavigationAction label="Favorites" value='1' icon={<StarIcon />} />  )
+            }
+          })()} 
+                <BottomNavigationAction label="Logout" value='2' icon={<ExitToAppIcon />} />
         </BottomNavigation>
       </Paper>
     </Box>

src/components/filterbar.jsx

@@ -17,7 +17,7 @@ export default function BasicMenu({ currentType, dispatch }) {
   };
 
   const handleActionClose = (e) => {
-    // console.log(e.target.getAttribute("value")) 
+    console.log(e.target.getAttribute("value")) 
     dispatch({ type: "filterType", value: e.target.getAttribute("value") })
     return handleClose(e)
   }
@@ -33,6 +33,7 @@ export default function BasicMenu({ currentType, dispatch }) {
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
+        sx={{color: 'white'}}
       >
         <FilterListIcon />
       </Button>

src/components/layout.jsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import FixedBottomNavigation from "./bottombar";
+import ResponsiveAppBar from "./navbar";
+
+function Layout() {
+    return(
+        <>
+        <ResponsiveAppBar />
+        <Outlet />
+        <FixedBottomNavigation />
+        </>
+    )
+}

src/components/navbar.jsx

@@ -55,15 +55,23 @@ const ResponsiveAppBar = ({currentType, dispatch}) => {
 };
 
   const handleCloseUserMenu = () => {
-      navigateTo('/');
+    navigateTo('/');
     setAnchorElUser(null);
   };
 
+  const handleCloseUserMenuLogout = () => {
+    localStorage.removeItem('user')
+    localStorage.removeItem('pass')  
+    navigateTo('/login');
+    setAnchorElUser(null);
+  };
+
+
   return (
     <AppBar position="static" style={{background: '#161B22'}} >
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-            <img src={logo} alt='logo' style={{maxWidth: 50}}/>
+            <img src={logo} alt='logo' style={{maxWidth: 50}} onClick={() => navigateTo('/')}/>
 
             <Typography
             variant="h6"
@@ -73,43 +81,6 @@ const ResponsiveAppBar = ({currentType, dispatch}) => {
           >
 
           </Typography>
-          {/* <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }} >
-            <IconButton
-              size="large"
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              onClick={handleOpenNavMenu}
-              color="inherit"
-            >
-              <MenuIcon />
-            </IconButton>
-            <Menu
-              id="menu-appbar"
-              anchorEl={anchorElNav}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'left',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'left',
-              }}
-              open={Boolean(anchorElNav)}
-              onClose={navigateToRepo}
-              sx={{
-                display: { xs: 'block', md: 'none' },
-              }}
-            >
-              {pages.map((page, i) => (
-                <MenuItem key={page} >
-                  <Typography textAlign="center" data-my-value={i} onClick={navigateToRepo_}>{page}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
-          </Box>
-           */}
           <Box sx={{ flexGrow: 1, display: { xs: 'none', lg: 'flex' }}}>
             {pages.map((page, i) => (
               <Button
@@ -130,7 +101,7 @@ const ResponsiveAppBar = ({currentType, dispatch}) => {
           </Box>
           <Box sx={{ flexGrow: 0, display: { xs: 'none', lg: 'flex' } }}>
             <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, color: 'white', marginLeft: '10px' }}>
                 <LogoutIcon />
               </IconButton>
             </Tooltip>
@@ -151,7 +122,7 @@ const ResponsiveAppBar = ({currentType, dispatch}) => {
               onClose={handleCloseUserMenu}
             >
               {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                <MenuItem key={setting} onClick={handleCloseUserMenuLogout}>
                   <Typography textAlign="center">{setting}</Typography>
                 </MenuItem>
               ))}

src/components/pages/login.jsx

@@ -26,7 +26,6 @@ function Copyright(props) {
   );
 }
 
-
 export default function SignIn({state, dispatch}) {
   const navigateTo = useNavigate();
   const handleSubmit = (event) => {
@@ -38,6 +37,8 @@ export default function SignIn({state, dispatch}) {
       password: data.get('password'),
     }
     /* dispatch({type: 'signIn', value: user}) */
+    localStorage.setItem('user', user.email)
+    localStorage.setItem('pass', user.password)
     navigateTo('/')
 
   };

src/components/pages/pokemon.jsx

@@ -4,6 +4,9 @@ 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';
 
 const nameFilter = (name, data) => (
   data.filter(item=>(
@@ -22,13 +25,15 @@ 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])
+  // console.log(filteredData[34])
 
   const pageCount = Math.round(filteredData.length / pageSize)
 
@@ -60,10 +65,17 @@ function Pokemon({favs, actionName, data, page, filterState, dispatch}) {
     useEffect(() => {
         async function getPokeData() {
             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, pokeCount);
-                dispatch({ type: 'getData', data: data });
+                const [data, saved] = getLocalStorageObj('data', {})
+                if (saved){
+                  dispatch({ type: 'getData', data: data });
+                } else{
+                  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, pokeCount);
+                  dispatch({ type: 'getData', data: data });
+                  localStorage.setItem('data', JSON.stringify(data));
+                }
+
             } catch (error) {
                 console.error(error);
             }

src/components/pagination.jsx

@@ -9,7 +9,7 @@ export default function PaginationControlled({actionName, page, count, dispatch}
   };
 
   return (
-      <div style={{width: '100vw', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+      <div style={{width: '100vw', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '1%', marginBottom: '1%'}}>
     <Stack spacing={2} sx={{alignSelf: 'center'}}>
       {/* <Typography>Page: {state && state.page}</Typography> */}
       {/* <Pagination count={Math.round(data.length / page_size)}  color="primary" page={page}  onChange={handleChange} /> */}

src/components/pokedetails.jsx

@@ -55,9 +55,9 @@ function Pokedetails({ pokemon, dispatch }) {
                             })}
                             <hr></hr>
                             STATS: {pokemon && pokemon.stats.map((stat, i) => {
-                                return <>
-                                    <li key={'p' + i}>{stat.stat.name}: {stat.base_stat}</li>
-                                </>
+                                return <div key={'p' + i}>
+                                    <li >{stat.stat.name}: {stat.base_stat}</li>
+                                </div>
                             })}