From 0f795f9212322ee7aaebe6d1a53ee320ed32fa27 Mon Sep 17 00:00:00 2001 From: Danna Cardenas Date: Wed, 2 Feb 2022 17:00:07 -0500 Subject: [PATCH] Se crea funcionalidad para filter --- src/App.js | 11 ++-- src/components/filterbar.jsx | 24 ++++--- src/components/navbar.jsx | 6 +- src/components/pages/details.jsx | 2 +- src/components/pages/login.jsx | 109 +++++++++++++++++++++++++++++++ src/components/pages/pokemon.jsx | 33 ++++++++-- src/components/searchbar.jsx | 3 +- src/hooks/reducer.js | 30 +++++++-- 8 files changed, 186 insertions(+), 32 deletions(-) create mode 100644 src/components/pages/login.jsx diff --git a/src/App.js b/src/App.js index 26287e4..655b617 100644 --- a/src/App.js +++ b/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() {
- } /> + } /> } /> - } /> - {/* } /> */} + } /> + } />
diff --git a/src/components/filterbar.jsx b/src/components/filterbar.jsx index 7f9ccbe..4f498eb 100644 --- a/src/components/filterbar.jsx +++ b/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 (
); diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index 13c4273..5117e76 100644 --- a/src/components/navbar.jsx +++ b/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 = () => { ))} - + - + diff --git a/src/components/pages/details.jsx b/src/components/pages/details.jsx index 90e8a0e..7fb9b0e 100644 --- a/src/components/pages/details.jsx +++ b/src/components/pages/details.jsx @@ -7,7 +7,7 @@ function Details({pokemon, dispatch}) { return ( <> - +

Vista detalles

diff --git a/src/components/pages/login.jsx b/src/components/pages/login.jsx new file mode 100644 index 0000000..bc90714 --- /dev/null +++ b/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 ( + + {'Copyright © '} + + Pokédata + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} + + +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 ( + + + + + + + + Sign in + + + + + } + label="Remember me" + /> + + + + + Forgot password? + + + + + {"Don't have an account? Sign Up"} + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/pages/pokemon.jsx b/src/components/pages/pokemon.jsx index 4c9d47c..0eed568 100644 --- a/src/components/pages/pokemon.jsx +++ b/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 ( <> - - - - + + + + ) diff --git a/src/components/searchbar.jsx b/src/components/searchbar.jsx index c0f80e7..568a3c5 100644 --- a/src/components/searchbar.jsx +++ b/src/components/searchbar.jsx @@ -46,7 +46,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ }, })); -export default function SearchAppBar() { +export default function SearchAppBar({dispatch}) { return ( @@ -56,6 +56,7 @@ export default function SearchAppBar() { dispatch({type: 'filterName', value: e.target.value })} /> diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js index 4e72fd2..2cebb29 100644 --- a/src/hooks/reducer.js +++ b/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} }