mediastream · JawaGs · Jan 9, 2024 · Jan 9, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>MediaStream - Jose Valor</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Cards/CartCard/index.js b/src/components/Cards/CartCard/index.js
@@ -0,0 +1,21 @@
+import './styles.css';
+import MovieCard from "../MovieCard";
+
+export default function CartCard({ movie, onIncrement, onDecrement }) {
+  return (
+    <li className="movies__cart-card">
+      <MovieCard movie={movie} />
+      <div className="movies__cart-card-quantity">
+        <button onClick={() => onDecrement(movie.id)}>
+          -
+        </button>
+        <span>
+          {movie.quantity}
+        </span>
+        <button onClick={() => onIncrement(movie.id)}>
+          +
+        </button>
+      </div>
+    </li>
+  );
+}
diff --git a/src/components/Cards/CartCard/styles.css b/src/components/Cards/CartCard/styles.css
@@ -0,0 +1,34 @@
+.movies__cart-card {
+  background-color: #333333;
+  margin-bottom: 1rem;
+  padding: .75em;
+  border-radius: .2em;
+}
+
+.movies__cart-card:last-child {
+  margin-bottom: 0;
+}
+
+.movies__cart-card ul li {
+  font-size: 1em;
+  line-height: 120%;
+}
+
+.movies__cart-card-quantity {
+  display: flex;
+  align-items: center;
+  margin-top: .5em;
+}
+
+.movies__cart-card span {
+  margin: 0 .5em;
+}
+
+.movies__cart-card button {
+  background-color: var(--ms-green);
+  border: none;
+  cursor: pointer;
+  font-size: .75em;
+  border-radius: .25em;
+  padding: .25em .5em;
+}
diff --git a/src/components/Cards/ListCard/index.js b/src/components/Cards/ListCard/index.js
@@ -0,0 +1,13 @@
+import './styles.css';
+import MovieCard from '../MovieCard';
+
+export default function ListCard({ movie, onAddToCart }) {
+  return (
+    <li className="movies__list-card">
+      <MovieCard movie={movie} />
+      <button onClick={() => onAddToCart(movie)}>
+        Add to cart
+      </button>
+    </li>
+  );
+}
diff --git a/src/components/Cards/ListCard/styles.css b/src/components/Cards/ListCard/styles.css
@@ -0,0 +1,25 @@
+.movies__list-card {
+  background-color: #333333;
+  margin-bottom: 1rem;
+  padding: .75em;
+  border-radius: .2em;
+}
+
+.movies__list-card:last-child {
+  margin-bottom: 0;
+}
+
+.movies__list-card ul li {
+  font-size: 1em;
+  line-height: 120%;
+}
+
+.movies__list-card button {
+  background-color: var(--ms-green);
+  border: none;
+  cursor: pointer;
+  font-size: .75em;
+  border-radius: .25em;
+  margin-top: .75em;
+  padding: .25em .5em;
+}
diff --git a/src/components/Cards/MovieCard/index.js b/src/components/Cards/MovieCard/index.js
@@ -0,0 +1,9 @@
+export default function MovieCard({ movie }) {
+  return (
+    <ul>
+      <li> ID: {movie.id} </li>
+      <li> Name: {movie.name} </li>
+      <li> Price: ${movie.price} </li>
+    </ul>
+  );
+}
diff --git a/src/components/MoviesCart/index.js b/src/components/MoviesCart/index.js
@@ -0,0 +1,17 @@
+import CartCard from "../Cards/CartCard";
+import "./styles.css";
+
+export default function MoviesCart({ cart, onIncrement, onDecrement, getTotal }) {
+  return (
+    <div className="movies__cart">
+      <ul>
+        {cart.map(cartMovie => (
+          <CartCard key={cartMovie.id} movie={cartMovie} onDecrement={onDecrement} onIncrement={onIncrement} />
+        ))}
+      </ul>
+      <div className="movies__cart-total">
+        <p>Total: ${getTotal()}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/MoviesCart/styles.css b/src/components/MoviesCart/styles.css
@@ -0,0 +1,11 @@
+.movies__cart {
+  width: 24em;
+  background-color: #222222;
+  padding: 1em;
+  border-radius: .2em;
+}
+
+.movies__cart-total {
+  margin-top: 1em;
+  font-size: 1.25em;
+}
diff --git a/src/components/MoviesList/index.js b/src/components/MoviesList/index.js
@@ -0,0 +1,13 @@
+import './styles.css'
+import ListCard from '../Cards/ListCard';
+
+export default function MoviesList({ movies, onAddToCart }) {
+  return (
+    <div className="movies__list">
+      <ul>
+        {movies.map(movie => (
+          <ListCard key={movie.id} movie={movie} onAddToCart={onAddToCart} />))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/MoviesList/styles.css b/src/components/MoviesList/styles.css
@@ -0,0 +1,7 @@
+.movies__list {
+  width: 24em;
+  background-color: #222222;
+  padding: 1em;
+  border-radius: .2em;
+  margin-right: 2em;
+}
diff --git a/src/components/pages/Exercise01/assets/styles.css b/src/components/pages/Exercise01/assets/styles.css
@@ -6,87 +6,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.movies__list, .movies__cart {
-  width: 24em;
-}
-
-.movies__list {
-  background-color: #222222;
-  padding: 1em;
-  border-radius: .2em;
-  margin-right: 2em;
-}
-
-.movies__list-card {
-  background-color: #333333;
-  margin-bottom: 1rem;
-  padding: .75em;
-  border-radius: .2em;
-}
-
-.movies__list-card:last-child {
-  margin-bottom: 0;
-}
-
-.movies__list-card ul li {
-  font-size: 1em;
-  line-height: 120%;
-}
-
-.movies__list-card button {
-  background-color: var(--ms-green);
-  border: none;
-  cursor: pointer;
-  font-size: .75em;
-  border-radius: .25em;
-  margin-top: .75em;
-  padding: .25em .5em;
-}
-
-.movies__cart {
-  background-color: #222222;
-  padding: 1em;
-  border-radius: .2em;
-}
-
-.movies__cart-card {
-  background-color: #333333;
-  margin-bottom: 1rem;
-  padding: .75em;
-  border-radius: .2em;
-}
-
-.movies__cart-card:last-child {
-  margin-bottom: 0;
-}
-
-.movies__cart-card ul li {
-  font-size: 1em;
-  line-height: 120%;
-}
-
-.movies__cart-card-quantity {
-  display: flex;
-  align-items: center;
-  margin-top: .5em;
-}
-
-.movies__cart-card span {
-  margin: 0 .5em;
-}
-
-.movies__cart-card button {
-  background-color: var(--ms-green);
-  border: none;
-  cursor: pointer;
-  font-size: .75em;
-  border-radius: .25em;
-  padding: .25em .5em;
-}
-
-.movies__cart-total {
-  margin-top: 1em;
-  font-size: 1.25em;
 }
diff --git a/src/components/pages/Exercise01/db.js b/src/components/pages/Exercise01/db.js
@@ -0,0 +1,37 @@
+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
+  }
+];
+
+export const discountRules = [
+  {
+    m: [3, 2],
+    discount: 0.25
+  },
+  {
+    m: [2, 4, 1],
+    discount: 0.5
+  },
+  {
+    m: [4, 2],
+    discount: 0.1
+  }
+];