AltCampus · PiyushChamoli · May 13, 2022
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.1",
+    "react-scripts": "^4.0.2",
+    "redux": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/components/Cart.js b/src/components/Cart.js
@@ -1,54 +1,49 @@
-import React from 'react';
-import CartItem from './CartItem';
+import React from "react";
+import { connect } from "react-redux";
+import CartItem from "./CartItem";
 
 class Cart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-    };
-  }
   close = () => {
-    this.setState({ isOpen: false });
+    this.props.dispatch({ type: "isOpen", payload: false });
   };
   open = () => {
-    this.setState({ isOpen: true });
+    this.props.dispatch({ type: "isOpen", payload: true });
   };
   render() {
-    const { isOpen } = this.state;
+    const { isOpen } = this.props;
     if (!isOpen) {
       return <ClosedCart open={this.open} />;
     }
     return (
-      <aside className='cart'>
-        <div onClick={this.close} className='close-btn'>
+      <aside className="cart">
+        <div onClick={this.close} className="close-btn">
           X
         </div>
-        <div className='cart-body'>
-          <div className='cart-heading'>
-            <div className='cart-icon'>
+        <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'
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                className="icon"
               >
                 <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
+                  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'
+                  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">4</span>
             </div>
             <h2>Cart</h2>
           </div>
           <CartItem />
           <CartItem />
 
-          <div className='cart-checkout'>
+          <div className="cart-checkout">
             <div>
               <p>SUBTOTAL</p>
               <p>$ 199.00</p>
@@ -63,28 +58,34 @@ class Cart extends React.Component {
 
 function ClosedCart(props) {
   return (
-    <div className='close-cart'>
-      <span onClick={props.open} className='open-btn'>
-        <div className='cart-icon'>
+    <div className="close-cart">
+      <span onClick={props.open} className="open-btn">
+        <div className="cart-icon">
           <svg
-            xmlns='http://www.w3.org/2000/svg'
-            fill='none'
-            viewBox='0 0 24 24'
-            stroke='currentColor'
-            className='icon'
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            className="icon"
           >
             <path
-              strokeLinecap='round'
-              strokeLinejoin='round'
+              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'
+              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">4</span>
         </div>
       </span>
     </div>
   );
 }
 
-export default Cart;
+function handleOpen(state) {
+  return {
+    isOpen: state.isOpen,
+  };
+}
+
+export default connect(handleOpen)(Cart);
diff --git a/src/components/CartItem.js b/src/components/CartItem.js
@@ -1,23 +1,17 @@
-import React from 'react';
+import React from "react";
 
 function CartItem(props) {
   return (
-    <div className='cart-item'>
-      <img
-        src='/static/products/876661122392077_2.jpg'
-        alt=''
-        width='80'
-      />
-      <div className='cart-item-details'>
-        <p className='cart-item-name'>
-          Sphynx Tie Dye Wine T-Shirt
-        </p>
+    <div className="cart-item">
+      <img src="/static/products/876661122392077_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>
       </div>
-      <div className='cart-price'>
-        <p className='cart-cross'>x</p>
-        <p className='price'>$ 19.00</p>
+      <div className="cart-price">
+        <p className="cart-cross">x</p>
+        <p className="price">$ 19.00</p>
         <div>
           <Increment />
           <Decrement />
@@ -30,35 +24,35 @@ function CartItem(props) {
 function Increment() {
   return (
     <svg
-      xmlns='http://www.w3.org/2000/svg'
-      fill='none'
-      viewBox='0 0 24 24'
-      stroke='currentColor'
-      className='plus-icon'
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      className="plus-icon"
     >
       <path
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeLinecap="round"
+        strokeLinejoin="round"
         strokeWidth={2}
-        d='M12 6v6m0 0v6m0-6h6m-6 0H6'
+        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
       />
     </svg>
   );
 }
 function Decrement() {
   return (
     <svg
-      xmlns='http://www.w3.org/2000/svg'
-      fill='none'
-      viewBox='0 0 24 24'
-      stroke='currentColor'
-      className='plus-icon'
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      className="plus-icon"
     >
       <path
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeLinecap="round"
+        strokeLinejoin="round"
         strokeWidth={2}
-        d='M18 12H6'
+        d="M18 12H6"
       />
     </svg>
   );

diff --git a/src/components/OrderBy.js b/src/components/OrderBy.js
@@ -2,7 +2,7 @@ function OrderBy(props) {
   return (
     <div className="sort">
       Order by
-      <select value={props.selectedOrder} onChange={props.handleOrderBy}>
+      <select onChange={props.handleOrderBy}>
         <option value="">Select</option>
         <option value="lowest">Lowest to highest</option>
         <option value="highest">Highest to lowest</option>

diff --git a/src/components/Products.js b/src/components/Products.js
@@ -1,53 +1,40 @@
 import React from "react";
+import { connect } from "react-redux";
 import OrderBy from "./OrderBy";
 
-class Products extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOrder: "",
-    };
-  }
-  handleOrderBy = (event) => {
-    this.setState({ selectedOrder: event.target.value });
-  };
-
-  handleOrderProducts = (order, products) => {
-    let sortedProducts = [...products];
-    if (order === "highest") {
-      sortedProducts = sortedProducts.sort((a, b) => b.price - a.price);
+function Products(props) {
+  function handleOrderBy({ target }) {
+    let value = target.value;
+    console.log(value, "value");
+    if (value === "") {
+      props.dispatch({ type: "" });
     }
-    if (order === "lowest") {
-      sortedProducts = sortedProducts.sort((a, b) => a.price - b.price);
+    if (value === "highest") {
+      props.dispatch({ type: "highest" });
+    }
+    if (value === "lowest") {
+      props.dispatch({ type: "lowest" });
     }
-    return sortedProducts;
-  };
-
-  render() {
-    let { selectedOrder } = this.state;
-    let products = this.handleOrderProducts(selectedOrder, this.props.data);
-
-    return (
-      <div>
-        <div className="products-filter">
-          <p>
-            {`${this.props.data.length} Product${
-              this.props.data.length > 1 ? "s" : ""
-            } found.`}{" "}
-          </p>
-          <OrderBy
-            selectedOrder={selectedOrder}
-            handleOrderBy={this.handleOrderBy}
-          />
-        </div>
-        <div className="flex wrap">
-          {products.map((product) => (
-            <Product {...product} />
-          ))}
-        </div>
-      </div>
-    );
   }
+  let products = props.products;
+  console.log(props.products.length);
+  return (
+    <div>
+      <div className="products-filter">
+        <p>
+          {`${props.data.length} Product${
+            props.data.length > 1 ? "s" : ""
+          } found.`}{" "}
+        </p>
+        <OrderBy handleOrderBy={handleOrderBy} />
+      </div>
+      <div className="flex wrap">
+        {products.map((product) => (
+          <Product {...product} key={product.sku} />
+        ))}
+      </div>
+    </div>
+  );
 }
 
 function Product(props) {
@@ -70,4 +57,11 @@ function Product(props) {
     </div>
   );
 }
-export default Products;
+
+function handleProducts(state) {
+  return {
+    products: state.products,
+  };
+}
+
+export default connect(handleProducts)(Products);
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -4,11 +4,14 @@ function Sidebar({ products }) {
     return acc;
   }, []);
   let uniqueSizes = [...new Set(sizes)];
+
   return (
     <aside className="flex-20 sidebar">
       <div className="flex wrap">
         {uniqueSizes.map((size) => (
-          <span className="size">{size}</span>
+          <span key={size} className="size">
+            {size}{" "}
+          </span>
         ))}
       </div>
     </aside>

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
+import { Provider } from "react-redux";
 import App from "./components/App";
+import store from "./store";
 import "./style/index.css";
 
-render(<App />, document.getElementById("root"));
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root")
+);
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,25 @@
+import { createStore } from "redux";
+import data from "../data.json";
+
+let products = data.products;
+
+function Reducer(state = { isOpen: false, products: [] }, action) {
+  switch (action.type) {
+    case "highest":
+      state.products = [...products].sort((a, b) => b.price - a.price);
+      return { ...state, products: state.products };
+    case "lowest":
+      state.products = [...products].sort((a, b) => a.price - b.price);
+      return { ...state, products: state.products };
+    case "isOpen":
+      state.isOpen = action.payload;
+      return { ...state, isOpen: state.isOpen };
+    default:
+      state.products = [...products];
+      return { ...state, products: state.products };
+  }
+}
+
+let store = createStore(Reducer);
+
+export default store;