Added shopping cart using React-redux

package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.2"
+    "react-redux": "^8.0.1",
+    "react-scripts": "^4.0.2",
+    "redux": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Cart.js

@@ -1,24 +1,35 @@
 import React from 'react';
 import CartItem from './CartItem';
+import { connect } from 'react-redux';
+import { handleCart } from '../store/action';
 
 class Cart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-    };
-  }
   close = () => {
-    this.setState({ isOpen: false });
+    this.props.dispatch(handleCart(false));
   };
   open = () => {
-    this.setState({ isOpen: true });
+    this.props.dispatch(handleCart(true));
+  };
+
+  subTotal = () => {
+    let newSubTotal = this.props.state.cartItems.reduce((a, b) => {
+      a = a + b.price * b.quantity;
+      return a;
+    }, 0);
+    return Number(newSubTotal).toFixed(2);
   };
+
   render() {
-    const { isOpen } = this.state;
+    const { isOpen } = this.props.state;
     if (!isOpen) {
-      return <ClosedCart open={this.open} />;
+      return (
+        <ClosedCart
+          open={this.open}
+          number={this.props.state.cartItems.length}
+        />
+      );
     }
+    let products = this.props.state.cartItems;
     return (
       <aside className='cart'>
         <div onClick={this.close} className='close-btn'>
@@ -41,19 +52,23 @@ class Cart extends React.Component {
                   d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'
                 />
               </svg>
-              <span className='item-count'>4</span>
+              <span className='item-count'>
+                {this.props.state.cartItems.length}
+              </span>
             </div>
             <h2>Cart</h2>
           </div>
-          <CartItem />
-          <CartItem />
-
+          {products.map((item) => {
+            return <CartItem key={item.id} item={item} />;
+          })}
           <div className='cart-checkout'>
             <div>
               <p>SUBTOTAL</p>
-              <p>$ 199.00</p>
+              <p>$ {this.subTotal()}</p>
             </div>
-            <button>CHECKOUT</button>
+            <button onClick={() => alert('Total amount is ' + this.subTotal())}>
+              CHECKOUT
+            </button>
           </div>
         </div>
       </aside>
@@ -80,11 +95,17 @@ function ClosedCart(props) {
               d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'
             />
           </svg>
-          <span className='item-count'>4</span>
+          <span className='item-count'>{props.number}</span>
         </div>
       </span>
     </div>
   );
 }
 
-export default Cart;
+function mapStateToProps(state) {
+  return {
+    state: { isOpen: state.isOpen, cartItems: state.cartItems },
+  };
+}
+
+export default connect(mapStateToProps)(Cart);

src/components/CartItem.js

@@ -1,40 +1,45 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { addToCart, removeFromCart, decrementProduct } from '../store/action';
 
 function CartItem(props) {
+  let findItem = props.item;
   return (
     <div className='cart-item'>
-      <img
-        src='/static/products/876661122392077_2.jpg'
-        alt=''
-        width='80'
-      />
+      <img src={`/static/products/${findItem.sku}_2.jpg`} alt='' width='80' />
       <div className='cart-item-details'>
-        <p className='cart-item-name'>
-          Sphynx Tie Dye Wine T-Shirt
-        </p>
-        <p>X | Front tie dye</p>
-        <p>print Quantity: 1</p>
+        <p className='cart-item-name'>{findItem.title}</p>
+        <p>X | {findItem.style}</p>
+        <p>print Quantity: {findItem.quantity}</p>
       </div>
       <div className='cart-price'>
-        <p className='cart-cross'>x</p>
-        <p className='price'>$ 19.00</p>
+        <p
+          className='cart-cross'
+          onClick={() => props.dispatch(removeFromCart(findItem.id))}
+        >
+          x
+        </p>
+        <p className='price'>
+          {findItem.currencyFormat} {findItem.price}
+        </p>
         <div>
-          <Increment />
-          <Decrement />
+          <Increment item={findItem} dispatch={props.dispatch} />
+          <Decrement item={findItem} dispatch={props.dispatch} />
         </div>
       </div>
     </div>
   );
 }
 
-function Increment() {
+function Increment(props) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
       fill='none'
       viewBox='0 0 24 24'
       stroke='currentColor'
       className='plus-icon'
+      onClick={() => props.dispatch(addToCart(props.item))}
     >
       <path
         strokeLinecap='round'
@@ -45,14 +50,15 @@ function Increment() {
     </svg>
   );
 }
-function Decrement() {
+function Decrement(props) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
       fill='none'
       viewBox='0 0 24 24'
       stroke='currentColor'
       className='plus-icon'
+      onClick={() => props.dispatch(decrementProduct(props.item.id))}
     >
       <path
         strokeLinecap='round'
@@ -64,4 +70,10 @@ function Decrement() {
   );
 }
 
-export default CartItem;
+function mapStateToProps(state) {
+  return {
+    cartItems: state.cartItems,
+  };
+}
+
+export default connect(mapStateToProps)(CartItem);

src/components/OrderBy.js

@@ -1,14 +1,27 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { handleSelectedOrder } from '../store/action';
+
 function OrderBy(props) {
+  function handleSelecte(event) {
+    props.dispatch(handleSelectedOrder(event.target.value));
+  }
   return (
-    <div className="sort">
+    <div className='sort'>
       Order by
-      <select value={props.selectedOrder} onChange={props.handleOrderBy}>
-        <option value="">Select</option>
-        <option value="lowest">Lowest to highest</option>
-        <option value="highest">Highest to lowest</option>
+      <select value={props.state.selectedOrder} onChange={handleSelecte}>
+        <option value=''>Select</option>
+        <option value='lowest'>Lowest to highest</option>
+        <option value='highest'>Highest to lowest</option>
       </select>
     </div>
   );
 }
 
-export default OrderBy;
+function mapStateToProps(state) {
+  return {
+    state,
+  };
+}
+
+export default connect(mapStateToProps)(OrderBy);

src/components/Products.js

@@ -1,48 +1,51 @@
-import React from "react";
-import OrderBy from "./OrderBy";
+import React from 'react';
+import { connect } from 'react-redux';
+import { addToCart } from '../store/action';
 
-class Products extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOrder: "",
-    };
-  }
-  handleOrderBy = (event) => {
-    this.setState({ selectedOrder: event.target.value });
-  };
+import OrderBy from './OrderBy';
 
