From d458c367923b3a69c037ad6d7b0f19ebf1b25831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tan=20Zu=C3=B1iga=20=F0=9F=9A=80?=
 <25267490+TanZng@users.noreply.github.com>
Date: Thu, 7 Oct 2021 18:20:30 -0500
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=A8=20Fix=20Reto=20#5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/Menu.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/Menu.scss b/src/styles/Menu.scss
index 9a8e600..e818676 100644
--- a/src/styles/Menu.scss
+++ b/src/styles/Menu.scss
@@ -9,6 +9,7 @@
 	position: absolute;
 	top: 60px;
 	right: 50px;
+	background-color: white;
 }
 .Menu ul {
 	list-style: none;

From a35685554118f09acd8bda609ceca11184f14eac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tan=20Zu=C3=B1iga=20=F0=9F=9A=80?=
 <25267490+TanZng@users.noreply.github.com>
Date: Thu, 7 Oct 2021 18:30:28 -0500
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A8=20Fix=20Reto=20#3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔨 Fix Reto #3
---
 src/components/Header.jsx    | 16 +++------
 src/containers/MyOrder.jsx   |  4 +--
 src/hooks/useInitialState.js | 66 +++++++++++++++++++++++-------------
 3 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index dd80b3f..bf1c36c 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -8,13 +8,7 @@ import AppContext from '../context/AppContext';
 import shoppingCart from '@icons/icon_shopping_cart.svg';
 
 const Header = () => {
-	const [toggle, setToggle] = useState(false);
-	const [toggleOrders, setToggleOrders] = useState(false);
-	const { state } = useContext(AppContext);
-
-	const handleToggle = () => {
-		setToggle(!toggle);
-	}
+	const { state, toggleOrder, toggleMenu } = useContext(AppContext);
 
 	return (
 		<nav>
@@ -44,20 +38,20 @@ const Header = () => {
 			</div>
 			<div className="navbar-right">
 				<ul>
-					<li className="navbar-email" onClick={handleToggle}>
+					<li className="navbar-email" onClick={()=>toggleMenu()}>
 						platzi@example.com
 					</li>
 					<li
 						className="navbar-shopping-cart"
-						onClick={() => setToggleOrders(!toggleOrders)}
+						onClick={() => toggleOrder()}
 					>
 						<img src={shoppingCart} alt="shopping cart" />
 						{state.cart.length > 0 ? <div>{state.cart.length}</div> : null}
 					</li>
 				</ul>
 			</div>
-			{toggle && <Menu />}
-			{toggleOrders && <MyOrder />}
+			{state.menuIsOpen && <Menu />}
+			{state.orderIsOpen && <MyOrder />}
 		</nav>
 	);
 }
diff --git a/src/containers/MyOrder.jsx b/src/containers/MyOrder.jsx
index cec4df6..ae053b6 100644
--- a/src/containers/MyOrder.jsx
+++ b/src/containers/MyOrder.jsx
@@ -5,7 +5,7 @@ import '@styles/MyOrder.scss';
 import arrow from '@icons/flechita.svg';
 
 const MyOrder = () => {
-	const { state } = useContext(AppContext);
+	const { state, toggleOrder } = useContext(AppContext);
 
 	const sumTotal = () => {
 		const reducer = (accumalator, currentValue) => accumalator + currentValue.price;
@@ -16,7 +16,7 @@ const MyOrder = () => {
 	return (
 		<aside className="MyOrder">
 			<div className="title-container">
-				<img src={arrow} alt="arrow" />
+				<img src={arrow} alt="arrow" onClick={()=> toggleOrder()} />
 				<p className="title">My order</p>
 			</div>
 			<div className="my-order-content">
diff --git a/src/hooks/useInitialState.js b/src/hooks/useInitialState.js
index b4cb363..beb92b1 100644
--- a/src/hooks/useInitialState.js
+++ b/src/hooks/useInitialState.js
@@ -1,31 +1,49 @@
 import { useState } from "react";
 
 const initialState = {
-	cart: [],
-}
+  cart: [],
+  orderIsOpen: false,
+  menuIsOpen: false,
+};
 
 const useInitialState = () => {
-	const [state, setState] = useState(initialState);
-
-	const addToCart = (payload) => {
-		setState({
-			...state,
-			cart: [...state.cart, payload]
-		});
-	};
-
-	const removeFromCart = (payload) => {
-		setState({
-			...state,
-			cart: state.cart.filter(items => items.id !== payload.id),
-		});
-	}
-
-	return {
-		state,
-		addToCart,
-		removeFromCart
-	}
-}
+  const [state, setState] = useState(initialState);
+
+  const addToCart = (payload) => {
+    setState({
+      ...state,
+      cart: [...state.cart, payload],
+    });
+  };
+
+  const removeFromCart = (payload) => {
+    setState({
+      ...state,
+      cart: state.cart.filter((items) => items.id !== payload.id),
+    });
+  };
+
+  const toggleOrder = () => {
+    setState({
+      ...state,
+      orderIsOpen: !state.orderIsOpen,
+    });
+  };
+
+  const toggleMenu = () => {
+    setState({
+      ...state,
+      menuIsOpen: !state.menuIsOpen,
+    });
+  };
+
+  return {
+    state,
+    addToCart,
+    removeFromCart,
+    toggleOrder,
+    toggleMenu,
+  };
+};
 
 export default useInitialState;

From 1e76783eb6ba758ef19b2ec183671d32bca65e81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tan=20Zu=C3=B1iga=20=F0=9F=9A=80?=
 <25267490+TanZng@users.noreply.github.com>
Date: Thu, 7 Oct 2021 18:37:07 -0500
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=94=A8=20Fix=20Reto=20#7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.jsx      | 4 ++--
 src/components/OrderItem.jsx   | 2 +-
 src/components/ProductItem.jsx | 2 +-
 src/containers/MyOrder.jsx     | 2 +-
 src/styles/global.css          | 3 +++
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index bf1c36c..04de0de 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -38,14 +38,14 @@ const Header = () => {
 			</div>
 			<div className="navbar-right">
 				<ul>
-					<li className="navbar-email" onClick={()=>toggleMenu()}>
+					<li className="navbar-email pointer" onClick={()=>toggleMenu()}>
 						platzi@example.com
 					</li>
 					<li
 						className="navbar-shopping-cart"
 						onClick={() => toggleOrder()}
 					>
-						<img src={shoppingCart} alt="shopping cart" />
+						<img className="pointer" src={shoppingCart} alt="shopping cart" />
 						{state.cart.length > 0 ? <div>{state.cart.length}</div> : null}
 					</li>
 				</ul>
diff --git a/src/components/OrderItem.jsx b/src/components/OrderItem.jsx
index cb0712e..44a6391 100644
--- a/src/components/OrderItem.jsx
+++ b/src/components/OrderItem.jsx
@@ -17,7 +17,7 @@ const OrderItem = ({ product }) => {
 			</figure>
 			<p>{product.title}</p>
 			<p>${product.price}</p>
-			<img src={close} alt="close" onClick={() => handleRemove(product)} />
+			<img className="pointer" src={close} alt="close" onClick={() => handleRemove(product)} />
 		</div>
 	);
 }
diff --git a/src/components/ProductItem.jsx b/src/components/ProductItem.jsx
index 3958586..8f7b15e 100644
--- a/src/components/ProductItem.jsx
+++ b/src/components/ProductItem.jsx
@@ -19,7 +19,7 @@ const ProductItem = ({ product }) => {
 					<p>{product.title}</p>
 				</div>
 				<figure onClick={() => handleClick(product)} >
-					<img src={addToCartImage} alt="" />
+					<img className="pointer" src={addToCartImage} alt="" />
 				</figure>
 			</div>
 		</div>
diff --git a/src/containers/MyOrder.jsx b/src/containers/MyOrder.jsx
index ae053b6..b7483ed 100644
--- a/src/containers/MyOrder.jsx
+++ b/src/containers/MyOrder.jsx
@@ -16,7 +16,7 @@ const MyOrder = () => {
 	return (
 		<aside className="MyOrder">
 			<div className="title-container">
-				<img src={arrow} alt="arrow" onClick={()=> toggleOrder()} />
+				<img className="pointer" src={arrow} alt="arrow" onClick={()=> toggleOrder()} />
 				<p className="title">My order</p>
 			</div>
 			<div className="my-order-content">
diff --git a/src/styles/global.css b/src/styles/global.css
index d476df7..55761f7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,3 +2,6 @@ body {
 	margin: 0;
 	font-family: 'Quicksand', sans-serif;
 }
+a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
+       cursor: pointer;
+}
\ No newline at end of file

From 894966dc61674fd93a5e8010d871c1cd3e10b43d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tan=20Zu=C3=B1iga=20=F0=9F=9A=80?=
 <25267490+TanZng@users.noreply.github.com>
Date: Thu, 7 Oct 2021 19:06:27 -0500
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=94=A8=20Fix=20Reto=20#4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProductItem.jsx | 9 ++++++---
 src/containers/MyOrder.jsx     | 4 ++--
 src/hooks/useInitialState.js   | 4 +++-
 src/styles/ProductItem.scss    | 6 ++++++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/ProductItem.jsx b/src/components/ProductItem.jsx
index 8f7b15e..f632191 100644
--- a/src/components/ProductItem.jsx
+++ b/src/components/ProductItem.jsx
@@ -2,12 +2,14 @@ import React, { useContext } from 'react';
 import '@styles/ProductItem.scss';
 import AppContext from '../context/AppContext';
 import addToCartImage from '@icons/bt_add_to_cart.svg';
+import addedToCartImage from '@icons/bt_added_to_cart.svg';
 
 const ProductItem = ({ product }) => {
-	const { addToCart } = useContext(AppContext);
+	const { state, addToCart } = useContext(AppContext);
 
 	const handleClick = item => {
-		addToCart(item);
+		console.log('in cart: ', state.cart.includes(item));
+		addToCart(item)
 	}
 
 	return (
@@ -19,7 +21,8 @@ const ProductItem = ({ product }) => {
 					<p>{product.title}</p>
 				</div>
 				<figure onClick={() => handleClick(product)} >
-					<img className="pointer" src={addToCartImage} alt="" />
+					{  state.cart.includes(product) ? <img className="disabled add-to-cart-btn" src={addedToCartImage} alt="added to cart" />  : <img className="add-to-cart-btn pointer" src={addToCartImage} alt="add to cart" /> }
+					
 				</figure>
 			</div>
 		</div>
diff --git a/src/containers/MyOrder.jsx b/src/containers/MyOrder.jsx
index b7483ed..e9ad372 100644
--- a/src/containers/MyOrder.jsx
+++ b/src/containers/MyOrder.jsx
@@ -20,8 +20,8 @@ const MyOrder = () => {
 				<p className="title">My order</p>
 			</div>
 			<div className="my-order-content">
-				{state.cart.map(product => (
-					<OrderItem product={product} key={`orderItem-${product.id}`} />
+				{state.cart.map((product, index) => (
+					<OrderItem product={product} key={`orderItem-${product.id}-${index}`} />
 				))}
 				<div className="order">
 					<p>
diff --git a/src/hooks/useInitialState.js b/src/hooks/useInitialState.js
index beb92b1..a13f482 100644
--- a/src/hooks/useInitialState.js
+++ b/src/hooks/useInitialState.js
@@ -12,7 +12,9 @@ const useInitialState = () => {
   const addToCart = (payload) => {
     setState({
       ...state,
-      cart: [...state.cart, payload],
+      cart: state.cart.includes(payload)
+        ? state.cart
+        : [...state.cart, payload],
     });
   };
 
diff --git a/src/styles/ProductItem.scss b/src/styles/ProductItem.scss
index e98b96b..7b4021f 100644
--- a/src/styles/ProductItem.scss
+++ b/src/styles/ProductItem.scss
@@ -34,6 +34,12 @@
 	margin-bottom: 0;
 	color: var(--very-light-pink);
 }
+.add-to-cart-btn {
+	box-shadow: var(--very-light-pink) 0px 0px 2px;
+}
+.disabled {
+	cursor: not-allowed;
+}
 @media (max-width: 640px) {
 	.cards-container {
 		grid-template-columns: repeat(auto-fill, 140px);

From d42219a34fba1f85d00feeba8cc6ca304edb50f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tan=20Zu=C3=B1iga=20=F0=9F=9A=80?=
 <25267490+TanZng@users.noreply.github.com>
Date: Thu, 7 Oct 2021 19:20:52 -0500
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=94=A8=20Fix=20Reto=20#7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.jsx      | 4 ++--
 src/components/OrderItem.jsx   | 2 +-
 src/components/ProductItem.jsx | 2 +-
 src/containers/MyOrder.jsx     | 2 +-
 src/styles/MyOrder.scss        | 1 -
 src/styles/OrderItem.scss      | 2 +-
 src/styles/global.css          | 4 ++++
 7 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 04de0de..6e93e26 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -38,14 +38,14 @@ const Header = () => {
 			</div>
 			<div className="navbar-right">
 				<ul>
-					<li className="navbar-email pointer" onClick={()=>toggleMenu()}>
+					<li className="more-clickable-area navbar-email pointer" onClick={()=>toggleMenu()}>
 						platzi@example.com
 					</li>
 					<li
 						className="navbar-shopping-cart"
 						onClick={() => toggleOrder()}
 					>
-						<img className="pointer" src={shoppingCart} alt="shopping cart" />
+						<img className="more-clickable-area pointer" src={shoppingCart} alt="shopping cart" />
 						{state.cart.length > 0 ? <div>{state.cart.length}</div> : null}
 					</li>
 				</ul>
diff --git a/src/components/OrderItem.jsx b/src/components/OrderItem.jsx
index 44a6391..866bc14 100644
--- a/src/components/OrderItem.jsx
+++ b/src/components/OrderItem.jsx
@@ -17,7 +17,7 @@ const OrderItem = ({ product }) => {
 			</figure>
 			<p>{product.title}</p>
 			<p>${product.price}</p>
-			<img className="pointer" src={close} alt="close" onClick={() => handleRemove(product)} />
+			<img className="pointer more-clickable-area" src={close} alt="close" onClick={() => handleRemove(product)} />
 		</div>
 	);
 }
diff --git a/src/components/ProductItem.jsx b/src/components/ProductItem.jsx
index f632191..1bf99dc 100644
--- a/src/components/ProductItem.jsx
+++ b/src/components/ProductItem.jsx
@@ -20,7 +20,7 @@ const ProductItem = ({ product }) => {
 					<p>${product.price}</p>
 					<p>{product.title}</p>
 				</div>
-				<figure onClick={() => handleClick(product)} >
+				<figure className="more-clickable-area" onClick={() => handleClick(product)} >
 					{  state.cart.includes(product) ? <img className="disabled add-to-cart-btn" src={addedToCartImage} alt="added to cart" />  : <img className="add-to-cart-btn pointer" src={addToCartImage} alt="add to cart" /> }
 					
 				</figure>
diff --git a/src/containers/MyOrder.jsx b/src/containers/MyOrder.jsx
index e9ad372..98ad2a8 100644
--- a/src/containers/MyOrder.jsx
+++ b/src/containers/MyOrder.jsx
@@ -16,7 +16,7 @@ const MyOrder = () => {
 	return (
 		<aside className="MyOrder">
 			<div className="title-container">
-				<img className="pointer" src={arrow} alt="arrow" onClick={()=> toggleOrder()} />
+				<img className="more-clickable-area pointer" src={arrow} alt="arrow" onClick={()=> toggleOrder()} />
 				<p className="title">My order</p>
 			</div>
 			<div className="my-order-content">
diff --git a/src/styles/MyOrder.scss b/src/styles/MyOrder.scss
index d2f9783..fe3fe1b 100644
--- a/src/styles/MyOrder.scss
+++ b/src/styles/MyOrder.scss
@@ -45,7 +45,6 @@
 	text-align: end;
 	font-weight: bold;
 }
-
 .primary-button {
 	background-color: var(--hospital-green);
 	border-radius: 8px;
diff --git a/src/styles/OrderItem.scss b/src/styles/OrderItem.scss
index f29092a..2d6648b 100644
--- a/src/styles/OrderItem.scss
+++ b/src/styles/OrderItem.scss
@@ -22,4 +22,4 @@
 .OrderItem p:nth-child(3) {
 	font-size: var(--md);
 	font-weight: bold;
-}
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 55761f7..ed4cac4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,4 +4,8 @@ body {
 }
 a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
        cursor: pointer;
+}
+.more-clickable-area{
+	padding: 1em;     
+	margin: -1em;
 }
\ No newline at end of file