No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Lista de Pok茅mon favoritos

14/21
Recursos

Aportes 9

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Muy mal a partir de 2 clases atr谩s comete errores muy tontos que si no tienes la m铆nima experiencia te puede frustrar por que no sabes como manejar tantos errores y pierdes mucho tiempo tratando de encontrar donde trae tanto problema

No es necesario utilizar el useCallback y el useFocusEffect, con agregar el pokemons a la condici贸n de useEffect es suficiente para que se recargue la vista al a帽adir o eliminar un favorito.

El copiar y pegar c贸digo, sigue el estandard 鈥淪TUPID鈥. Por favor, no lo hagan. Cuando puedan, lean acerca de clean code

Hola, muy bueno este curso pero creo que debiste explicar porque useFocusEffect y usecallback hace que se soluciona el problema de los favoritos

Por mi parte lo que hice para no repetir tanto c贸digo, fue crear una funci贸n de getDetailsPk en Utils para hacer hacer el get de los detalles de cada pokem贸n y devolverlo en un array con lo que necesito.

import { getPokemonDetails } from '../api/pokemon';

export async function getDetailsPk(pokemons) {
  const pokemonDetail = [];

  for await (const pokemon of pokemons) {
    const identifier = pokemon.name || pokemon;
    const pokemonDetails = await getPokemonDetails(identifier);
    pokemonDetail.push({
      id: pokemonDetails.id,
      name: pokemonDetails.name,
      type: pokemonDetails.types.map((type) => type.type.name),
      order: pokemonDetails.order,
      image: pokemonDetails.sprites.other['official-artwork'].front_default,
    });
  }
  return pokemonDetail;
}

En el caso de

const identifier = pokemon.name || pokemon;

Lo que hace es si pokemon . name
existe hace el get con el name (esto en el caso del pesta帽a de pokedex), sino usa el id del pokemon que recibe de la lista de favoritos.

Ya en la pantalla de favoritos solo hago esto para mostrar la tarjeta de cada pokem贸n ^^

const getFavoritePokemon = async () => {
    try {
      const response = await getFavorites();
      const pokemonDetails = await getDetailsPk(response);
      setFavorites(pokemonDetails);
    } catch (error) {
      console.error(error);
    }
  };

  useFocusEffect(
    useCallback(() => {
      getFavoritePokemon();
    }, [auth])
  );

me cuesta creer que este curso paso algun estandar de calidad

Esta muy mal hecho copiar y pegar c贸digo sin explicar las diferencias de usar un hook u otro en este caso.
creo que ir y ejecutar en un for la petici贸n no es lo mejor, por temas de recursos, si hay 100 favoritos, no ser铆a bueno hacer 1.000 peticiones, lo mejor es que cuando tengamos nuestra propia api recibir el array de favoritos y crear una consulta que devuelva todos los valores.

Cod:

screens/Favorite.js

import React, { useCallback, useState } from "react";
import { useFocusEffect } from "@react-navigation/native";
import { Text } from "react-native";

import { getPokemonsFavoriteApi } from "../services/favorite";
import { getPokemonDetailsApi } from "../services/pokemon";

import { useAuth } from "../hooks/useAuth";

import { PokemonList } from "../components/PokemonList";

export const Favorite = () => {
	const [ pokemons, setPokemons ] = useState( [] ) ;
	const { auth } = useAuth();

	useFocusEffect(
		useCallback( () => {
			if( auth ) {
				( async () => {
					try {
						const response = await getPokemonsFavoriteApi();

						const pokemonsArray = [];
						for await ( const id of response ) {
							const pokemonDetails = await getPokemonDetailsApi( id );

							pokemonsArray.push( {
								id: pokemonDetails.id,
								name: pokemonDetails.name,
								type: pokemonDetails.types[0].type.name,
								order: pokemonDetails.order,
								image: pokemonDetails.sprites.other["official-artwork"].front_default,
							} );
						}

						setPokemons([...pokemons, ...pokemonsArray]);

					} catch (error) {
						console.error(error);
					}
				} )();
			}
		}, [ auth ] )
	)


	return !auth ? (
		<Text>Usuario No Logeado</Text>
	) : (
		<PokemonList
			pokemons = { pokemons }
		/>
	)

}