-  handleOrderProducts = (order, products) => {
+class Products extends React.Component {
+  handleOrderProducts = (order, products, sizes) => {
     let sortedProducts = [...products];
-    if (order === "highest") {
+
+    if (sizes.length) {
+      sortedProducts = sortedProducts.filter((p) => {
+        if (sizes.filter((size) => p.availableSizes.includes(size)).length) {
+          return p;
+        }
+        return null;
+      });
+    }
+
+    if (order === 'highest') {
       sortedProducts = sortedProducts.sort((a, b) => b.price - a.price);
     }
-    if (order === "lowest") {
+    if (order === 'lowest') {
       sortedProducts = sortedProducts.sort((a, b) => a.price - b.price);
     }
     return sortedProducts;
   };
-
   render() {
-    let { selectedOrder } = this.state;
-    let products = this.handleOrderProducts(selectedOrder, this.props.data);
+    let { selectedOrder, selectedSize } = this.props.state;
+    let products = this.handleOrderProducts(
+      selectedOrder,
+      this.props.data,
+      selectedSize
+    );
 
     return (
       <div>
-        <div className="products-filter">
+        <div className='products-filter'>
           <p>
-            {`${this.props.data.length} Product${
-              this.props.data.length > 1 ? "s" : ""
-            } found.`}{" "}
+            {`${products.length} Product${
+              this.props.data.length > 1 ? 's' : ''
+            } found.`}{' '}
           </p>
-          <OrderBy
-            selectedOrder={selectedOrder}
-            handleOrderBy={this.handleOrderBy}
-          />
+          <OrderBy />
         </div>
-        <div className="flex wrap">
-          {products.map((product) => (
-            <Product {...product} />
+        <div className='flex wrap'>
+          {products.map((product, i) => (
+            <Product key={i} product={product} state={this.props} />
           ))}
         </div>
       </div>
@@ -51,23 +54,35 @@ class Products extends React.Component {
 }
 
 function Product(props) {
+  function addItem() {
+    props.state.dispatch(addToCart(props.product));
+  }
   return (
-    <div className="product-item">
-      <div className="product-label">Free Shipping</div>
+    <div className='product-item'>
+      <div className='product-label'>
+        {props.product.isFreeShipping ? 'Free Shipping' : null}
+      </div>
       <img
-        className="product-item-img"
-        src={`/static/products/${props.sku}_1.jpg`}
-        alt={props.title}
+        className='product-item-img'
+        src={`/static/products/${props.product.sku}_1.jpg`}
+        alt={props.product.title}
       />
-      <div className="product-item-details">
-        <p className="product-item-title">{props.title}</p>
-        <div className="line"></div>
-        <h3 className="product-item-price">
-          {props.currencyFormat + props.price}
+      <div className='product-item-details'>
+        <p className='product-item-title'>{props.product.title}</p>
+        <div className='line'></div>
+        <h3 className='product-item-price'>
+          {props.product.currencyFormat + props.product.price}
         </h3>
-        <button>Add To Cart</button>
+        <button onClick={addItem}>Add To Cart</button>
       </div>
     </div>
   );
 }
-export default Products;
+
+function mapStateToProps(state) {
+  return {
+    state,
+  };
+}
+
+export default connect(mapStateToProps)(Products);