Lista de Pokémon favoritos

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 “STUPID”. 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])
  );

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 }
		/>
	)

}