Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Toggle en el botón de favoritos

12/21
Recursos

Aportes 4

Preguntas 1

Ordenar por:

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

Simplemente en la funcion onReloadCheckFavorite puede llamar al estado y negarlo, creo que esta forma es mas intuitiva.

  const onReloadCheckFavorite = () => {
    setReloadCheck(!reloadCheck);
  }

Mi código, el que creo que es más simplificado al del profesor y sin usar lodash:

FavButton.jsx:

import { useState, useLayoutEffect } from 'react'
import PropsTypes from 'prop-types'
import Icon from 'react-native-vector-icons/FontAwesome5'
import { addFavoritePokemon, removeFavoritePokemon, getFavoritePokemons } from '../../api/favStorage'

const FavButton = ({ id }) => {
  const [ fav, setFav ] = useState(undefined)

  useLayoutEffect(() => {
    (async () => {
      const favorites = await getFavoritePokemons()
      const isFav = favorites.includes(id)
      setFav(isFav)
    })()
  }, [])

  const handleFavorite = () => {
    fav
      ? removeFavoritePokemon(id)
      : addFavoritePokemon(id)
    setFav(!fav)
  }

  return (
    <Icon
      name='heart'
      solid={fav && true}
      color="#000"
      size={24}
      style={{ marginRight: 20 }}
      onPress={handleFavorite}
    />
  )
}

FavButton.propTypes = {
  id: PropsTypes.number.isRequired
}

export default FavButton

favStorage.js

import AsyncStorage from '@react-native-async-storage/async-storage'

export const addFavoritePokemon = async (id) => {
  try {
    const favorites = await getFavoritePokemons()
    favorites.push(id)
    await AsyncStorage.setItem('favorites', JSON.stringify(favorites))
  } catch (error) {
    console.log(error)
  }
}

export const removeFavoritePokemon = async (id) => {
  try {
    const favorites = await getFavoritePokemons()
    const filterFavorites = favorites.filter(fav => fav !== id)
    await AsyncStorage.setItem('favorites', JSON.stringify(filterFavorites))
  } catch (error) {
    console.log(error)
  }
}

export const getFavoritePokemons = async () => {
  try {
    const response = await AsyncStorage.getItem('favorites')
    return response != null ? JSON.parse(response) : []
  } catch (error) {
    console.log(error)
  }
}

Con el onpress y dirigiéndolo a la función de cada caso se puede hacer esto sin necesidad de crear mas funciones, faltaría la lógica de borrarlo de la base de datos que seguramente es en las próximas clases

 const addFavorites = async () => {
    await addPokemonFavorite(id);
    setIsFavorite(true);
  };

  const removeFavorites = () => {
    console.log("eliminando");
    setIsFavorite(false);
  };

onPress={isFavorite ? removeFavorites : addFavorites}

Otra alternativa, podría ser en la misma función para sumar a los favoritos, negar al estado inicial de si es favorito o no (en mi caso isFavorites):

  const addFavorites = async () => {
    try {
      await addFavorite(id);
      setIsFavorites(!isFavorites)
    } catch (err) {
      console.log(err)
    }
  };