Eliminar Pokémon de favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Contenido del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:44

Eliminar Pokémon de favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 13 de 21

Clase 13 / 21

Bryan Gama Solórzano

Hace 5 años

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

Jordan Jaramillo

Hace 5 años

Por si alguien se pregunta cual es el nombre de la extension que le dice cuanto es el peso del import este es el link

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?

Eliminar Pokémon de favoritos

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Recursos

Recursos