Vida causey

src/App.js

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Route } from 'react-router-dom';
 import data from './data';
+import {ProductContext} from './contexts/ProductContext';
+import {CartContext} from './contexts/CartContext'
 
 // Components
 import Navigation from './components/Navigation';
@@ -13,20 +15,25 @@ function App() {
 
 	const addItem = item => {
 		// add the given item to the cart
+		setCart([...cart, item]);
 	};
 
 	return (
 		<div className="App">
-			<Navigation cart={cart} />
+			<CartContext.Provider value={{cart}}>
+				<Navigation />
 
 			{/* Routes */}
-			<Route exact path="/">
-				<Products products={products} addItem={addItem} />
-			</Route>
-
-			<Route path="/cart">
-				<ShoppingCart cart={cart} />
-			</Route>
+			<ProductContext.Provider value={{ products, addItem}}>
+					<Route exact path="/">
+						<Products />
+					</Route>
+			</ProductContext.Provider>
+
+					<Route path="/cart">
+						<ShoppingCart  />
+					</Route>
+			</CartContext.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';
+import { CartContext } from '../contexts/CartContext';
 
-const Navigation = props => {
+
+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/Product.js

@@ -1,6 +1,9 @@
-import React from 'react';
+import React  from 'react';
+
 
 const Product = props => {
+
+
 	return (
 		<div className="product">
 			<img src={props.product.image} alt={`${props.product.title} book`} />

src/components/Products.js

@@ -1,16 +1,18 @@
-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,18 +1,21 @@
-import React from 'react';
-
+import React, {useContext}from 'react';
+import { CartContext } from '../contexts/CartContext';
 // Components
 import Item from './ShoppingCartItem';
 
-const ShoppingCart = props => {
+
+const ShoppingCart = () => {
+
+	const { cart } = useContext(CartContext)
 	const getCartTotal = () => {
-		return props.cart.reduce((acc, value) => {
+		return cart.reduce((acc, value) => {
 			return acc + value.price;
 		}, 0).toFixed(2);
 	};
 
 	return (
 		<div className="shopping-cart">
-			{props.cart.map(item => (
+			{cart.map(item => (
 				<Item key={item.id} {...item} />
 			))}
 

src/contexts/CartContext.js

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

src/contexts/ProductContext.js

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