assembler-institute · gonzalogarahuetes · Oct 13, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,63 +1,63 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    jest: true,
-    "jest/globals": true,
-  },
-  extends: [
-    "airbnb",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:jsx-a11y/recommended",
-    "prettier",
-  ],
-  parser: "@babel/eslint-parser",
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: "module",
-    requireConfigFile: "false",
-    jsx: true,
-  },
-  plugins: [
-    "html",
-    "jest",
-    "react",
-    "react-hooks",
-    "jsx-a11y",
-    "markdown",
-    "react-hooks",
-    "import",
-    "prettier",
-  ],
-  settings: {
-    react: {
-      version: "detect",
-    },
-    jest: {
-      version: 26,
-    },
-  },
-  overrides: [
-    {
-      files: ["*.html"],
-      parser: "@html-eslint/parser",
-      extends: ["plugin:@html-eslint/recommended"],
-    },
-  ],
-  rules: {
-    "prettier/prettier": "error",
-    "react/jsx-filename-extension": "off",
-    "import/prefer-default-export": "off",
-    "prefer-destructuring": "off",
-    "object-shorthand": "off",
-    "react/jsx-props-no-spreading": "off",
-    "arrow-body-style": "off",
-    "no-underscore-dangle": "off",
-    "react/forbid-prop-types": "off",
-    "react/prop-types": "off",
-  },
-};
+// module.exports = {
+//   env: {
+//     browser: true,
+//     es2021: true,
+//     jest: true,
+//     "jest/globals": true,
+//   },
+//   extends: [
+//     "airbnb",
+//     "eslint:recommended",
+//     "plugin:react/recommended",
+//     "plugin:jest/recommended",
+//     "plugin:import/errors",
+//     "plugin:import/warnings",
+//     "plugin:jsx-a11y/recommended",
+//     "prettier",
+//   ],
+//   parser: "@babel/eslint-parser",
+//   parserOptions: {
+//     ecmaVersion: 12,
+//     sourceType: "module",
+//     requireConfigFile: "false",
+//     jsx: true,
+//   },
+//   plugins: [
+//     "html",
+//     "jest",
+//     "react",
+//     "react-hooks",
+//     "jsx-a11y",
+//     "markdown",
+//     "react-hooks",
+//     "import",
+//     "prettier",
+//   ],
+//   settings: {
+//     react: {
+//       version: "detect",
+//     },
+//     jest: {
+//       version: 26,
+//     },
+//   },
+//   overrides: [
+//     {
+//       files: ["*.html"],
+//       parser: "@html-eslint/parser",
+//       extends: ["plugin:@html-eslint/recommended"],
+//     },
+//   ],
+//   rules: {
+//     "prettier/prettier": "error",
+//     "react/jsx-filename-extension": "off",
+//     "import/prefer-default-export": "off",
+//     "prefer-destructuring": "off",
+//     "object-shorthand": "off",
+//     "react/jsx-props-no-spreading": "off",
+//     "arrow-body-style": "off",
+//     "no-underscore-dangle": "off",
+//     "react/forbid-prop-types": "off",
+//     "react/prop-types": "off",
+//   },
+// };
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import { BrowserRouter, Route } from "react-router-dom";
 
 import Home from "./pages/Home";
@@ -39,61 +39,41 @@ function buildNewCartItem(cartItem) {
   };
 }
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      products: [],
-      cartItems: [],
-      isLoading: false,
-      hasError: false,
-      loadingError: null,
-    };
-
-    this.handleAddToCart = this.handleAddToCart.bind(this);
-    this.handleRemove = this.handleRemove.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleDownVote = this.handleDownVote.bind(this);
-    this.handleUpVote = this.handleUpVote.bind(this);
-    this.handleSetFavorite = this.handleSetFavorite.bind(this);
-    this.saveNewProduct = this.saveNewProduct.bind(this);
-  }
+function App(props) {
+
+  const [products, setProducts] = useState([])
+  const [cartItems, setCartItems] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasError, setHasError] = useState(false)
+  const [loadingError, setLoadingError] = useState(null)
+  const [newProductFormOpen, setNewProductFormOpen] = useState(false)
 
-  componentDidMount() {
+
+  useEffect(() => {
     const prevItems = loadLocalStorageData();
 
     if (!prevItems) {
-      this.setState({
-        isLoading: true,
-      });
+      setIsLoading(true)
 
       api.getProducts().then((data) => {
-        this.setState({
-          products: data,
-          isLoading: false,
-        });
-      });
-      return;
+        setProducts(data);
+        setIsLoading(false)
+      })
+      return
     }
+    setCartItems(prevItems.cartItems);
+    setProducts(prevItems.products)
+  }, [])
 
-    this.setState({
-      cartItems: prevItems.cartItems,
-      products: prevItems.products,
-    });
-  }
-
-  componentDidUpdate() {
-    const { cartItems, products } = this.state;
-
+  useEffect(() => {
     localStorage.setItem(
       LOCAL_STORAGE_KEY,
       JSON.stringify({ cartItems, products }),
     );
-  }
+  }, [cartItems, products])
+
 
