import RemoveIcon from '@mui/icons-material/Remove';
import AddIcon from '@mui/icons-material/Add';
import { useSelector } from "react-redux";
import styled from "styled-components";
import { useEffect, useState } from "react";
import { userRequest } from "../requestMethods";
import { useHistory } from "react-router";
import React from "react";
import { useDispatch } from 'react-redux';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
const Cart = () => {
const cart = useSelector((state) => state.cart);
const history = useHistory();
const [product, setProduct] = useState({});
const [quantity, setQuantity] = useState(1);
const dispatch = useDispatch();
useEffect(() => {
const makeRequest = async () => {
try {
const res = await userRequest.post("/checkout/payment", {
amount: cart.total * 100,
});
history.push("/success", {
products: cart,
});
} catch { }
};
cart.total >= 1 && makeRequest();
if (cart.total < 1) {
}
}, [cart.total, history]);
const handleQuantity = (type) => {
if (type === "dec") {
quantity > 1 && setQuantity(quantity - 1);
} else {
setQuantity(quantity + 1);
}
};
return (
{cart.products.map((product) => (
<Product>
<PriceDetail>
<ProductAmountContainer>
<AddIcon onClick={() => handleQuantity("inc")} />
<ProductAmount>{product.quantity}</ProductAmount>
<RemoveIcon onClick={() => handleQuantity("dec")} />
<DeleteOutlineOutlinedIcon style={{ marginLeft: "10px" }} />
</ProductAmountContainer>
<ProductPrice>
$ {product.price * product.quantity}
</ProductPrice>
</PriceDetail>
</Product>
))}
export default Cart;
I need to add:
handleIncrease,
handleDecrease,
handleDelete. Or just i should somehow change handleQuantity function
But i don't inderstand how to do this. Because my quantity goes from product, so if i'm trying to change it, I am just changing all itemses amount.