AltCampus · ajay11695 · May 12, 2023 · May 12, 2023 · May 12, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.5",
+    "react-scripts": "^4.0.2",
+    "redux": "^4.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/components/Cart.js b/src/components/Cart.js
@@ -1,70 +1,64 @@
-import React from 'react';
 import CartItem from './CartItem';
+import { connect } from 'react-redux';
 
-class Cart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-    };
+function Cart(props) {
+  let totalQuantity = props.cart.reduce((acc, cv) => {
+    acc = acc + cv.quantity
+    return acc
+  }, 0)
+
+  let totalAmount = props.cart.reduce((acc, cv) => {
+    acc = acc + cv.price * cv.quantity
+    return acc
+  }, 0)
+
+  if (!props.isOpen) {
+    return <ClosedCart dispatch={props.dispatch} isOpen={props.isOpen} totalQuantity={totalQuantity}/>;
   }
-  close = () => {
-    this.setState({ isOpen: false });
-  };
-  open = () => {
-    this.setState({ isOpen: true });
-  };
-  render() {
-    const { isOpen } = this.state;
-    if (!isOpen) {
-      return <ClosedCart open={this.open} />;
-    }
-    return (
-      <aside className='cart'>
-        <div onClick={this.close} className='close-btn'>
-          X
-        </div>
-        <div className='cart-body'>
-          <div className='cart-heading'>
-            <div className='cart-icon'>
-              <svg
-                xmlns='http://www.w3.org/2000/svg'
-                fill='none'
-                viewBox='0 0 24 24'
-                stroke='currentColor'
-                className='icon'
-              >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  strokeWidth={2}
-                  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>
-            </div>
-            <h2>Cart</h2>
+  return (
+    <aside className='cart'>
+      <div onClick={() => props.dispatch({ type: 'isOpen', payload: props.isOpen ? false : true })} className='close-btn'>
+        X
+      </div>
+      <div className='cart-body'>
+        <div className='cart-heading'>
+          <div className='cart-icon'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              fill='none'
+              viewBox='0 0 24 24'
+              stroke='currentColor'
+              className='icon'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={2}
+                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'>{totalQuantity}</span>
           </div>
-          <CartItem />
-          <CartItem />
+          <h2>Cart</h2>
+        </div>
+        {props.cart.map((c) => <CartItem key={c.id} product={c} />)}
 
-          <div className='cart-checkout'>
-            <div>
-              <p>SUBTOTAL</p>
-              <p>$ 199.00</p>
-            </div>
-            <button>CHECKOUT</button>
+        <div className='cart-checkout'>
+          <div>
+            <p>SUBTOTAL</p>
+            <p>$ {totalAmount}</p>
           </div>
+          <button>CHECKOUT</button>
         </div>
-      </aside>
-    );
-  }
+      </div>
+    </aside>
+  );
 }
 
 function ClosedCart(props) {
   return (
     <div className='close-cart'>
-      <span onClick={props.open} className='open-btn'>
+      <span onClick={() => props.dispatch({ type: 'isOpen', payload: props.isOpen ? false : true })} className='open-btn'>
         <div className='cart-icon'>
           <svg
             xmlns='http://www.w3.org/2000/svg'
@@ -80,11 +74,16 @@ 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.totalQuantity}</span>
         </div>
       </span>
     </div>
   );
 }
 
-export default Cart;
+export default connect((state) => {
+  return {
+    cart: state.cart,
+    isOpen: state.isOpen
+  }
+})(Cart);
diff --git a/src/components/CartItem.js b/src/components/CartItem.js
@@ -1,35 +1,38 @@
-import React from 'react';
+import { connect } from 'react-redux';
+import { deletetcart, incrementQuantity,decrementQuantity  } from '../store/action';
 
 function CartItem(props) {
+  let { product } = props
   return (
     <div className='cart-item'>
       <img
-        src='/static/products/876661122392077_2.jpg'
+        src={`/static/products/${product.sku}_2.jpg`}
         alt=''
         width='80'
       />
       <div className='cart-item-details'>
         <p className='cart-item-name'>
-          Sphynx Tie Dye Wine T-Shirt
+          {product.title}
         </p>
-        <p>X | Front tie dye</p>
-        <p>print Quantity: 1</p>
+        <p>X | {product.style}</p>
+        <p>Quantity: {product.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(deletetcart(product.id,props.cart))}>x</p>
+        <p className='price'>$ {product.price}</p>
         <div>
-          <Increment />
-          <Decrement />
+          <Increment cart={props.cart} product={product} dispatch={props.dispatch} />
+          <Decrement cart={props.cart} product={product} dispatch={props.dispatch} />
         </div>
       </div>
     </div>
   );
 }
 
