React/challenge tanx

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="more-clickable-area navbar-email pointer" onClick={()=>toggleMenu()}>
 						platzi@example.com
 					</li>
 					<li
 						className="navbar-shopping-cart"
-						onClick={() => setToggleOrders(!toggleOrders)}
+						onClick={() => toggleOrder()}
 					>
-						<img 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>
 			</div>
-			{toggle && <Menu />}
-			{toggleOrders && <MyOrder />}
+			{state.menuIsOpen && <Menu />}
+			{state.orderIsOpen && <MyOrder />}
 		</nav>
 	);
 }

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 more-clickable-area" src={close} alt="close" onClick={() => handleRemove(product)} />
 		</div>
 	);
 }

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 (
@@ -18,8 +20,9 @@ const ProductItem = ({ product }) => {
 					<p>${product.price}</p>
 					<p>{product.title}</p>
 				</div>
-				<figure onClick={() => handleClick(product)} >
-					<img src={addToCartImage} alt="" />
+				<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>
 			</div>
 		</div>

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,12 +16,12 @@ const MyOrder = () => {
 	return (
 		<aside className="MyOrder">
 			<div className="title-container">
-				<img src={arrow} alt="arrow" />
+				<img className="more-clickable-area pointer" src={arrow} alt="arrow" onClick={()=> toggleOrder()} />
 				<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>

src/hooks/useInitialState.js

@@ -1,31 +1,51 @@
 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.includes(payload)
+        ? 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;

src/styles/Menu.scss

@@ -9,6 +9,7 @@
 	position: absolute;
 	top: 60px;
 	right: 50px;
+	background-color: white;
 }
 .Menu ul {
 	list-style: none;

src/styles/MyOrder.scss

@@ -45,7 +45,6 @@
 	text-align: end;
 	font-weight: bold;
 }
-
 .primary-button {
 	background-color: var(--hospital-green);
 	border-radius: 8px;

src/styles/OrderItem.scss

@@ -22,4 +22,4 @@
 .OrderItem p:nth-child(3) {
 	font-size: var(--md);
 	font-weight: bold;
-}
+}

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);

src/styles/global.css

@@ -2,3 +2,10 @@ body {
 	margin: 0;
 	font-family: 'Quicksand', sans-serif;
 }
+a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
+       cursor: pointer;
+}
+.more-clickable-area{
+	padding: 1em;     
+	margin: -1em;
+}