Reto #4: toggle addToCart

[juandc]

¡Buenas!

Nuestra aplicación por ahora nos permite añadir el mismo producto al carrito cuantas veces el usuario le de click al botón al carrito.

Tu misión, si decides aceptarla, es que cada botón de añadir al carrito sepa si su producto está en el carrito o no. Y que de esta forma pueda no solo intercambiar su ícono o color de fondo, sino también su funcionalidad, agregar o eliminar a su producto del carrito de compras. 🛍️

En este reto debes trabajar CSS para los estilos del botón y también lógica en JavaScript + React.js para conseguir una buena comunicación entre tus componentes.

[davalder]

Hola a todos y todas, por mi parte solo agregue un nuevo estado para el componente ProductItem.jsx, con el cual busque determinar cuando ya había sido agregado el producto en el carrito, afectándolo por medio de la función ya existente handleClick().
Además por medio de useContext traje la función removeFromCart(), con la cual conseguí eliminar el producto cuando ya allá sido agregado, pasando esto por un condicional ternario.

const { addToCart, removeFromCart } = useContext(AppContext);
    const [added, setAdded] = useState(false);


    const handleClick = item => {
        added ? removeFromCart(item) : addToCart(item);
        setAdded(!added);
    }

Ya en el elemento figure realice el ajuste para renderizar el icono correspondiente al estado deseado, también con un ternario

<figure onClick={() => handleClick(product)} >
                    {added ? <img src={iconBtAddedCart} alt="" /> : <img src={iconBtAddCart} alt="" /> }
                </figure>

Recuerden que fue necesario realizar las importaciones de los iconos.

import iconBtAddCart from "@icons/bt_add_to_cart.svg";
import iconBtAddedCart from "@icons/bt_added_to_cart.svg"

Cualquier observación estaré atento, gracias!

[vanecordero]

@DavElder El problema de usar el estado de forma interna en ese componente es que si eliminas el elemento desde el carrito aun se quedara la imagen con el carrito "check". Mi propuesta es que en vez de usar el stado, busques en el contexto a ver si el producto que te llego, existe en el carrito.

Por ejemplo:

//Las importaciones
const { addToCart, removeFromCart, state } = useContext(AppContext);

//Funcion para agregar/eliminar al carrito
const handleClick = (item) => {
    itsProductAdded() ? removeFromCart(item) : addToCart(item);
  };

//Funcion para que busque en el contexto si existe el producto en el carrito
  const itsProductAdded = () => state.cart.some( (item) => item.id === product.id) ? true : false;

// En renderizado condicional para las imagenes
<figure onClick={() => handleClick(product)}>
      { itsProductAdded() ? (
        <img src={added_to_cart} alt="" />
      ) : (
        <img src={bt_add_to_cart} alt="" />
      )}
</figure>

Con esto no importa desde donde se elimine o se agregue, las imagenes cambiaran

[RavilcoDev]

@vanecordero Agregando a tu solucion pondria 2 useEfect, uno para la primera carga del componente, y otra que solo reaccione con la accion de removeFromCart, la segunda funcionaria con nuevo estado de lastIdRemove que enseñaria el ultimo id removido del cart, esto seria para que no se haga la comparativa (some) por cada llamada al componente sino por cada vez que se remueva un item del cart.

/* inititalState.js */
const inititalState = {
    cart: [],
    lastIdRemoved:-1
}

const removeFromCart = (payload) => {
    const fooIdx = state.cart.findIndex(({id})=> payload.id===id)

     if(fooIdx>-1){
         let foo=[...state.cart]
         foo.splice(fooIdx,1)
         setState({
              ...state,
              cart: [...foo]
              ,lastIdRemoved:payload.id
           })
     }
}

/* ProductItem.js */
// Context
const { addToCart, removeFromCart, state } = useContext(AppContext);

// nuevo state (reemplaze) "itsProductAdded" por "toggleIconCart"
const [toggleIconCart, setToggleIconCart] = useState(false)

// reacciona cuando se cambio el ultimo lastIdRemove 
useEffect(() => {
	if (state.lastIdRemoved === product.id) {
		setToggleIconCart(false)
	}
}, [state.lastIdRemoved])

//  1ra carga del componente y va segundo porque si queda un lastIdRemove, sea rectificado
useEffect(() => {
	if (state.cart.some(({ id }) => id === product.id)) {
		setToggleIconCart(true)
	}
}, [])

[Gustavolando]

Hola a todos y todas, por mi parte solo agregue un nuevo estado para el componente ProductItem.jsx, con el cual busque determinar cuando ya había sido agregado el producto en el carrito, afectándolo por medio de la función ya existente handleClick(). Además por medio de useContext traje la función removeFromCart(), con la cual conseguí eliminar el producto cuando ya allá sido agregado, pasando esto por un condicional ternario.

const { addToCart, removeFromCart } = useContext(AppContext);
    const [added, setAdded] = useState(false);


    const handleClick = item => {
        added ? removeFromCart(item) : addToCart(item);
        setAdded(!added);
    }

