App.jsx

import React, { useState } from "react";

import { getProductsAPI } from "./services/api";
import logo from "./logo.svg";
import "./App.css";
import Products from "./components/Products/Products";
import Filter from "./components/Filter";
import Basket from "./components/Basket";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      sort: "",
      size: "",
      cartItems: [],
      filteredProducts: [],
    };
  }

  async componentDidMount() {
    const { data } = await getProductsAPI();
    this.setState({
      products: data,
      filteredProducts: data,
    });
    console.log(data);
  }
  render() {
    const handleAddToCart = (e, product) => {
     
      this.setState((state) => {
        const cartItems = state.cartItems;
        let productAlreadyInCart = false;
        cartItems.forEach((item) => {
          if (item.id === product.id) {
            productAlreadyInCart = true;
            item.count += 1;
          }

          if (!productAlreadyInCart) {
            cartItems.push({ ...product, count: 1 });
          }
          localStorage.setItem("cartItem", JSON.stringify(cartItems));
          return cartItems;
        });
      });
    }

    const listProducts = () => {
      this.setState((state) => {
        if (state.sort !== "") {
          this.state.products.sort((a, b) =>
            state.sort === "lowest"
              ? a.price > b.price
                ? 1
                : -1
              : a.price < b.price
              ? 1
              : -1
          );
        } else {
          this.state.products.sort((a, b) => (a.id < b.id ? 1 : -1));
        }
        if (state.size !== "") {
          return {
            filteredProducts: state.products.filter(
              (a) => a.availableSizes.indexOf(state.size.toUpperCase()) >= 0
            ),
          };
        }
        return { filteredProducts: state.products };
      });
    };
    const handleChangeSize = (e) => {
      this.setState({
        size: e.target.value,
      });
      listProducts();
      console.log(e.target.value);
    };
    const handleChangeSort = (e) => {
      this.setState({ sort: e.target.value });
      listProducts();
      console.log(e.target.value);
    };

    const removeFromCart = () => {};
    return (
      <div className="container">
        <h1>Ecommerce Shopping Cart App</h1>
        <hr />
        <div className="row">
          <div className="col-md-8">
            <Filter
              size={this.state.size}
              sort={this.state.sort}
              changeSize={handleChangeSize}
              changeSort={handleChangeSort}
              count={this.state.filteredProducts.length}
            />
            <hr />
            <Products
              products={this.state.products}
              addtoCart={handleAddToCart}
            />
          </div>
          <div className="col-md-4">
            <Basket
              cartItems={this.state.cartItems}
              removeFromCart={removeFromCart}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Product.jsx

import React from 'react';
import util from '../../util';
const Products = (props) => {
    const { products, addToCart } = props;
    console.log(props)
    const productItems = products.map(product =>
        (
            <div className="col-md-4" key={product.id}>
            <div className="thumbnail text-center">
              <a href="#" onClick={e => addToCart(e, product)}>
                  <img src={`/products/${product.sku}_2.jpg`} alt={product.title} />
                  <p>
                  {product.title}
              </p>
              </a>
              <div>
                  <b>{util.formatCurrency(product.price)}</b>
                  <button className="btn btn-primary" onClick={(e) => addToCart(e, product)} >Add To Cart</button>
              </div>
            </div>
        </div>
        )
    )
 return (
     <div className="row">
         {productItems}
     </div>
 );
}

export default Products;