Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Eliminar Pokémon de favoritos

13/21
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 );

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([]));```