estoy creando una funcionalidad para agregar un producto al carro de compras (Este carro esta en un state centralizado con recoilJs)
la cosa es que si voy a un producto y agrego mas cantidad o reduzco la cantidad de este una vez añadido al carro funciona correctamente
, sin embargo, el problema ocurre cuando:
- Tengo productos A y B añadidos al carro
- Salgo de la vista de producto y vuelvo al producto A
- Añado otra cantidad del producto A
Ocurre el problema
-> añade dentro del array el producto A como nuevo el array pasa de 2 a 3(A, B, A)
Mi codigo de la logica del carro es la siguiente:
// React
import React, { useEffect, useState } from 'react';
// Components
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// Recoil
import { cart } from '../../store';
import { useRecoilState, useResetRecoilState } from 'recoil';
// Location state props
import { useLocation } from "react-router-dom";
// Style.sass
import './style.sass';
// Images
const productImage = require('../../assets/images/product/product.png');
const ProductPage = () => {
const notify = () => {
toast('🦄 Wow lo añadiste al carrito!', {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
const [quantityItems, setQuantity] = useState(0);
const [cartArray, setCart] = useRecoilState(cart);
const location = useLocation();
const { state: data } = location;
const { data:product } = data;
const addToCart = () => {
if(cartArray.length < 1) {
setCart((item) => [
...item,
{
id: product.id,
title: product.title,
quantity: quantityItems
}
])
} else {
cartArray.map((cartItem) => {
if(cartItem.id === product.id) {
console.log('entra aqui I')
let newSetCart = cartArray.map((item) => {
let cartItemCopy = {...item};
if(cartItemCopy.id === product.id) {
cartItemCopy.quantity = quantityItems;
}
return cartItemCopy;
});
setCart(newSetCart);
} else if (cartItem.id !== product.id) {
console.log('entra II')
let newItem = {
id: product.id,
title: product.title,
quantity: quantityItems
}
setCart(cart => [...cartArray, newItem]);
// cartArray.map((item) => {
// console.log('item id ', item.id)
// let cartItemCopy = {...item};
// if(item.id !== product.id) {
// let newItem = {
// id: product.id,
// title: product.title,
// quantity: quantityItems
// }
// setCart(cart => [...cartArray, newItem]);
// }
// })
}
})
}
notify();
}
console.log(useRecoilState(cart));
const setCountHandler = () => {
setQuantity(quantityItems + 1);
}
const removeCountHandler = () => {
if(quantityItems === 0) return;
setQuantity(quantityItems - 1);
}
return(
<div className="product-page-wrapper">
<div className="column-product">
<div className="column-title-product-container">
<div className="title-and-price">
<div className="made-for-text">
<p>MADE FOR Aging Skin</p>
</div>
<div className="daily-mineral-title">
<h1>{product.title}</h1>
{/* <h1>Broad Spectrum</h1> */}
</div>
<div className="lower-text-title">
<p>Use if texture changes got you down and it's time to start anew.</p>
</div>
<div className="price">
<p>${product.price}</p>
</div>
<div className="amount-and-add-button-container">
<div className="quantity-button">
<div className="negative-sign" onClick={removeCountHandler}><p>-</p></div>
<div><p>{quantityItems}</p></div>
<div className="positive-sign" onClick={setCountHandler}><p>+</p></div>
</div>
<div className="add-button" onClick={() => addToCart()}>
<p>ADD TO BAG</p>
</div>
<ToastContainer />
</div>
</div>
</div>
<div className="product-image-container">
<div className="product-image">
<img src={product.image}></img>
</div>
</div>
</div>
<div className="column-description-product">
<div className="main-description-row">
<div className="description-container-container">
<h1>PRODUCT DESCRIPTION</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu orci, consequat et eros id, laoreet consectetur dui.
Curabitur ac risus placerat, fringilla tortor in, porta purus. Donec feugiat tincidunt scelerisque. Cras elit ante, tempor vel sem eget, placerat gravida eros. Nunc tortor justo, consequat nec imperdiet at, aliquet eu libero.
</p>
</div>
<div className="net-weight-container">
<p>Net wt: 17 fl.oz / 50ml</p>
</div>
<div className="adversory-container">
<p>Non-toxic</p>
<p>|</p>
<p>Vegan</p>
</div>
</div>
</div>
</div>
);
}
export default ProductPage;
Como dato: Cuando aumento o disminuyo la cantidad de un producto lo filtro mediante un id del producto en el array
vs el producto de la pagina que viene por props. Sin embargo no se me ocurre como evitar que no añada al producto si existe en el array.