Solution: Álvaro Merino & Ricard Garcia

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,62 +39,42 @@ 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() {
+  const [products, setProducts] = useState([]);
+  const [cartItems, setCartItems] = useState([]);
+  const [isLoading, setLoading] = useState(false);
+  const [hasError] = useState(false);
+  const [loadingError] = useState(null);
+  const [newProductFormOpen, setForm] = useState(false);
 
-  componentDidMount() {
+  // Did mount
+  useEffect(() => {
     const prevItems = loadLocalStorageData();
 
     if (!prevItems) {
-      this.setState({
-        isLoading: true,
-      });
+      setLoading(true);
 
       api.getProducts().then((data) => {
-        this.setState({
-          products: data,
-          isLoading: false,
-        });
+        setProducts(data);
+        setLoading(false);
+        // catch(error)
       });
       return;
     }
 
-    this.setState({
-      cartItems: prevItems.cartItems,
-      products: prevItems.products,
-    });
-  }
-
-  componentDidUpdate() {
-    const { cartItems, products } = this.state;
+    setCartItems(prevItems.cartItems);
+    setProducts(prevItems.products);
+  }, []);
 
+  // Did update
+  useEffect(() => {
     localStorage.setItem(
       LOCAL_STORAGE_KEY,
       JSON.stringify({ 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);
 
@@ -114,19 +94,15 @@ class App extends Component {
         };
       });
 
-      this.setState({ cartItems: updatedCartItems });
+      setCartItems(updatedCartItems);
       return;
     }
 
     const updatedProduct = buildNewCartItem(foundProduct);
-    this.setState((prevState) => ({
-      cartItems: [...prevState.cartItems, updatedProduct],
-    }));
+    setCartItems((prevState) => [...prevState, 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) {
         return {
@@ -138,21 +114,15 @@ 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 &&
@@ -174,12 +144,10 @@ 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 (
         product.id === productId &&
@@ -200,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) {
         return {
@@ -217,58 +183,48 @@ 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((prevState) => [newProduct, ...prevState]);
+    setForm((prevState) => !prevState);
+    // eslint-disable-next-line no-console
+    console.log(newProductFormOpen);
   }
 
-  render() {
-    const {
-      cartItems,
-      products,
-      isLoading,
-      hasError,
-      loadingError,
-    } = this.state;
-
-    return (
-      <BrowserRouter>
-        <Route
-          path="/"
-          exact
-          render={(routeProps) => (
-            <Home
-              {...routeProps}
-              fullWidth
-              cartItems={cartItems}
-              products={products}
-              isLoading={isLoading}
-              hasError={hasError}
-              loadingError={loadingError}
-              handleDownVote={this.handleDownVote}
-              handleUpVote={this.handleUpVote}
-              handleSetFavorite={this.handleSetFavorite}
-              handleAddToCart={this.handleAddToCart}
-              handleRemove={this.handleRemove}
-              handleChange={this.handleChange}
-            />
-          )}
-        />
-        <Route
-          path="/new-product"
-          exact
-          render={(routeProps) => (
-            <NewProduct {...routeProps} saveNewProduct={this.saveNewProduct} />
-          )}
-        />
-      </BrowserRouter>
-    );
-  }
+  return (
+    <BrowserRouter>
+      <Route
+        path="/"
+        exact
+        render={(routeProps) => (
+          <Home
+            {...routeProps}
+            fullWidth
+            cartItems={cartItems}
+            products={products}
+            isLoading={isLoading}
+            hasError={hasError}
+            loadingError={loadingError}
+            handleDownVote={handleDownVote}
+            handleUpVote={handleUpVote}
+            handleSetFavorite={handleSetFavorite}
+            handleAddToCart={handleAddToCart}
+            handleRemove={handleRemove}
+            handleChange={handleChange}
+          />
+        )}
+      />
+      <Route
+        path="/new-product"
+        exact
+        render={(routeProps) => (
+          <NewProduct {...routeProps} saveNewProduct={saveNewProduct} />
+        )}
+      />
+    </BrowserRouter>
+  );
 }
 
 export default App;