Challenge Gustavo

src/components/pages/Exercise01/assets/styles.css

@@ -26,6 +26,11 @@
   border-radius: .2em;
 }
 
+.no-movie {
+  color: red;
+  font-size: 12px;;
+}
+
 .movies__list-card:last-child {
   margin-bottom: 0;
 }

src/components/pages/Exercise01/components/Cart/Cart.js

@@ -0,0 +1,26 @@
+export const Cart = ({ movies, addMovieToCart }) => {
+    return (
+        <div className="movies__list">
+        <ul>
+          {movies.map(movie => (
+            <li className="movies__list-card">
+              <ul>
+                <li>
+                  ID: {movie.id}
+                </li>
+                <li>
+                  Name: {movie.name}
+                </li>
+                <li>
+                  Price: ${movie.price}
+                </li>
+              </ul>
+              <button onClick={() => addMovieToCart({ movie })}>
+                Add to cart
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+}

src/components/pages/Exercise01/components/Movies/Movies.js

@@ -0,0 +1,37 @@
+export const Movies = ({ cart, totalPrice, decrement, increment }) => {
+    return (
+        <div className="movies__cart">
+        <ul>
+          {cart.length ? cart.map(movie => (
+            <li className="movies__cart-card">
+              <ul>
+                <li>
+                  ID: {movie.id}
+                </li>
+                <li>
+                  Name: {movie.name}
+                </li>
+                <li>
+                  Price: ${movie.price}
+                </li>
+              </ul>
+              <div className="movies__cart-card-quantity">
+                <button onClick={() => decrement({ id: movie.id })}>
+                  -
+                </button>
+                <span>
+                  {movie.quantity}
+                </span>
+                <button onClick={() => increment({ id: movie.id })}>
+                  +
+                </button>
+              </div>
+            </li>
+          )) : <p className="no-movie">There no movies in the cart!</p>}
+        </ul>
+        <div className="movies__cart-total">
+          <p>Total: ${totalPrice}</p>
+        </div>
+      </div>
+    )
+}

src/components/pages/Exercise01/hooks/useCart.js

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+
+import { discountRules } from '../utils/discountRules';
+
+export const useCart = () => {
+    const [cart, setCart] = useState([
+        {
+          id: 1,
+          name: 'Star Wars',
+          price: 20,
+          quantity: 2
+        }
+    ]);
+
+    const decrement = ({ id }) => {
+      const checkMovieQuantity = cart.find((movie) => movie.id === id && movie.quantity === 1);
+
+      if(checkMovieQuantity) {
+        const confirmRemove = window.confirm('Are you sure? This action will remove the movie!');
+
+        if(confirmRemove) {
+            const removeMovie = cart.filter((movie) => movie.id !== id);
+
+            return setCart(removeMovie);
+        };
+
+        return;
+      }
+
+      const movies = cart.map((movie) => {
+        if(movie.id === id) {
+          return {
+            ...movie,
+            quantity: movie.quantity - 1
+          }
+        }
+
+        return movie;
+      });
+
+      setCart(movies);
+    }
+
+    const increment = ({ id }) => {
+      const movies = cart.map((movie) => {
+        if(movie.id === id) {
+          return {
+            ...movie,
+            quantity: movie.quantity + 1
+          }
+        }
+
+        return movie;
+      });
+
+      setCart(movies);
+    }
+
+    const addMovieToCart = ({ movie }) => {
+      const movieExist = cart.find(({ id }) => movie.id === id);
+
+      if (movieExist) {
+        return window.alert('Movie has already been added!');
+      }
+
+      setCart([...cart, { ...movie, quantity: 1 }]);
+    }
+
+    const getTotal = () => {
+      const totalPrice = cart.reduce((total, { price, quantity }) => {
+        return total + price * quantity
+      }, 0)
+
+      const moviesId = cart.map((movie) => movie.id).sort();
+      const getDiscount = discountRules.find(({ m: rules }) => JSON.stringify(rules.sort()) === JSON.stringify(moviesId))?.discount
+
+      const calculatePrice = totalPrice - (getDiscount * totalPrice);
+
+      if(getDiscount) {
+        return calculatePrice.toFixed(2)
+      }
+
+      return totalPrice;
+    }
+
+    return {
+      cart,
+      totalPrice: getTotal(),
+      addMovieToCart,
+      increment,
+      decrement
+    }
+}

src/components/pages/Exercise01/index.js

@@ -11,116 +11,37 @@
  * You can modify all the code, this component isn't well designed intentionally. You can redesign it as you need.
  */
 
-import './assets/styles.css'
-import { useState } from 'react'
+import { Movies } from './components/Movies/Movies';
+import { Cart } from './components/Cart/Cart';
 
-export default function Exercise01 () {
-  const movies = [
-    {
-      id: 1,
-      name: 'Star Wars',
-      price: 20
-    },
-    {
-      id: 2,
-      name: 'Minions',
-      price: 25
-    },
-    {
-      id: 3,
-      name: 'Fast and Furious',
-      price: 10
-    },
-    {
-      id: 4,
-      name: 'The Lord of the Rings',
-      price: 5
-    }
-  ]
+import { useCart } from './hooks/useCart';
 
-  const discountRules = [
-    {
-      m: [3, 2],
-      discount: 0.25
-    },
-    {
-      m: [2, 4, 1],
-      discount: 0.5
-    },
-    {
-      m: [4, 2],
-      discount: 0.1
-    } 
-  ]
+import { movies } from './utils/movies';
 
-  const [cart, setCart] = useState([
-    {
-      id: 1,
-      name: 'Star Wars',
-      price: 20,
-      quantity: 2
-    }
-  ])
+import './assets/styles.css'
 
-  const getTotal = () => 0 // TODO: Implement this
+
+export default function Exercise01 () {
+  const { 
+    addMovieToCart, 
+    cart, 
+    decrement, 
+    increment, 
+    totalPrice 
+  } = useCart();
 
   return (
     <section className="exercise01">
-      <div className="movies__list">
-        <ul>
-          {movies.map(o => (
-            <li className="movies__list-card">
-              <ul>
-                <li>
-                  ID: {o.id}
-                </li>
-                <li>
-                  Name: {o.name}
-                </li>
-                <li>
-                  Price: ${o.price}
-                </li>
-              </ul>
-              <button onClick={() => console.log('Add to cart', o)}>
-                Add to cart
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="movies__cart">
-        <ul>
-          {cart.map(x => (
-            <li className="movies__cart-card">
-              <ul>
-                <li>
-                  ID: {x.id}
-                </li>
-                <li>
-                  Name: {x.name}
-                </li>
-                <li>
-                  Price: ${x.price}
-                </li>
-              </ul>
-              <div className="movies__cart-card-quantity">
-                <button onClick={() => console.log('Decrement quantity', x)}>
-                  -
-                </button>
-                <span>
-                  {x.quantity}
-                </span>
-                <button onClick={() => console.log('Increment quantity', x)}>
-                  +
-                </button>
-              </div>
-            </li>
-          ))}
-        </ul>
-        <div className="movies__cart-total">
-          <p>Total: ${getTotal()}</p>
-        </div>
-      </div>
+      <Cart 
+        movies={movies} 
+        addMovieToCart={addMovieToCart} 
+      />
+      <Movies 
+        cart={cart} 
+        increment={increment} 
+        decrement={decrement} 
+        totalPrice={totalPrice} 
+      />
     </section>
   )
 } 

src/components/pages/Exercise01/utils/discountRules.js

@@ -0,0 +1,14 @@
+export const discountRules = [
+    {
+      m: [3, 2],
+      discount: 0.25
+    },
+    {
+      m: [2, 4, 1],
+      discount: 0.5
+    },
+    {
+      m: [4, 2],
+      discount: 0.1
+    } 
+  ]

src/components/pages/Exercise01/utils/movies.js

@@ -0,0 +1,22 @@
+export const movies = [
+    {
+      id: 1,
+      name: 'Star Wars',
+      price: 20
+    },
+    {
+      id: 2,
+      name: 'Minions',
+      price: 25
+    },
+    {
+      id: 3,
+      name: 'Fast and Furious',
+      price: 10
+    },
+    {
+      id: 4,
+      name: 'The Lord of the Rings',
+      price: 5
+    }
+  ]