Eliminar Pokémon de favoritos

Es posible también usar el mismo Icon de FontAwesome5 pasándole la prop solid. De esta forma, se muestra el ícono “lleno”. En este caso estoy haciendo que esa propiedad sea true cuando el pokemon está marcado como favorito.

Este código se encuentra aquí.

Consideré extraer también la lógica del botón en un custom hook. Por si a alguien le sirve, lo dejo por aquí. Así, el componente de ícono queda mucho más limpio, y solo se pasa la función toggleFavorite.

import { useFocusEffect } from "@react-navigation/core";
import { useCallback, useState } from "react";
import {
  getFavoritesApi,
  isFavoriteApi,
  saveFavoritesApi,
} from "../util/favoriteUtil";

export const useFavorite = (id: string) => {
  const [isFavorite, setIsFavorite] = useState<boolean>();

  useFocusEffect(
    useCallback(() => {
      (async () => {
        setIsFavorite(await isFavoriteApi(id));
      })();
    }, [id])
  );

  const toggleFavorite = async () => {
    const favorites = await getFavoritesApi();
    try {
      if (isFavorite) {
        const newFavorites = favorites.filter((item) => item !== id);
        await saveFavoritesApi(newFavorites);
      } else {
        favorites.push(id);
        await saveFavoritesApi(favorites);
      }
      setIsFavorite(!isFavorite);
    } catch (error) {
      console.error(error);
    }
  };
  return {
    isFavorite,
    toggleFavorite,
  };
};

Y mi archivo “util” contiene únicamente funciones para acceder al Async Storage.

import AsyncStorage from "@react-native-async-storage/async-storage";

const FAV_STORAGE = "favorites";

export const isFavoriteApi = async (id: string) => {
  const favorites = await getFavoritesApi();
  return favorites.includes(id);
};

export const getFavoritesApi = async (): Promise<string[]> => {
  const favorites = await AsyncStorage.getItem(FAV_STORAGE);
  return JSON.parse(favorites || "[]");
};

export const saveFavoritesApi = async (favorites: string[]) => {
  await AsyncStorage.setItem(FAV_STORAGE, JSON.stringify(favorites));
  return favorites;
};

Solución con filter

const favorites = await getPokemonsFavoriteApi();
        const newFavorites = favorites.filter( fav => fav != id );

No entiendo porque le permiten al profesor utilizar Lodash para enseñar. En una instancia de aprendizaje, los estudiantes deberiamos aprender a utilizar las funcionalidades core del lenguaje para acentar las bases, que al final es lo fundamental para que despues cada quien oriente su camino con las herramientas que quiera adquirir.

Para vaciar el array y no dejar basura en el storage lo que se podría hacer es escribirlo vacío

await AsyncStorage.setItem(FAVORITE_STORAGE, JSON.stringify([]));```

const parsedRes = JSON.parse(response) || [];

Alternativa para eliminar repetidos desde API

return response ? [...new Set(JSON.parse(response))] : [];

Alternativa para remover de los favoritos con Spread Operator y el método Slice de los arrays:

const currentFavorites = await getFavorites();
const index = currentFavorites.indexOf(id);

const updatedFavorites = [
  ...currentFavorites.slice(0, index),
  ...currentFavorites.slice(index + 1),
];