Solution: Alberto Chica Santillana

.eslintrc.js

@@ -49,7 +49,7 @@ module.exports = {
     },
   ],
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": "off",
     "react/jsx-filename-extension": "off",
     "import/prefer-default-export": "off",
     "prefer-destructuring": "off",

src/App.js

@@ -1,9 +1,25 @@
 import React, { Component } from "react";
-
 import Home from "./pages/Home";
-
 import * as api from "./api";
 
+function buildNewCartItem(cartItem) {
+  if (cartItem.quantity >= cartItem.unitsInStock) {
+    /* Si la cantidad a comprar supera el stock  o modificara cantidad. */
+    return cartItem;
+  }
+
+  return {
+    id: cartItem.id,
+    title: cartItem.title,
+    img: cartItem.img,
+    price: cartItem.price,
+    unitsInStock: cartItem.unitsInStock,
+    createdAt: cartItem.createdAt,
+    updatedAt: cartItem.updatedAt,
+    quantity: cartItem.quantity + 1,
+  };
+}
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -15,32 +31,179 @@ class App extends Component {
       hasError: false,
       loadingError: null,
     };
+
+    this.handleAddToCart = this.handleAddToCart.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSetFavorite = this.handleSetFavorite.bind(this);
+    this.handleUpVote = this.handleUpVote.bind(this);
+    this.handleDownVote = this.handleDownVote.bind(this);
   }
 
   componentDidMount() {
+    const json = JSON.parse(localStorage.getItem("react"));
+    if (!json) {
+      this.setState({
+        isLoading: true,
+      });
+
+      api.getProducts().then((data) => {
+        this.setState({
+          products: data,
+          isLoading: false,
+        });
+      });
+    }
+
     this.setState({
-      isLoading: true,
+      products: json.products,
+      cartItems: json.cartItems,
     });
+  }
 
