Eliminar Pokémon de favoritos

Clase 13 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Comentarios

Bryan Gama Solórzano

student•

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

student•

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

Patrick Jhonatan Hernandez Blanco

student•

Solución con filter

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

Migrant Cyborg

student•

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.

Hans Trauwitz

student•

Conocimientos previos

HTML, CSS y JavaScript
Fundamentos de React.js
Fundamentos de React Native
Manejo de listas en React Native
Consumo de APIs en React Native

ahi esta tu respuesta, se supone que los sabemos, si no lo sabes hay muchos curos en react y JS donde lo puedes aprender, esta enseñando una manera diferente de hacerlo, y no es para estar quejandose cada video!! saludos

Daniel Ochoa

student•

La respuesta de Hans no viene al caso, ya que en si estas aprendiendo un framework nuevo de Javascript, por lo que estoy totalmente de acuerdo, no debes usar librerías en un curso de aprendizaje, además que en el entorno profesional es muy poco probable que te permitan usar librerias, el curso tiene sus up and downs, hasta temas de malas prácticas.

Daniel Ochoa

student•

export async function removeFavoriteApi(id) {
  try {
    const favorites = await getFavoritesApi()
    const newFavorites = favorites.filter((fav) => fav !== id)
    await AsyncStorage.setItem(favoriteKey, JSON.stringify(newFavorites))
  } catch (e) {
    throw e
  }
}
```Lo correcto es usar los métodos nativos de los arrays.

Omar Rojas

student•

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.

Juan Camilo Osorio Bedoya

student•

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

David Rangel

student•

Esta es otra propuesta de función para eliminar de favoritos:

export const deleteFavouritePokemon = async (pokemonId: number) => {
  try {
    const responseFavourites = await AsyncStorage.getItem(
      FAVOURITE_STORAGE_KEY
    );
    if (responseFavourites) {
      const favouritesPokemons = JSON.parse(responseFavourites) as number[];
      const filteredFavourites = favouritesPokemons.filter(
        (id) => id !== pokemonId
      );
      await AsyncStorage.setItem(
        FAVOURITE_STORAGE_KEY,
        JSON.stringify(filteredFavourites)
      );
    }
  } catch (error) {
    console.error('Error eliminando pokemon', error);
  }
};

y así la implemento en un hook:

import { useState } from 'react';

import {
  addFavouritePokemon,
  deleteFavouritePokemon,
  getFavouritePokemons,
} from '@/services/favouritesService';

export const useModifyFavourites = () => {
  const [isLoadingModifyFavourites, setIsLoadingModifyFavourites] =
    useState<boolean>(false);

  const modifyFavourites = async (pokemonId: number | undefined) => {
    try {
      setIsLoadingModifyFavourites(true);
      if (!pokemonId) return;

      const favourites: number[] = await getFavouritePokemons();

      const isPokemonSaved = favourites.includes(pokemonId);

      if (!isPokemonSaved) {
        // si no existe el pokemon en el array, lo añade
        await addFavouritePokemon(pokemonId);
      } else {
        // si ya existe el pokemon en el array, lo elimina
        await deleteFavouritePokemon(pokemonId);
      }
    } catch (error) {
      console.error('Error fetching favourites:', error);
    } finally {
      setIsLoadingModifyFavourites(false);
    }
  };

  return { isLoadingModifyFavourites, modifyFavourites };
};

Daniel Ochoa

student•

El problema que tiene, es debido a que no hay nada, cuando lo hay nada lo que retorna es null, por lo que cuando no exista nada deberías retornar un array vacío.

export async function getFavoritesApi() {
  try {
    const favorites = await AsyncStorage.getItem(favoriteKey)
    if (!favorites) {
      return []
    }
    return JSON.parse(favorites)
  } catch (e) {
    throw e
  }
}

Cristhian Manuel Gonzalez Cano

student•

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

Elizabeth Sanchez Infante

student•

Alternativa para eliminar repetidos desde API

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

Pedro Andrés Chaparro Quintero

student•

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

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

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

export async function removeFavoriteApi(id) {
  try {
    const favorites = await getFavoritesApi()
    const newFavorites = favorites.filter((fav) => fav !== id)
    await AsyncStorage.setItem(favoriteKey, JSON.stringify(newFavorites))
  } catch (e) {
    throw e
  }
}
```Lo correcto es usar los métodos nativos de los arrays.

export const deleteFavouritePokemon = async (pokemonId: number) => {
  try {
    const responseFavourites = await AsyncStorage.getItem(
      FAVOURITE_STORAGE_KEY
    );
    if (responseFavourites) {
      const favouritesPokemons = JSON.parse(responseFavourites) as number[];
      const filteredFavourites = favouritesPokemons.filter(
        (id) => id !== pokemonId
      );
      await AsyncStorage.setItem(
        FAVOURITE_STORAGE_KEY,
        JSON.stringify(filteredFavourites)
      );
    }
  } catch (error) {
    console.error('Error eliminando pokemon', error);
  }
};

import { useState } from 'react';

import {
  addFavouritePokemon,
  deleteFavouritePokemon,
  getFavouritePokemons,
} from '@/services/favouritesService';

export const useModifyFavourites = () => {
  const [isLoadingModifyFavourites, setIsLoadingModifyFavourites] =
    useState<boolean>(false);

  const modifyFavourites = async (pokemonId: number | undefined) => {
    try {
      setIsLoadingModifyFavourites(true);
      if (!pokemonId) return;

      const favourites: number[] = await getFavouritePokemons();

      const isPokemonSaved = favourites.includes(pokemonId);

      if (!isPokemonSaved) {
        // si no existe el pokemon en el array, lo añade
        await addFavouritePokemon(pokemonId);
      } else {
        // si ya existe el pokemon en el array, lo elimina
        await deleteFavouritePokemon(pokemonId);
      }
    } catch (error) {
      console.error('Error fetching favourites:', error);
    } finally {
      setIsLoadingModifyFavourites(false);
    }
  };

  return { isLoadingModifyFavourites, modifyFavourites };
};

export async function getFavoritesApi() {
  try {
    const favorites = await AsyncStorage.getItem(favoriteKey)
    if (!favorites) {
      return []
    }
    return JSON.parse(favorites)
  } catch (e) {
    throw e
  }
}

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

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

Eliminar Pokémon de favoritos

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?