AddToCart.jsx

import React, { useState, useEffect } from "react";
import "semantic-ui-css/semantic.min.css";
import { Button, Icon } from "semantic-ui-react";
import "./cart.css";

function AddToCart({ products, handleChange }) {
  const [cartItems, setCartItems] = useState([]);
  const [subtotal, setSubtotal] = useState(0);
  const [selectedItem, setSelectedItem] = useState(null);

  const handleAdd = (newItem, amount = 1) => {
    const updatedItem = {
      ...newItem,
      amount: newItem.amount ? newItem.amount + amount : 1,
    };
    setCartItems([...cartItems, updatedItem]);
    setSelectedItem(updatedItem);
  };
  const handleRemove = (id) => {
    const updatedCartItems = cartItems.filter((item) => item.id !== id);
    setCartItems(updatedCartItems);
  };

  const handleUnits = () => {
    let units = 0;
    cartItems.forEach((item) => {
      const amount = parseInt(item.amount);
      const price = parseFloat(item.price);
      units += amount * price;
    });
    return units.toFixed(2);
  };

  useEffect(() => {
    const units = handleUnits();
    setSubtotal(units);
  }, [cartItems]);

  const displayItems = Array.isArray(products)
    ? products.map((item) => (
        <div className="col-sm-3" key={item.id}>
          <div className="card" style={{ width: "18rem" }}>
            <img className="card-img-top" src={item.image} alt={item.title} />
            <div className="card-body">
              <h5 className="card-title">{item.title}</h5>
              <p className="card-text">{item.description}</p>
            </div>
            <ul className="list-group list-group-flush">
              <li className="list-group-item">Price: Ksh {item.price}</li>
              <li className="list-group-item">Section: {item.category}</li>
            </ul>
            <div className="card-body">
              <Button icon primary onClick={() => handleAdd(item)}>
                <Icon name="cart plus" />
                Add to Cart
              </Button>
            </div>
          </div>
        </div>
      ))
    : null;

  return (
    <>
      <div className="row">{displayItems}</div>
      <div className="total">
        <h2 style={{ color: "blue" }}>Cart Summary</h2>
        {selectedItem && (
          <p style={{ color: "blue" }}>
            Selected item: {selectedItem.title} ({selectedItem.amount} in cart)
          </p>
        )}
        <h4 style={{ color: "blue" }}>Subtotal: Kshs. {subtotal}</h4>
      </div>
    </>
  );
}

export default AddToCart;

import React, { useState, useEffect } from "react";
import "semantic-ui-css/semantic.min.css";
import { Button, Icon } from "semantic-ui-react";
import "./cart.css";

function AddToCart({ products, handleChange }) {
const [cartItems, setCartItems] = useState(() => {
const savedCartItems = localStorage.getItem("cartItems");
return savedCartItems ? JSON.parse(savedCartItems) : [];
});
const [subtotal, setSubtotal] = useState(0);
const [selectedItem, setSelectedItem] = useState(null);

const handleAdd = (newItem, amount = 1) => {
const existingItem = cartItems.find((item) => item.id === newItem.id);

if (existingItem) {
  existingItem.amount += amount;
  setSelectedItem(existingItem);
} else {
  const updatedItem = {
    ...newItem,
    amount: newItem.amount ? newItem.amount + amount : 1,
  };
  setCartItems([...cartItems, updatedItem]);
  setSelectedItem(updatedItem);
}

};

const handleRemove = (id) => {
const updatedCartItems = cartItems.filter((item) => item.id !== id);
setCartItems(updatedCartItems);
};

const handleUnits = () => {
let units = 0;
cartItems.forEach((item) => {
const amount = parseInt(item.amount);
const price = parseFloat(item.price);
units += amount * price;
});
return units.toFixed(2);
};

useEffect(() => {
const units = handleUnits();
setSubtotal(units);
}, [cartItems]);

useEffect(() => {
localStorage.setItem("cartItems", JSON.stringify(cartItems));
}, [cartItems]);

const displayItems = Array.isArray(products)
? products.map((item) => (

<div className="card" style={{ width: "18rem" }}>

{item.title}

{item.description}

• Price: Ksh {item.price}


• Section: {item.category}

<Button icon primary onClick={() => handleAdd(item)}>

Add to Cart

))
: null;

return (
<>

{displayItems}

<h2 style={{ color: "blue" }}>Cart Summary
{selectedItem && (
<p style={{ color: "blue" }}>
Selected item: {selectedItem.title} ({selectedItem.amount} in cart)

)}
<h4 style={{ color: "blue" }}>Subtotal: Kshs. {subtotal}

</>