-    api.getProducts().then((data) => {
-      this.setState({
-        products: data,
-        isLoading: false,
+  componentDidUpdate() {
+    const { cartItems, products } = this.state;
+    localStorage.setItem("react", JSON.stringify({ cartItems, products }));
+  }
+
+  handleAddToCart(productId) {
+    const { products, cartItems } = this.state;
+    const foundCart = cartItems.find((i) => i.id === productId);
+    const product = products.find((i) => i.id === productId);
+
+    /* Si el producto esta dentro se del cartItems */
+    if (foundCart) {
+      const updatedCart = cartItems.map((item) => {
+        if (item.id !== productId) {
+          /*  Si el producto comprado no esta en la lista */
+          return item;
+        }
+
+        if (item.quantity >= item.unitsInStock) {
+          /* Si la cantidad que compras es mayor a la unidades en stock */
+          return item;
+        }
+        return {
+          ...item,
+          quantity: item.quantity + 1,
+        };
       });
+
+      this.setState({ cartItems: updatedCart });
+      return;
+    }
+
+    const updatedProduct = buildNewCartItem(product);
+    this.setState((prevState) => ({
+      cartItems: [...prevState.cartItems, updatedProduct],
+    }));
+  }
+
+  handleChange(event, productId) {
+    const { cartItems } = this.state;
+
+    const updatedItems = cartItems.map((item) => {
+      if (item.id === productId && item.quantity <= item.unitsInStock) {
+        return {
+          ...item,
+          quantity: Number(event.target.value),
+        };
+      }
+      return item;
+    });
+
+    this.setState({
+      cartItems: updatedItems,
+    });
+  }
+
+  handleRemove(productId) {
+    const { cartItems } = this.state;
+
+    const updatedCart = cartItems.filter((item) => item.id !== productId);
+
+    this.setState({
+      cartItems: updatedCart,
+    });
+  }
+
+  handleDownVote(productId) {
+    const { products } = this.state;
+
+    const updatedProducts = products.map((item) => {
+      if (item.id === productId) {
+        if (
+          item.votes.downVotes.currentValue < item.votes.downVotes.lowerLimit
+        ) {
+          return {
+            ...item,
+            votes: {
+              upVotes: {
+                upperLimit: 10,
+                currentValue: item.votes.upVotes.currentValue,
+              },
+              downVotes: {
+                lowerLimit: 10,
+                currentValue: item.votes.downVotes.currentValue + 1,
+              },
+            },
+          };
+        }
+      }
+      return item;
     });
+
+    this.setState({ products: updatedProducts });
   }
 
-  // handleAddToCart(productId) {}
+  handleUpVote(productId) {
+    const { products } = this.state;
 
-  // handleChange(event, productId) {}
+    const updatedProducts = products.map((item) => {
+      if (item.id === productId) {
+        if (item.votes.upVotes.currentValue < item.votes.upVotes.upperLimit) {
+          return {
+            ...item,
+            votes: {
+              upVotes: {
+                upperLimit: 10,
+                currentValue: item.votes.upVotes.currentValue + 1,
+              },
+              downVotes: {
+                lowerLimit: 10,
+                currentValue: item.votes.downVotes.currentValue,
+              },
+            },
+          };
+        }
+      }
+      return item;
+    });
 
-  // handleRemove(productId) {}
+    this.setState({ products: updatedProducts });
+  }
 
-  // handleDownVote(productId) {}
+  handleSetFavorite(productId) {
+    const { products } = this.state;
 
-  // handleUpVote(productId) {}
+    const updatedProducts = products.map((item) => {
+      if (item.id === productId) {
+        if (item.isFavorite) {
+          return {
+            ...item,
+            isFavorite: false,
+          };
+        }
+        return {
+          ...item,
+          isFavorite: true,
+        };
+      }
+      return item;
+    });
 
-  // handleSetFavorite(productId) {}
+    this.setState({ products: updatedProducts });
+  }
 
   render() {
     const {
@@ -58,12 +221,12 @@ class App extends Component {
         isLoading={isLoading}
         hasError={hasError}
         loadingError={loadingError}
-        handleDownVote={() => {}}
-        handleUpVote={() => {}}
-        handleSetFavorite={() => {}}
-        handleAddToCart={() => {}}
-        handleRemove={() => {}}
-        handleChange={() => {}}
+        handleDownVote={this.handleDownVote}
+        handleUpVote={this.handleUpVote}
+        handleSetFavorite={this.handleSetFavorite}
+        handleAddToCart={this.handleAddToCart}
+        handleRemove={this.handleRemove}
+        handleChange={this.handleChange}
       />
     );
   }

src/components/Cart/Cart.js

@@ -3,9 +3,12 @@ import React from "react";
 import ShoppingCartItem from "../ShoppingCartItem";
 import Button from "../Button";
 
-// function getCartTotal() {
-//   return 0;
-// }
+function getCartTotal(cartItems) {
+  return cartItems.reduce(
+    (accum, item) => item.price * item.quantity + accum,
+    0,
+  );
+}
 
 function Cart({ cartItems, handleRemove, handleChange, ...props }) {
   return (
@@ -41,8 +44,7 @@ function Cart({ cartItems, handleRemove, handleChange, ...props }) {
               <div className="d-flex justify-content-between">
                 <h4 className="h5">Total</h4>
                 <h4>
-                  {/* <strong>{getCartTotal(cartItems)}€</strong> */}
-                  <strong>0€</strong>
+                  <strong>{getCartTotal(cartItems)}€</strong>
                 </h4>
               </div>
               <hr />

src/components/ShoppingCartItem/ShoppingCartItem.js

@@ -5,17 +5,30 @@ import "./ShoppingCartItem.scss";
 import Button from "../Button";
 
 function ShoppingCartItem({
-  // id,
+  id,
   img,
   title,
   price,
   quantity,
-  // unitsInStock,
-  // handleChange,
-  // handleRemove,
+  unitsInStock,
+  handleChange,
+  handleRemove,
 }) {
-  function onHandleChange() {}
-  function onHandleRemove() {}
+  function onHandleChange(event) {
+    handleChange(event, id);
+  }
+  function onHandleRemove() {
+    handleRemove(id);
+  }
+
+  function buildSelectOptions(){
+    return Array.from({length: unitsInStock},(_value,index ) => {
+      const currentIndex = index + 1;
+      return(
+        <option value={currentIndex} key={currentIndex}>{currentIndex}</option>
+      );
+    })
+  }
 
   return (
     <div className="col">
@@ -46,8 +59,8 @@ function ShoppingCartItem({
                         onBlur={onHandleChange}
                         value={quantity}
                       >
-                        {/* {buildSelectOptions(unitsInStock)} */}
-                        <option value="1,">1</option>
+                        {buildSelectOptions(unitsInStock)}
+{/*                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
                         <option value="4">4</option>
@@ -56,7 +69,7 @@ function ShoppingCartItem({
                         <option value="7">7</option>
                         <option value="8">8</option>
                         <option value="9">9</option>
-                        <option value="10">10</option>
+                        <option value="10">10</option> */}
                       </select>
                     </div>
                     <div className="col col-6 col-lg-8">

src/pages/Home/Home.js

@@ -11,7 +11,7 @@ function Home({
   cartItems,
   isLoading,
   hasError,
-  // loadingError,
+  loadingError,
   handleDownVote,
   handleUpVote,
   handleSetFavorite,
@@ -36,8 +36,8 @@ function Home({
                   <p className="font-weight-bold">Buy now!</p>
                 </header>
               </div>
-              {/* {isLoading Loading products...} */}
-              {/* {hasError ...} */}
+               {isLoading && (<span>Loading products...</span>)} 
+              {hasError && (<div><h2>Something went wrong...</h2><pre><code>{loadingError}</code></pre></div>)}
               {!isLoading && !hasError && (
                 <div className="col col-12">
                   <ProductsListing