Consultando la API de detalles del Pokemon

Clase 13 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Nicolas Florez

student•

Actualmente ya es posible pasar objetos de referencia (funciones, objetos literales etc.) por los params de navegación, por lo que no hace falta hacer otro fetch dentro de la screen del pokemon. La mayoría de cosas del curso relacionadas a React Navigation son distintas ahora, te recomiendo que revises la documentación para actualizar lo que estás aprendiendo en este curso: https://reactnavigation.org/

Cristian Iñiguez

student•

En TypeScript debemos tipar estas props usando el genérico NativeStackScreenProps y el tipado de los screens::

import { FC, useEffect, useState } from 'react';
...
import type { PokedexStackParamList } from '../navigation/PokedexNavigation';

type PokemonProps = NativeStackScreenProps<PokedexStackParamList, 'Pokemon'>;

const Pokemon: FC<PokemonProps> = ({ navigation, route: { params } }) => {
	console.log(params.id); // sin errores
  ...

  return (...);
};

export default Pokemon;

Donde PokedexStackParamList es:

export type PokedexStackParamList = {
  Pokedex: undefined;
  Pokemon: {
    id: string;
  };
};

Alfredo Lopez

student•

aporte por si a alguien no le funcion el codigo y lo quiere comparar

api pokemon.js
export async function getPokemonDetailsApi(id) {
    try{
        const url = `${API_HOST}/pokemon/${id}`;
        const response = await fetch(url);
        const result = await response.json();
        return result;
    } catch (error) {
        throw error;
    }
}

pantalla de pokemon.js

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { getPokemonDetailsApi } from '../api/pokemon';

export default function Pokemon(props) {
  const { 
    navigation , 
    route: { 
      params 
    } 
  } = props;
  const [pokemon, setPokemon] = useState(null)

  useEffect(() => {
    (async () => {
      try {
        const response = await getPokemonDetailsApi(params.id)
        setPokemon(response)
      } catch (error) {
        navigation.goBack();
      }
    })()
  }, [params])

  if(!pokemon) return null;

  return (
    <View>
      <Text>Estamos en un pokemon</Text>
      <Text>{pokemon.name}</Text>
    </View>
  ); 
}

boton de gotopokemon

 const goToPokemon = () => {
        console.log(pokemon.id)
        navigation.navigate("Pokemon", { id: pokemon.id })
    }

Odalis Dariel Abreu Mejia

student•

Tengo el code tal cual pero me sigue imprimiendo [Function anonymous] en el log.

import { View, Text } from 'react-native'
import React, { useState, useEffect } from 'react'
import {getPokemonDetailsApi} from "../api/Pokemon"


export default function Pokemon(props) {
  const { navigation, route: {params},} = props;
  const [pokemon, setPokemon] = useState(null);
  //console.log(params.id);

  useEffect(() => {
    (async () => {
      try {
        const response = await getPokemonDetailsApi(params.id);
        console.log(response);
      } catch (error) {
        navigation.goBack(); 
      }
    })();
  }, [params]);
  
return (
    <View>
      <Text>Estamos en un pokemon {params.id}</Text>
    </View>
  )
}

Tengo el code tal cual pero en el los me continua imprimiendo [Function anonymous]

Bryan Garcia

student•

Hacer un throw error en el catch no tiene sentido.

Recuerden que el catch es para capturar los errores existentes provenientes de las promesas, retornadas por fetch o el método json (en el caso que estamos aplicando específicamente). Es decir, capturar los errores específicos de acciones que podría, el resultado, no depender de nosotros. Así evitamos que se detenga la ejecución de nuestro código y llevamos a cabo una acción para subsanarlo.

Hacer un throw error solo generaría otro error que detendría la ejecución de nuestro código sin darle solución al error anterior.

Como estamos aprendiendo, lo mejor es hacer un console.log del error, así podemos ver en la terminal lo que sucedió. Y si usamos un throw error procuremos que esto no vaya a un ambiente de producción. (al igual que los console jeje)

GEMILLE ADASSI VAZQUEZ ESTRADA

student•

#Mejora el rendimiento

El useEffect podemos solo hacer una petición en lugar de una cada que cambie el params.


  useEffect(() => {
    const fetchPokemonDetails = async () => {
      try {
        const response = await getPokemonDetailsByIdApi(params.id);
        dispatch(setPokemonDetails(response))
      } catch (error) {
        navigation.goBack();
      }
    };

    fetchPokemonDetails();
  }, []);

``` 2. El uso de React.memo

```js
import React, { useEffect } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { useDispatch, useSelector } from 'react-redux';
import { setPokemonDetails } from '../redux/slices/pokemonDetailSlice';
import { getPokemonDetailsByIdApi } from '../api/pokemon';

export const Pokemon = React.memo((props) => {
  const { navigation, route: { params } } = props;
  const dispatch = useDispatch();
  const pokemon = useSelector((state) => state.pokemonDetail.pokemon);
  console.log(pokemon)

  useEffect(() => {
    const fetchPokemonDetails = async () => {
      try {
        const response = await getPokemonDetailsByIdApi(params.id);
        dispatch(setPokemonDetails(response))
      } catch (error) {
        navigation.goBack();
      }
    };

    fetchPokemonDetails();
  }, []);


  if(!pokemon) return null;

  return (
    <View>
      <Text>Pokemon</Text>
      <Text>{pokemon.name}</Text>
    </View>
  )
})

const styles = StyleSheet.create({})
```3. En el app js, habilita el enableScreens (hay que instalar la react-native-screens, lo que mejora considerablemente la navegación al usar componentes nativos en lugar de las vistas de react native (al menos en iOS).


```js
import { NavigationContainer } from "@react-navigation/native";
import { Navigation } from "./src/navigation/Navigation";
import { Provider } from "react-redux";
import { store } from "./src/redux/store";
import { AppRegistry } from 'react-native';
import React from 'react';
import { name as appName } from './app.json';
import { enableScreens } from 'react-native-screens';

enableScreens();

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Navigation />
      </NavigationContainer>
    </Provider>
  );
}

AppRegistry.registerComponent(appName, () => App);

export default App;

```4. Y por último, ya es posible pasar objetos por lo que no es necesario otro fetch, sin embargo, siguiendo el curso, esto puede ayudar bastante.

Daniel Ochoa

student•

Cuanod usen el Tab Navigator combinado con el Stack Navigator si quieren mantener el Stack (Ya que este generalmente nos permite volver) como el que maneja el Header, para apagar el header del Tab usen headerShown: false, no usen transparent ya que esa propiedad genera muchos problemas, entre ellos que el header sigue ahi y en una capa superior, por lo que no te va dejar darle click al boton de volver y además se va a hacer un overflow en android del contenido hacia el status bar.

Jeison Triana

student•

no entiendo por qué crear un servicio con un try catch si por ejemplo se dispara un error de todas formas va a lanzar la excepción

Bernardo Ayala Montezuma

student•

Hola Jeison,

La idea es que puedas manejar el error de alguna forma para que los usuarios finales no tengan páginas con las que no puedan interactuar, o que estén toda en blanco sin ninguna explicación.

Un dev podría entrar en el inspector y ver que en efecto hay un error en el código, pero un usuario no técnico no tendría idea de que está sucediendo.

Entonces podríamos, por ejemplo, usar un try catch para crear un mensaje en pantalla que diga "Lo sentimos, ha ocurrido un error inesperado" en caso de que se dispare alguna excepción.

Consultando la API de detalles del Pokemon

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación