React, Cart & local storage

Question

i'm having two problems with my carts the first is when inc / dec to an item in the cart it goes to the bottom of the item list. alse i have been trying to store the items, quantities and prices to the local storage it sts but on refreshing the page it gets deleted.

this is my cart context:

// Adding Items to cart
 const onAdd = (product, quantity) => {
const checkProductInCart = cartItems.find((item) => item.id === product.id);

setTotalPrice((prevTotalPrice) => (prevTotalPrice + Math.round((product.priceNumeric * quantity)*100)/100));
setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + quantity);
//setSales(product.wasPriceNumeric - product.priceNumeric);
//setTotalSavings((prevTotalSavings) => prevTotalSavings * quantity);

if(checkProductInCart) {
   // eslint-disable-next-line
  const updatedCartItems = cartItems.map((cartProduct) => {
    if(cartProduct.id === product.id) return {
      ...cartProduct,
      quantity: cartProduct.quantity + quantity
    }
    
  })

  setCartItems(updatedCartItems);
} else {
  product.quantity = quantity;
  
  setCartItems([...cartItems, { ...product }]);
}

toast.success(` ${product.name} added to the cart.`);
localStorage.setItem('totalprice', totalPrice)
localStorage.setItem('totalquantities', totalQuantities)

} 

// Removing Items from cart
const onRemove = (product) => {
foundProduct = cartItems.find((item) => item.id === product.id);
const newCartItems = cartItems.filter((item) => item.id !== product.id);

setTotalPrice((prevTotalPrice) => prevTotalPrice -(Math.round((foundProduct.price * 
foundProduct.quantity)*100)/100));
setTotalQuantities(prevTotalQuantities => prevTotalQuantities - foundProduct.quantity);
setCartItems(newCartItems);
 }

// increase and decrease cart quanitites
const toggleCartItemQuanitity = (id, value) => {
foundProduct = cartItems.find((item) => item.id === id)
index = cartItems.findIndex((product) => product.id === id);
const newCartItems = cartItems.filter((item) => item.id !== id)

if(value === 'inc') {
  setCartItems([...newCartItems, { ...foundProduct, quantity: foundProduct.quantity + 1 } ]);
  setTotalPrice((prevTotalPrice) => (Math.round((prevTotalPrice + foundProduct.priceNumeric)*100)/100));
  setTotalQuantities(prevTotalQuantities => prevTotalQuantities + 1)
  
} else if(value === 'dec') {
  if (foundProduct.quantity > 1) {
    setCartItems([...newCartItems, { ...foundProduct, quantity: foundProduct.quantity - 1 } ]);
    setTotalPrice((prevTotalPrice) => (Math.round((prevTotalPrice - foundProduct.priceNumeric)*100)/100));
    setTotalQuantities(prevTotalQuantities => prevTotalQuantities - 1)
  }
}
}

Answer 1

For your first issue you could create a copy of the cartItems. Then find the index of the matching cart item and update the quantity inside copy version of array. And then spread this array in the state.

const toggleCartItemQuanitity = (id, value) => {
  const cartItemsCopy = [...cartItems];
  foundProductIndex = cartItemsCopy.findIndex(item => item.id === id);

  if (value === "inc") {
    cartItemsCopy[foundProductIndex].quantity++;
    setCartItems([...cartItemsCopy]);
    setTotalPrice(
      prevTotalPrice =>
        Math.round(
          (prevTotalPrice + cartItemsCopy[foundProductIndex].priceNumeric) * 100
        ) / 100
    );
    setTotalQuantities(prevTotalQuantities => prevTotalQuantities + 1);
  } else if (value === "dec") {
    if (foundProduct.quantity > 1) {
      cartItemsCopy[foundProductIndex].quantity--;
      setCartItems([...cartItemsCopy]);
      setTotalPrice(
        prevTotalPrice =>
          Math.round(
            (prevTotalPrice - cartItemsCopy[foundProductIndex].priceNumeric) *
              100
          ) / 100
      );
      setTotalQuantities(prevTotalQuantities => prevTotalQuantities - 1);
    }
  }
};

Answer 2

I think we are doing the same project. Did you complete the project? here is what I finally did:

enter image description here