Se comentan console.log

src/App.js

@@ -1,26 +1,55 @@
 import React, { useReducer } from 'react';
-import logo from './logo.svg';
 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 {checkLogin} from './utils'
-import {validUser, validPass } from './utils'
+
+const AuthPokemon = ({state, dispatch}) => {
+  if(state.login === 'true'){
+    return <Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />
+  }else{
+    return <Navigate to="/login" />
+  }
+}
+
+const AuthFavorites = ({state, dispatch}) => {
+  if(state.login === 'true'){
+    return <Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} filterState={state.filterState} dispatch={dispatch} />
+  }else{
+    return <Navigate to="/login" />
+  }
+}
+
+const AuthDetails = ({state, dispatch}) => {
+  if(state.login === 'true'){
+    return < Details searchValue={state.filterState.name} pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />
+  }else{
+    return <Navigate to="/login" />
+  }
+}
+
+const AuthLogin = ({state, dispatch}) => {
+  if(state.login === 'true'){
+    return <Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />
+  }else{
+    return <SignIn state={state} dispatch={dispatch}/>
+  }
+}
 
 function App() {
 
   const [state, dispatch] = useReducer(reducer, initialState);
-  
+
   return (
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route exact path='/' element={!checkLogin(validUser, validPass) ? <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={!checkLogin(validUser, validPass) ? <Navigate to="/login" /> : <Details searchValue={state.filterState.name} pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
-          <Route exact path='/favorites' element={!checkLogin(validUser, validPass) ? <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 />} />
+          <Route exact path='/' element={<AuthPokemon state={state} dispatch={dispatch} />} />
+          <Route exact path='/:id' element={<AuthDetails state={state} dispatch={dispatch} />} />
+          <Route exact path='/favorites' element={<AuthFavorites state={state} dispatch={dispatch} />} />
+          <Route exact path='/login' element={<AuthLogin state={state} dispatch={dispatch} />} />
         </Routes>
       </BrowserRouter>
     </div>

src/components/bottombar.jsx

@@ -9,7 +9,7 @@ import StarIcon from '@mui/icons-material/Star';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-export default function FixedBottomNavigation() {
+export default function FixedBottomNavigation({dispatch}) {
     const navigateTo = useNavigate();
     let location = useLocation();
     /* console.log('Location', location) */
@@ -25,11 +25,8 @@ export default function FixedBottomNavigation() {
               } else if (newValue === '1') {
                   navigateTo('/favorites');
               } else if (newValue === '2') {
-                  localStorage.removeItem('user')
-                  localStorage.removeItem('pass')  
-                  navigateTo('/login')
-                  // console.log(newValue);
-
+                dispatch({type:'logout'})
+                navigateTo('/login')
               }
           }}
         >

src/components/filterbar.jsx

@@ -17,7 +17,7 @@ export default function BasicMenu({ currentType, dispatch }) {
   };
 
   const handleActionClose = (e) => {
-    console.log(e.target.getAttribute("value")) 
+    //(e.target.getAttribute("value")) 
     dispatch({ type: "filterType", value: e.target.getAttribute("value") })
     return handleClose(e)
   }

src/components/navbar.jsx

@@ -5,6 +5,7 @@ import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
 import Container from '@mui/material/Container';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
@@ -60,15 +61,14 @@ const ResponsiveAppBar = ({ searchValue, currentType, dispatch }) => {
   };
 
   const handleCloseUserMenuLogout = () => {
-    localStorage.removeItem('user')
-    localStorage.removeItem('pass')
+    dispatch({type:'logout'})
     navigateTo('/login');
     setAnchorElUser(null);
   };
 
 
   return (
-    <AppBar position="static" style={{ background: '#161B22' }} >
+    <AppBar position="sticky" style={{ background: '#161B22' }} >
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <img src={logo} alt='logo' style={{ maxWidth: 50 }} onClick={() => navigateTo('/')} />
@@ -107,6 +107,12 @@ 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' }}>

src/components/pages/details.jsx

@@ -10,7 +10,7 @@ function Details({searchValue, currentType, pokemon, dispatch}) {
         <>
         <ResponsiveAppBar searchValue={searchValue} currentType={currentType} dispatch={dispatch}/>
       <Pokedetails pokemon={pokemon} dispatch={dispatch}/>
-      <FixedBottomNavigation />
+      <FixedBottomNavigation dispatch={dispatch}/>
       </>
         )
 }

src/components/pages/login.jsx

@@ -8,10 +8,14 @@ import Link from '@mui/material/Link';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import CatchingPokemonIcon from '@mui/icons-material/CatchingPokemon';
+
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import { useNavigate } from 'react-router-dom';
 
+const realUser = 'ash_ketchum'
+const realPass = 'pikachu123'
+
 function Copyright(props) {
   return (
     <Typography variant="body2" color="text.secondary" align="center" {...props}>
@@ -25,70 +29,74 @@ function Copyright(props) {
   );
 }
 
-export default function SignIn() {
-
+export default function SignIn({state, dispatch}) {
   const navigateTo = useNavigate();
-  const handleSubmit = (event) => { 
+  const handleSubmit = (event) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
     const user = {
       email: data.get('email'),
       password: data.get('password'),
     }
-    /* dispatch({type: 'signIn', value: user}) */ 
-    localStorage.setItem('user', user.email)
-    localStorage.setItem('pass', user.password)
-
-    navigateTo('/')
-
+
+    const currentUser = user.email
+    const currentPass = user.password
+
+    if (((currentUser===realUser) && (currentPass===realPass))){
+      dispatch({type:'login'})
+      console.log('correct credentials')
+      navigateTo('/')
+    } else{
+      console.log('bad credentials')
+    }    
   };
 
   return (
-      <Container className="fade-in" component="main" maxWidth="xs">
-
-        <Box
-          sx={{
-            marginTop: 8,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
-            <CatchingPokemonIcon />
-          </Avatar>
-          <Typography component="h1" variant="h5">
-            Sign in
-          </Typography>
-          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              id="email"
-              label="e-mail"
-              name="email"
-              autoFocus
-            />
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              name="password"
-              label="Password"
-              id="password"
-            />
-            <Button
-              type="submit"
-              fullWidth
-              variant="contained"
-              sx={{ mt: 3, mb: 2, backgroundColor: '#161B22' }}
-            >
-              Sign In
-            </Button>
-          </Box>
+    <Container className="fade-in" component="main" maxWidth="xs">
+
+      <Box
+        sx={{
+          marginTop: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
+          <CatchingPokemonIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          Sign in
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="email"
+            label="e-mail"
+            name="email"
+            autoFocus
+          />
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            id="password"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 3, mb: 2, backgroundColor: '#161B22' }}
+          >
+            Sign In
+          </Button>
         </Box>
-        <Copyright sx={{ mt: 8, mb: 4 }} />
-      </Container>
-  );
+      </Box>
+      <Copyright sx={{ mt: 8, mb: 4 }} />
+    </Container>
+);
 }

src/components/pages/pokemon.jsx

@@ -25,6 +25,8 @@ const typeFilter = (type, data) => {
 
 function Pokemon({favs, actionName, data, page, filterState, dispatch}) {
 
+  // checkLogin(useNavigate)
+
   const pokeCount = 898
   const pageSize = 20;
   let filteredData =  data
@@ -85,12 +87,11 @@ function Pokemon({favs, actionName, data, page, filterState, dispatch}) {
     return (
         <>
         <ResponsiveAppBar searchValue={filterState.name} currentType = {filterState.type} dispatch={dispatch}/>
-      <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={filteredData} dispatch={dispatch} />
-      <Pokelist favs={favs} pageSize={pageSize} data={filteredData} page={page} dispatch={dispatch}/>
-      <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={filteredData} dispatch={dispatch} />
-      <FixedBottomNavigation />
-      </>
-        )
+        <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={filteredData} dispatch={dispatch} />
+        <Pokelist favs={favs} pageSize={pageSize} data={filteredData} page={page} dispatch={dispatch}/>
+        <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={filteredData} dispatch={dispatch} />
+        <FixedBottomNavigation dispatch={dispatch}/>
+        </>)
 }
 
 export default Pokemon

src/components/pokedetails.jsx

@@ -138,7 +138,7 @@ 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);
+                //console.log('Pokemon: ', fulldata);
                 dispatch({ type: 'getPokemon', pokemon: fulldata });
             } catch (error) {
                 console.error(error);
@@ -182,7 +182,7 @@ 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)
+                                //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' }} />}