-  handleAddToCart(productId) {
-    const { cartItems, products } = this.state;
+  function handleAddToCart(productId) {
 
     const prevCartItem = cartItems.find((item) => item.id === productId);
     const foundProduct = products.find((product) => product.id === productId);
@@ -113,19 +93,18 @@ class App extends Component {
           quantity: item.quantity + 1,
         };
       });
-
-      this.setState({ cartItems: updatedCartItems });
+      setCartItems(updatedCartItems)
       return;
     }
+
 
     const updatedProduct = buildNewCartItem(foundProduct);
-    this.setState((prevState) => ({
-      cartItems: [...prevState.cartItems, updatedProduct],
-    }));
+    setCartItems((prevCartItems) => {
+      return [...prevCartItems, updatedProduct]
+    })
   }
 
-  handleChange(event, productId) {
-    const { cartItems } = this.state;
+  function handleChange(event, productId) {
 
     const updatedCartItems = cartItems.map((item) => {
       if (item.id === productId && item.quantity <= item.unitsInStock) {
@@ -137,27 +116,20 @@ class App extends Component {
 
       return item;
     });
-
-    this.setState({ cartItems: updatedCartItems });
+    setCartItems(updatedCartItems)
   }
 
-  handleRemove(productId) {
-    const { cartItems } = this.state;
+  function handleRemove(productId) {
     const updatedCartItems = cartItems.filter((item) => item.id !== productId);
-
-    this.setState({
-      cartItems: updatedCartItems,
-    });
+    setCartItems(updatedCartItems)
   }
 
-  handleDownVote(productId) {
-    const { products } = this.state;
-
+  function handleDownVote(productId) {
     const updatedProducts = products.map((product) => {
       if (
         product.id === productId &&
         product.votes.downVotes.currentValue <
-          product.votes.downVotes.lowerLimit
+        product.votes.downVotes.lowerLimit
       ) {
         return {
           ...product,
@@ -170,15 +142,12 @@ class App extends Component {
           },
         };
       }
-
       return product;
     });
-
-    this.setState({ products: updatedProducts });
+    setProducts(updatedProducts)
   }
 
-  handleUpVote(productId) {
-    const { products } = this.state;
+  function handleUpVote(productId) {
 
     const updatedProducts = products.map((product) => {
       if (
@@ -199,12 +168,10 @@ class App extends Component {
 
       return product;
     });
-
-    this.setState({ products: updatedProducts });
+    setProducts(updatedProducts)
   }
 
-  handleSetFavorite(productId) {
-    const { products } = this.state;
+  function handleSetFavorite(productId) {
 
     const updatedProducts = products.map((product) => {
       if (product.id === productId) {
@@ -216,27 +183,16 @@ class App extends Component {
 
       return product;
     });
-
-    this.setState({ products: updatedProducts });
+    setProducts(updatedProducts)
   }
 
-  saveNewProduct(newProduct) {
-    this.setState((prevState) => ({
-      products: [newProduct, ...prevState.products],
-      newProductFormOpen: !prevState.newProductFormOpen,
-    }));
+  function saveNewProduct(newProduct) {
+    setProducts((prevProducts)=>{
+      return[newProduct, ...prevProducts]
+    });
+    setNewProductFormOpen(true)
   }
-
-  render() {
-    const {
-      cartItems,
-      products,
-      isLoading,
-      hasError,
-      loadingError,
-    } = this.state;
-
-    return (
+  return (
       <BrowserRouter>
         <Route
           path="/"
@@ -250,25 +206,24 @@ class App extends Component {
               isLoading={isLoading}
               hasError={hasError}
               loadingError={loadingError}
-              handleDownVote={this.handleDownVote}
-              handleUpVote={this.handleUpVote}
-              handleSetFavorite={this.handleSetFavorite}
-              handleAddToCart={this.handleAddToCart}
-              handleRemove={this.handleRemove}
-              handleChange={this.handleChange}
+              handleDownVote={handleDownVote}
+              handleUpVote={handleUpVote}
+              handleSetFavorite={handleSetFavorite}
+              handleAddToCart={handleAddToCart}
+              handleRemove={handleRemove}
+              handleChange={handleChange}
             />
           )}
         />
         <Route
           path="/new-product"
           exact
           render={(routeProps) => (
-            <NewProduct {...routeProps} saveNewProduct={this.saveNewProduct} />
+            <NewProduct {...routeProps} saveNewProduct={saveNewProduct} />
           )}
         />
       </BrowserRouter>
     );
-  }
 }
 
 export default App;
diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
@@ -18,7 +18,7 @@ function Cart({ cartItems, handleRemove, handleChange, ...props }) {
           <hr className="mb-3" />
         </div>
 
-        {cartItems.length > 0 ? (
+        {cartItems.length >0 ? (
           cartItems.map((item) => (
             <ShoppingCartItem
               key={item.id}