Se crea funcionalidad para filter

src/App.js

@@ -1,12 +1,11 @@
-import Ŕeact, { useReducer } from 'react';
+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 Pokemon from './components/pages/pokemon';
 import Details from './components/pages/details';
-import SearchAppBar from './components/searchbar';
-
+import SignIn from './components/pages/login';
 
 function App() {
 
@@ -16,10 +15,10 @@ function App() {
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route exact path='/' element={<Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} dispatch={dispatch} />} />
+          <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} dispatch={dispatch} />} />
-          <Route exact path='/favorites' element={<Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} dispatch={dispatch} />} />
-          {/* <Route exact path='/bottom' element={<SearchAppBar />} /> */}
+          <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='/login' element={<SignIn />} />
         </Routes>
       </BrowserRouter>
     </div>

src/components/filterbar.jsx

@@ -4,16 +4,25 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import FilterListIcon from '@mui/icons-material/FilterList';
 
-export default function BasicMenu() {
+export default function BasicMenu({dispatch}) {
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = () => {
+  const handleClose = (e) => {
     setAnchorEl(null);
   };
 
+  const handleActionClose = (e) => {
+    // console.log(e.target.getAttribute("value")) 
+    dispatch({type:"filterType", value: e.target.getAttribute("value")})
+    return handleClose(e)
+  }
+  function upperFirstLetter(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+  const types = ['normal', 'fire', 'water', 'grass', 'electric', 'ice', 'fighting', 'poison', 'ground', 'flying', 'psychic', 'bug', 'rock', 'ghost', 'dark', 'dragon', 'steel', 'fairy'];
   return (
     <div>
       <Button
@@ -34,14 +43,9 @@ export default function BasicMenu() {
           'aria-labelledby': 'basic-button',
         }}
       >
-        <MenuItem onClick={handleClose}>Generation I</MenuItem>
-        <MenuItem onClick={handleClose}>Generation II</MenuItem>
-        <MenuItem onClick={handleClose}>Generation III</MenuItem>
-        <MenuItem onClick={handleClose}>Generation IV</MenuItem>
-        <MenuItem onClick={handleClose}>Generation V</MenuItem>
-        <MenuItem onClick={handleClose}>Generation VI</MenuItem>
-        <MenuItem onClick={handleClose}>Generation VII</MenuItem>
-        <MenuItem onClick={handleClose}>Generation VIII</MenuItem>
+        {types.map((type) => {
+          return (<MenuItem value={type} onClick={handleActionClose}>{upperFirstLetter(type)}</MenuItem>)
+        })}
       </Menu>
     </div>
   );

src/components/navbar.jsx

@@ -19,7 +19,7 @@ import { useNavigate } from "react-router-dom";
 const pages = ['Pokémon', 'Favorites'];
 const settings = ['Logout'];
 
-const ResponsiveAppBar = () => {
+const ResponsiveAppBar = ({dispatch}) => {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -123,10 +123,10 @@ const ResponsiveAppBar = () => {
             ))}
           </Box>
           <Box sx={{ flexGrow: 0, display: 'flex'}}>
-            <BasicMenu/>
+            <BasicMenu dispatch={dispatch} />
           </Box>
           <Box sx={{ flexGrow: 0, display: 'flex'}}>
-            <SearchAppBar />
+            <SearchAppBar dispatch={dispatch}/>
           </Box>
           <Box sx={{ flexGrow: 0, display: { xs: 'none', lg: 'flex' } }}>
             <Tooltip title="Open settings">

src/components/pages/details.jsx

@@ -7,7 +7,7 @@ function Details({pokemon, dispatch}) {
 
     return (
         <>
-        <ResponsiveAppBar />
+        <ResponsiveAppBar dispatch={dispatch}/>
        <h1>Vista detalles</h1>
       <Pokedetails pokemon={pokemon} dispatch={dispatch}/>
       </>

src/components/pages/login.jsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+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';
+
+function Copyright(props) {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Pokédata
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+
+export default function SignIn({state, dispatch}) {
+  const navigateTo = useNavigate();
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    // eslint-disable-next-line no-console
+    const user = {
+      email: data.get('email'),
+      password: data.get('password'),
+    }
+    /* dispatch({type: 'signIn', value: user}) */
+    navigateTo('/')
+
+  };
+
+  return (
+      <Container 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"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+        <Copyright sx={{ mt: 8, mb: 4 }} />
+      </Container>
+  );
+}

src/components/pages/pokemon.jsx

@@ -5,11 +5,32 @@ import PaginationControlled from "../pagination"
 import Pokelist from "../pokelist"
 import FixedBottomNavigation from '../bottombar';
 
-function Pokemon({favs, actionName, data, page, dispatch}) {
+const nameFilter = (name, data) => (
+  data.filter(item=>(
+      item.name.toLowerCase().includes(name.toLowerCase())
+      )
+  )
+);
+
+const typeFilter = (type, data) => {
+  if(type === 'all'){
+    return data
+  }else{
+    return data.filter(item=>(item.pokemon_v2_pokemontypes[0].pokemon_v2_type.name === type))
+  }
+};
+
+function Pokemon({favs, actionName, data, page, filterState, dispatch}) {
 
   const pokeCount = 898
   const pageSize = 20;
-  const pageCount = Math.round(data.length / pageSize)
+  let filteredData =  data
+
+  filteredData = nameFilter(filterState.name, filteredData)
+  filteredData = typeFilter(filterState.type, filteredData)
+  console.log(filteredData[34])
+
+  const pageCount = Math.round(filteredData.length / pageSize)
 
     const bodyRepo = {
         "query": `
@@ -53,10 +74,10 @@ function Pokemon({favs, actionName, data, page, dispatch}) {
         , [])
     return (
         <>
-        <ResponsiveAppBar/>
-      <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
-      <Pokelist favs={favs} pageSize={pageSize} data={data} page={page} dispatch={dispatch}/>
-      <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
+        <ResponsiveAppBar 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 />
       </>
         )

src/components/searchbar.jsx

@@ -46,7 +46,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
   },
 }));
 
-export default function SearchAppBar() {
+export default function SearchAppBar({dispatch}) {
   return (
     <Box sx={{ flexGrow: 1 }}>
           <Search>
@@ -56,6 +56,7 @@ export default function SearchAppBar() {
             <StyledInputBase
               placeholder="Search…"
               inputProps={{ 'aria-label': 'search' }}
+              onChange={(e) => dispatch({type: 'filterName', value: e.target.value })}
             />
           </Search>
     </Box>

src/hooks/reducer.js

@@ -17,9 +17,15 @@ export const initialState = {
             stats: [{'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}],
             sprites: {other:{'official-artwork': { front_default: 'loading'}}}
         },
+    },
+    filterState: {
+        name: '',
+        type: 'all',
     }
 }
 
+const types_list =  ['normal', 'fire', 'water', 'grass', 'electric', 'ice', 'fighting', 'poison', 'ground', 'flying', 'psychic', 'bug', 'rock', 'ghost', 'dark', 'dragon', 'steel', 'fairy'];
+
 function arrayRemove(arr, value) { 
 
     return arr.filter(function(e){ 
@@ -58,11 +64,25 @@ export const reducer = (state, action) => {
                 }
             });
             return {...state, favs: newFavs, favIds: currentFavIds}
-        /* case 'filter':
-            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}} */
+        case 'filterName':
+            return {...state, filterState: {...state.filterState, name: action.value}}
+        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}}
+            // 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}
     }