No tienes acceso a esta clase

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

Eliminar Pok茅mon de favoritos

13/21
Recursos

Aportes 7

Preguntas 0

Ordenar por:

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

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 鈥渓leno鈥. 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 鈥渦til鈥 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([]));```
el curso est谩 super, me hubiera gustado m谩s si de vez este proyecto fuera una tienda ropa, ecommerce, carrito compras m谩s ajustado la vida real.

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