Construyendo el Carrito de Compras: Agregar productos al carrito

Tengan mucho cuidado sobre cómo escriben su reduce, ese ‘,0’ estuvo en el lugar incorrecto y me hizo un desorden con el total del precio.

Construyendo el Carrito de Compras: Agregar productos al carrito

useEffect reemplaza los ciclos de vida de React.

Cart.js:

import React, { useContext, useEffect, useState } from 'react';
import { Link } from 'gatsby';
import { Button, StyledCart } from '../styles/components';
import priceFormat from '../utils/priceFormat';
import { CartContext } from '../context';

export default function Cart() {
  const { cart } = useContext(CartContext);
  const [total, setTotal] = useState(0);

  const getTotal = () => {
    setTotal(cart.reduce((acc, current) => acc + current.unit_amount * current.quantity , 0));
  };

  useEffect(() => {
    getTotal();
  }, []);

  return (
    <StyledCart>
      <h2>Carrito de compras</h2>
      <table>
        <tbody>
          <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Total</th>
          </tr>
          {cart.map(swag => (
            <tr key={swag.id}>
              <td>
                <img src={swag.metadata.img} alt={swag.name}/> {swag.name}
              </td>
              <td>USD {priceFormat(swag.unit_amount)}</td>
              <td>{swag.quantity}</td>
              <td>{priceFormat(swag.quantity * swag.unit_amount)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <nav>
        <div>
          <h3>Subtotal: </h3>
          <small>Total: USD {priceFormat(total)}</small>
        </div>
        <div>
          <Link to='/'>
            <Button type='outline'>Volver</Button>
            <Button disabled={cart.length === 0}>Comprar</Button>
          </Link>
        </div>
      </nav>
    </StyledCart>
  )
};

A solo un par de clases de terminar el curso y todavía no entiendo porqué hicimos el componente “Jumbo”, o más bien, porqué le pusimos "Jumbo"
En mi caso me gustó el nombre y nombré la app “Jumbo Store” jajaj
No hay cosa más horrible que los proyectos “platzi esto” “platzi lo otro”

A alguien mas le paso que si regresa al HOME y vuelves a la sudadera y pulsa agregar dar error del SKU ?

Bueno, después de estar así por un par de horas

Logré esto:

	const handleSubmit  = () => {
		addToCart({ id, name, images, metadata, quantity: qty, unit_amount });
		if (id.indexOf(cart[0])) {
			setQty(qty + 1);
			console.log('id in cart');
		}
	};

Pero lo único que hace es aumentar en 1 el contador de cantidad del ProductDetail.js, más no añade 1 más al carrito.
Si alguien lo solucionó sería un golazo que comente cómo.
Si lo resuelvo lo comento.

curso de carrito de compra

Mi WishList

Aquí mi wishlist la cual funciona con un toggle Button en cada artículo.

La página del WishList la maneje como la del carrito y en productDetails.js maneje un estado para el botón de corazón donde su estado lo manejo así:

const [liked, setLiked] = useState(() => isInWishList(sku))
	const handleLiked = () => {
		toggleWishList({ price, sku, name, metadata }, liked)
		setLiked(!liked)
	}

El botón lo manejo así:

<LikeButton liked={liked} onClick={handleLiked} />

el cual está construido en components.js así:

export const LikeButton = styled.button`
	cursor: pointer;
	background-color: ${({ liked }) => (liked ? "crimson" : "white")};
	color: ${({ liked }) => (liked ? "white" : "crimson")};
	font-size: 2.5rem;
	border: 3px solid crimson;
	border-radius: 12px;
	padding: 0.6rem 0.5rem;

	&:before {
		content: '${({ liked }) => (liked ? "♥" : "♡")}';
	}
`

y finalmente mi contexto en Context.js lo maneje así (mandando ambas funciones y estado por el value del provider):

const [wishList, setWishList] = useState([])

const toggleWishList = (element, isInWishListState) => {
		if (isInWishListState)
			setWishList(
				wishList.filter((item) => {
					return item.sku !== element.sku
				})
			)
		else setWishList([...wishList, element])
	}

	const isInWishList = (sku) => {
		return wishList.some((item) => item.sku === sku)
	}

No era mas fácil simplemente declarar una variable, creo que no hace falta implementar useEffect y useState

const total = cart.reduce(
    (prev, current) => prev + current.price * current.quantity,
    0
  )

Si le doy un refresh a la pagina me borra los items del carrito ¿Cómo puedo hacer persistente los datos?

Que es useEffect.

Quizás no es la manera más limpia (creo qeu es un mal uso del map xd) pero así solucioné el tema de que se agregaban 2 elementos del mismo producto al carrito, ahora solo modifica la cantidad

const handleSubmit = () => {
    let onCart = false

    cart.map(item => {
      if (item.id == id) {
        onCart = true
        item.qty += qty
      }
    })

    if (!onCart) addToCart({ unit_amount, id, name, metadata, qty })
  }