-function Increment() {
+function Increment(props) {
   return (
     <svg
+      onClick={() => props.dispatch(incrementQuantity(props.product.id, props.cart))}
       xmlns='http://www.w3.org/2000/svg'
       fill='none'
       viewBox='0 0 24 24'
@@ -45,9 +48,10 @@ function Increment() {
     </svg>
   );
 }
-function Decrement() {
+function Decrement(props) {
   return (
     <svg
+      onClick={() => props.dispatch(decrementQuantity(props.product.id, props.cart))}
       xmlns='http://www.w3.org/2000/svg'
       fill='none'
       viewBox='0 0 24 24'
@@ -64,4 +68,6 @@ function Decrement() {
   );
 }
 
-export default CartItem;
+export default connect((state) => {
+  return { cart: state.cart }
+})(CartItem);
diff --git a/src/components/OrderBy.js b/src/components/OrderBy.js
@@ -1,8 +1,11 @@
+import { connect } from "react-redux";
+import { handleOrderBy } from "../store/action";
+
 function OrderBy(props) {
   return (
     <div className="sort">
       Order by
-      <select value={props.selectedOrder} onChange={props.handleOrderBy}>
+      <select value={props.selectedOrder} onChange={(e)=>props.dispatch(handleOrderBy(e))}>
         <option value="">Select</option>
         <option value="lowest">Lowest to highest</option>
         <option value="highest">Highest to lowest</option>
@@ -11,4 +14,8 @@ function OrderBy(props) {
   );
 }
 
-export default OrderBy;
+function mapToProps(state){
+  return {selectedOrder:state.selectedOrder}
+}
+
+export default connect(mapToProps)(OrderBy);
diff --git a/src/components/Products.js b/src/components/Products.js
@@ -1,19 +1,15 @@
-import React from "react";
 import OrderBy from "./OrderBy";
+import { connect } from "react-redux";
+import { handleAddCart } from "../store/action";
 
-class Products extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOrder: "",
-    };
-  }
-  handleOrderBy = (event) => {
-    this.setState({ selectedOrder: event.target.value });
-  };
-
-  handleOrderProducts = (order, products) => {
+function Products (props) {
+  const handleOrderProducts = (order,size, products) => {
     let sortedProducts = [...products];
+    if(size){
+      sortedProducts = sortedProducts.filter((p) => {
+        return p.availableSizes.includes(size)
+    })
+    }
     if (order === "highest") {
       sortedProducts = sortedProducts.sort((a, b) => b.price - a.price);
     }
@@ -23,51 +19,53 @@ class Products extends React.Component {
     return sortedProducts;
   };
 
-  render() {
-    let { selectedOrder } = this.state;
-    let products = this.handleOrderProducts(selectedOrder, this.props.data);
+    let products = handleOrderProducts(props.selectedOrder,props.size, props.data);
 
     return (
       <div>
         <div className="products-filter">
           <p>
-            {`${this.props.data.length} Product${
-              this.props.data.length > 1 ? "s" : ""
+            {`${products.length} Product${
+              products.length > 1 ? "s" : ""
             } found.`}{" "}
           </p>
           <OrderBy
-            selectedOrder={selectedOrder}
-            handleOrderBy={this.handleOrderBy}
           />
         </div>
         <div className="flex wrap">
           {products.map((product) => (
-            <Product {...product} />
+            <Product key={product.id} product={product} cart={props.cart} dispatch={props.dispatch}/>
           ))}
         </div>
       </div>
     );
-  }
 }
 
 function Product(props) {
+  let {product,cart,dispatch}=props
   return (
     <div className="product-item">
       <div className="product-label">Free Shipping</div>
       <img
         className="product-item-img"
-        src={`/static/products/${props.sku}_1.jpg`}
-        alt={props.title}
+        src={`/static/products/${product.sku}_1.jpg`}
+        alt={product.title}
       />
       <div className="product-item-details">
-        <p className="product-item-title">{props.title}</p>
+        <p className="product-item-title">{product.title}</p>
         <div className="line"></div>
         <h3 className="product-item-price">
-          {props.currencyFormat + props.price}
+          {product.currencyFormat + product.price}
         </h3>
-        <button>Add To Cart</button>
+        <button onClick={()=>dispatch(handleAddCart(product,cart))}>Add To Cart</button>
       </div>
     </div>
   );
 }
-export default Products;
+export default connect((state)=>{
+  return {
+    selectedOrder:state.selectedOrder,
+    size:state.size,
+    cart:state.cart
+  }
+})(Products);
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -1,5 +1,8 @@
-function Sidebar({ products }) {
-  let sizes = products.reduce((acc, cv) => {
+import { connect } from "react-redux";
+import { handleSize } from "../store/action";
+
+function Sidebar(props) {
+  let sizes = props.products.reduce((acc, cv) => {
     acc = acc.concat(cv.availableSizes);
     return acc;
   }, []);
@@ -8,11 +11,13 @@ function Sidebar({ products }) {
     <aside className="flex-20 sidebar">
       <div className="flex wrap">
         {uniqueSizes.map((size) => (
-          <span className="size">{size}</span>
+          <span key={size} className={props.size===size?'size active':'size'} onClick={()=>props.dispatch(handleSize(size))}>{size}</span>
         ))}
       </div>
     </aside>
   );
 }
 
-export default Sidebar;
+export default connect((state)=>{
+  return {size:state.size}
+})(Sidebar);
diff --git a/src/index.js b/src/index.js
@@ -2,5 +2,11 @@ import React from "react";
 import { render } from "react-dom";
 import App from "./components/App";
 import "./style/index.css";
+import { Provider } from "react-redux";
+import { store } from "./store";
 
-render(<App />, document.getElementById("root"));
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+, document.getElementById("root"));