Ya en el elemento figure realice el ajuste para renderizar el icono correspondiente al estado deseado, también con un ternario

<figure onClick={() => handleClick(product)} >
                    {added ? <img src={iconBtAddedCart} alt="" /> : <img src={iconBtAddCart} alt="" /> }
                </figure>

Recuerden que fue necesario realizar las importaciones de los iconos.

import iconBtAddCart from "@icons/bt_add_to_cart.svg";
import iconBtAddedCart from "@icons/bt_added_to_cart.svg"

Cualquier observación estaré atento, gracias!

Pero qué pasa si necesitas agregar varias veces el mismo producto?
Tu solución me parece muy limpia, pero tendrías que limitar la inclusión de productos repetidos a otras opciones o lugares, como incrementar el contador de productos en el modal de la orden, ya que al agregar o remover items desde el mismo botón no permitirás que naturalmente se agreguen productos repetidos.
Y qué pasa cuando el carrito de compras con todos los items agregados se guarden y se tengan que cargar más tarde? (Obviamente en este punto la app no tiene esa funcionalidad, pero para cuando la tenga?)

Más abajo puedes buscar mi comentario donde propongo una solución algo diferente.

[Gustavolando]

Hola,
Esta es mi propuesta:

Primero es necesario revisar el arreglo del carrito de compras para validar si el producto ya fue agregado o no. De ya estar agregado vamos a poner la imagen del ícono bt_added_to_cart, y si no ponemos la imagen del ícono bt_add_to_cart.

Para verificar si el producto existe o no en el carrito de compras hice una nueva función "isInCart(productId)" dentro del archivo useInitialState.js

const useInitialState = () => {
  // resto de la lógica

  const isInCart = (productId) => {
    return state.cart.some(product => product.id === productId)
  }

  return {
    state,
    addToCart,
    removeFromCart,
    isInCart
  }
}

export default useInitialState

Luego en el archivo ProductItem.jsx agrego la función isInCart a la lista de recursos que obtengo del contexto y al momento de colocar la imagen consulto si el recurso ya existe en el arreglo del carrito de compras:

//resto de la lógica

import addedToCartIcon from '@icons/bt_added_to_cart.svg'

const ProductItem = ({product}) => {
  const { addToCart, isInCart } = useContext(AppContext)

  //resto de la lógica

  return (
    <div className="ProductItem">

      //resto de la lógica

        <figure onClick={() => handleClick(product)}>
          {isInCart(product.id) 
            ? <img src={addedToCartIcon} alt="Add another to cart" />
            : <img src={addToCartIcon} alt="Add to cart" /> 
          }
        </figure>
      </div>
    </div>
  )
}

Del lado de CSS mejoré la presentación de la image del ícono con un borde, con un borde especial cuando el cursor está sobre el elemento <figure> y también le puse el puntero a ese elemento para indicar que se puede hacer clic en él.

.product-info figure img {
  width: 35px;
  height: 35px;
  box-shadow: 0 0 3px 0.5px var(--very-light-pink);
}
.product-info figure:hover img {
  border-radius: 50%;
  box-shadow: 0 0 2px 1px var(--hospital-green),
  0 0 4px 1px var(--hospital-green),
  0 0 8px 1px var(--hospital-green);
  cursor: pointer;
}

Sin embargo sigo teniendo la duda si hay una opción mejor que no requiera el refrescamiento de todos los elementos cada vez que modificamos el contador de productos al carrito.

Creo que un useEffect resuelve este detalle, pero no sé aún cómo implementarlo.
Pueden ponerme un mensaje directo por aca Git o a @IngGustavoG en telegram.
Gracias de antemano!

[Johan-Palacios]

const ProductItem = ({ product }) => {
...
 const itsProductAdded = () =>
    state.cart.some((item) => item.id === product.id);
  const handleClick = (item) => {
    addToCart(item);
  };
....
        <figure onClick={() => handleClick(product)}>
          {itsProductAdded() ? (
            <img src={added_cart} alt="Addeed to cart" />
          ) : (
            <img src={add_cart} alt="Add to cart" />
          )}
        </figure>
....
}

[jdchavarro]

Bueno yo todo lo hice sobre ProductItem.jsx, lo que hice fue:

// Agregar la imagen
import addedToCartImage from '@icons/bt_added_to_cart.svg';
// Crear un state con la ruta de la imagen
const [ cartImage, setCartImage ] = useState(addToCartImage);
// Traer lo metodos de agregar o eliminar para usarlos aqui
const { state, addToCart, removeFromCart } = useContext(AppContext);

// Funcion que verifica si el producto esta en la lista
const productInCart = (item, id) => !!state.cart.find(item => item.id === id);

// Dependiendo si el producto esta se agrega o elimina y asi mismo cambia la imagen
const handleClick = item => {
  if(productInCart(item, item.id)) {
	  removeFromCart(item)
	  setCartImage(addToCartImage)
  } else {
	  addToCart(item);
	  setCartImage(addedToCartImage)
  }
}

// La imagen la asigno con el state creado
<img src={cartImage} alt="add to cart" />