Sheeba hashmi

src/App.js

@@ -7,26 +7,41 @@ import Navigation from './components/Navigation';
 import Products from './components/Products';
 import ShoppingCart from './components/ShoppingCart';
 
+import ProductContext from './contexts/ProductContext';
+import CartContext from './contexts/CartContext';
+
 function App() {
 	const [products] = useState(data);
 	const [cart, setCart] = useState([]);
 
 	const addItem = item => {
 		// add the given item to the cart
+		setCart([...cart,item])
 	};
+
 
 	return (
 		<div className="App">
-			<Navigation cart={cart} />
+			<ProductContext.Provider value = {cart}>
+				<CartContext.Provider value ={cart}>
+					<Navigation/>
+				</CartContext.Provider>
+			</ProductContext.Provider>
 
 			{/* Routes */}
+			<ProductContext.Provider value={{products,addItem}}>
 			<Route exact path="/">
-				<Products products={products} addItem={addItem} />
+				<Products/>
 			</Route>
+			</ProductContext.Provider>
 
-			<Route path="/cart">
-				<ShoppingCart cart={cart} />
-			</Route>
+			<ProductContext.Provider value = {{cart,setCart}}>
+				<CartContext.Provider value = {{cart,setCart}}>
+					<Route path="/cart">
+						<ShoppingCart  />
+					</Route>
+				</CartContext.Provider>
+			</ProductContext.Provider>
 		</div>
 	);
 }

src/components/Navigation.js

@@ -1,12 +1,15 @@
-import React from 'react';
+import React,{useContext} from 'react';
 import { NavLink } from 'react-router-dom';
 
-const Navigation = props => {
+import CartContext from '../contexts/CartContext';
+
+const Navigation = () => {
+	const cart = useContext(CartContext)
 	return (
 		<div className="navigation">
 			<NavLink to="/">Products</NavLink>
 			<NavLink to="/cart">
-				Cart <span>{props.cart.length}</span>
+				Cart <span>{cart.length}</span>
 			</NavLink>
 		</div>
 	);

src/components/Products.js

@@ -1,16 +1,19 @@
-import React from 'react';
+import React,{useContext}from 'react';
 
+import ProductContext from '../contexts/ProductContext';
 // Components
 import Product from './Product';
 
-const Products = props => {
+const Products = () => {
+	const {products,addItem} = useContext(ProductContext);
+
 	return (
 		<div className="products-container">
-			{props.products.map(product => (
+			{products.map(product => (
 				<Product
 					key={product.id}
 					product={product}
-					addItem={props.addItem}
+					addItem={addItem}
 				/>
 			))}
 		</div>

src/components/ShoppingCart.js

@@ -1,19 +1,30 @@
-import React from 'react';
+import React,{useContext} from 'react';
 
 // Components
 import Item from './ShoppingCartItem';
 
-const ShoppingCart = props => {
+import CartContext from '../contexts/CartContext';
+
+
+const ShoppingCart = () => {
+	const {cart,setCart} = useContext(CartContext);
+
+
 	const getCartTotal = () => {
-		return props.cart.reduce((acc, value) => {
+		return cart.reduce((acc, value) => {
 			return acc + value.price;
 		}, 0).toFixed(2);
 	};
+	const removeItem = item => {
+		setCart(cart.filter(product => product.id !== item.id))
+	}
 
 	return (
 		<div className="shopping-cart">
-			{props.cart.map(item => (
-				<Item key={item.id} {...item} />
+			{cart.map(item => (
+				<CartContext.Provider value = {removeItem}>
+					<Item key={item.id} {...item}/>
+				</CartContext.Provider>
 			))}
 
 			<div className="shopping-cart__checkout">

src/components/ShoppingCartItem.js

@@ -1,6 +1,9 @@
-import React from 'react';
+import React,{useContext} from 'react';
 
+import CartContext from '../contexts/CartContext';
 const Item = props => {
+	const removeItem = useContext(CartContext);
+
 	return (
 		<div className="shopping-cart_item">
 			<img src={props.image} alt={`${props.title} book`} />
@@ -9,7 +12,7 @@ const Item = props => {
 			<div>
 				<h1>{props.title}</h1>
 				<p>$ {props.price}</p>
-				<button>Remove from cart</button>
+				<button onClick={()=>removeItem(props)}>Remove from cart</button>
 			</div>
 		</div>
 	);

src/contexts/CartContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const CartContext = createContext();
+
+export default CartContext;

src/contexts/ProductContext.js

@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+const ProductContext = createContext();
+export default ProductContext;