Merge pull request #2 from DannitaZz/dev

Dev

README.md

@@ -1,25 +1,42 @@
-# PokeData
-
-![Pokemon](src/img/pokeball.png)
-
-Proyecto realizado con React y Material-U consumiendo datos desde [PokéAPI](https://pokeapi.co/) 
+![Pokemon](https://upload.wikimedia.org/wikipedia/commons/5/53/Pok%C3%A9_Ball_icon.svg =100x) \
 
-## Características
+# PokeData
 
--Responsive
--Paginación
--Usuario y favoritos persistentes
--Vistas protegidas
+Proyecto realizado con React, Material-U y Google Chart consumiendo datos desde [PokéAPI](https://pokeapi.co/) y desplegado en [Pokedata](https://pokedata-react.herokuapp.com/)
 
-### Prospectos
 
--Agregar más información a la vista detalles
--Desplegar
+## Cómo usar
 
-### Cómo usar
+Las credenciales de acceso del usuario dummy son: 
 
-Como el usuario es local, las credenciales de acceso son: 
+- user: ash_ketchum
+- password: pikachu123
 
--user: ash_ketchum
--password: pikachu123
+## Características
 
+1. Responsive.
+2. Vistas protegidas.
+3. Vista de inicio de sesión sin llamado a la API:
+      - Valida usuario y contraseña.
+      - Si el usuario está autenticado, al ingresar a la app, es redirigido a la vista principal en lugar del login.
+4. Petición optimizada mediante GraphQL.
+5. Barra de navegación inferior para dispositivos medianos (tablets y teléfonos) y superior para desktop.
+      - Dos vistas implementadas, una principal y otra de favoritos.
+      - Listado de pokémon scrolleable.
+      - Paginación por cliente, se obtienen los datos mínimos para una primera impresión y se paginan automáticamente.
+      - Botón de favorito en cada elemento que persiste cuando la aplicación es recargada. 
+      - Listado de pokemon favoritos que persiste cuando la aplicación es recargada. 
+
+6. Vista de detalles
+      - El usuario puede navegar por la vista de detalles al clickear sobre un pokémon en específico.
+      - Gráfico con las estadísticas principales del Pokémon seleccionado.
+
+7. Barra de búsqueda que permite encontrar a los pokémon por nombre
+8. Opción de filtrar los pokémon por tipo.
+9. Animaciones de transición entre vista principal y vista de detalles. 
+
+
+## Prospectos
+
+- Agregar más información a la vista detalles.
+- Convertirla en PWA.

src/components/pages/pokemon.jsx

@@ -19,7 +19,22 @@ const typeFilter = (type, data) => {
   if(type === 'all'){
     return data
   }else{
-    return data.filter(item=>(item.pokemon_v2_pokemontypes[0].pokemon_v2_type.name === type))
+    return data.filter(item=>{
+      let type_1
+      let type_2
+      if (item.pokemon_v2_pokemontypes.length === 2) {
+        type_1 = item.pokemon_v2_pokemontypes[0].pokemon_v2_type.name
+        type_2 = item.pokemon_v2_pokemontypes[1].pokemon_v2_type.name
+      }else{
+        type_1 = item.pokemon_v2_pokemontypes[0].pokemon_v2_type.name
+        type_2 = item.pokemon_v2_pokemontypes[0].pokemon_v2_type.name
+      }
+      if(type_1 === type || type_2 === type){
+        return true
+      }else{
+        return false
+      }
+    })
   }
 };
 

src/components/pokelist.jsx

@@ -156,8 +156,8 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                             </CardActions>
 
                         </Card>
-                        <ListItem key={`pokemon_${pokemon.id}`} alignItems="center" sx={{ width: '100%', bgcolor: 'background.paper', height:'17.5vh', display: { xs: 'flex', sm: 'none' } }} >
-                            <Card sx={{ display: 'flex', width: '93vw', height: '15vh' }} key={pokemon.id}>
+                        <ListItem key={`pokemon_${pokemon.id}`} alignItems="center" sx={{ width: '100%', bgcolor: 'background.paper', height:'150px', display: { xs: 'flex', sm: 'none' } }} >
+                            <Card sx={{ display: 'flex', width: '93vw', height: '140px' }} key={pokemon.id}>
                                 <CardContent sx={{ flex: '1 1 auto', flexDirection: 'row' }}>
                                 <Stack sx={{ display: 'flex', 
                                              flexDirection: 'row', 

src/hooks/reducer.js

@@ -74,7 +74,7 @@ export const reducer = (state, action) => {
             localStorage.setItem('favIds', JSON.stringify(currentFavIds));
             return {...state, favs: newFavs, favIds: currentFavIds}
         case 'filterName':
-            return {...state, filterState: {...state.filterState, name: action.value}}
+            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)
@@ -85,7 +85,7 @@ export const reducer = (state, action) => {
             } else {
                 newType = 'all'
             }
-            return {...state, filterState: {...state.filterState, type: newType}}
+            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')

src/index.js

@@ -8,7 +8,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { checkValue } from './utils'
 
 const appName = 'pokedata'
-const version = '0.15'
+const version = '0.16'
 
 checkValue('appName', appName)
 checkValue('version', version)