redux-react-shopping-cart

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": "^7.2.5",
+    "react-scripts": "^4.0.2",
+    "redux": "^4.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -4,6 +4,7 @@ import Main from "./Main";
 import Sidebar from "./Sidebar";
 import { products } from "../data.json";
 
+
 function App() {
   return (
     <div className="wrapper flex space-between">

src/components/Cart.js

@@ -1,21 +1,18 @@
 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,
-    };
-  }
+
   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} />;
     }
@@ -87,4 +84,9 @@ function ClosedCart(props) {
   );
 }
 
-export default Cart;
+function handleOpen(state) {
+  return {
+    isOpen: state.isOpen,
+  }
+}
+export default connect(handleOpen)(Cart);

src/components/OrderBy.js

@@ -1,8 +1,10 @@
 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>

src/components/Products.js

@@ -1,55 +1,48 @@
 import React from "react";
 import OrderBy from "./OrderBy";
+import { connect } from "react-redux";
 
-class Products extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOrder: "",
-    };
-  }
-  handleOrderBy = (event) => {
-    this.setState({ selectedOrder: event.target.value });
-  };
+function Products(props) {
 
-  handleOrderProducts = (order, products) => {
-    let sortedProducts = [...products];
-    if (order === "highest") {
-      sortedProducts = sortedProducts.sort((a, b) => b.price - a.price);
+  function handleOrderBy({ target }) {
+    let value = target.value;
+    console.log(value, "value");
+    if (value === "") {
+      props.dispatch({ type: "" });
+    }
+    if (value === "highest") {
+      props.dispatch({ type: "highest" });
     }
-    if (order === "lowest") {
-      sortedProducts = sortedProducts.sort((a, b) => a.price - b.price);
+    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" : ""
+  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
-            selectedOrder={selectedOrder}
-            handleOrderBy={this.handleOrderBy}
-          />
-        </div>
-        <div className="flex wrap">
-          {products.map((product) => (
-            <Product {...product} />
-          ))}
-        </div>
+        </p>
+        <OrderBy
+
+          handleOrderBy={handleOrderBy}
+        />
       </div>
-    );
-  }
+      <div className="flex wrap">
+        {products.map((product) => (
+          <Product {...product} key={product.sku} />
+        ))}
+      </div>
+    </div>
+  );
 }
 
+
 function Product(props) {
   return (
     <div className="product-item">
@@ -70,4 +63,10 @@ function Product(props) {
     </div>
   );
 }
-export default Products;
+
+function handleProducts(state) {
+  return {
+    products: state.products
+  }
+}
+export default connect(handleProducts)(Products);

src/components/Sidebar.js

@@ -1,14 +1,16 @@
 function Sidebar({ products }) {
+
   let sizes = products.reduce((acc, cv) => {
     acc = acc.concat(cv.availableSizes);
     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>

src/index.js

@@ -2,5 +2,10 @@ import React from "react";
 import { render } from "react-dom";
 import App from "./components/App";
 import "./style/index.css";
-
-render(<App />, document.getElementById("root"));
+import { Provider } from "react-redux";
+import store from "./store/index";
+render(
+  < Provider store={store}>
+    <App />
+  </Provider>
+  , document.getElementById("root"));

src/store/index.js

@@ -0,0 +1,27 @@
+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;