From 191896a4d310adef83c155ebdb98fb89cf16c760 Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:10:47 -0400
Subject: [PATCH 1/9] App.js completed

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index e134ca03..ad467388 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ function App() {
 	const [cart, setCart] = useState([]);
 
 	const addItem = item => {
-		// add the given item to the cart
+		setCart([...cart, item]);
 	};
 
 	return (

From 01f55b95de970b3f32a66cbe328ed73fbb93af9f Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:14:37 -0400
Subject: [PATCH 2/9] completed

---
 src/contexts/ProductContext.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/contexts/ProductContext.js

diff --git a/src/contexts/ProductContext.js b/src/contexts/ProductContext.js
new file mode 100644
index 00000000..57c23c12
--- /dev/null
+++ b/src/contexts/ProductContext.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ProductContext = createContext();
+
+export default ProductContext;
\ No newline at end of file

From 24a205abd21d83360b3a65366fdfe81a45ba23ea Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:23:14 -0400
Subject: [PATCH 3/9] more was added.

---
 src/App.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index ad467388..c0159e3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Route } from 'react-router-dom';
 import data from './data';
+import ProductContext from './contexts/ProductContext';
 
 // Components
 import Navigation from './components/Navigation';
@@ -20,10 +21,11 @@ function App() {
 			<Navigation cart={cart} />
 
 			{/* Routes */}
+			<ProductContext.Provider value={{ products, addItem }}>
 			<Route exact path="/">
-				<Products products={products} addItem={addItem} />
+				<Products products={products} /> 
 			</Route>
-
+			</ProductContext.Provider>
 			<Route path="/cart">
 				<ShoppingCart cart={cart} />
 			</Route>

From f7286fbc91cbc14941de2c0a80624488e712a992 Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:38:29 -0400
Subject: [PATCH 4/9] completed

---
 src/components/Product.js  | 4 +++-
 src/components/Products.js | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Product.js b/src/components/Product.js
index 8c9b860b..22691da1 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import ProductContext from './../contexts/ProductContext';
 
 const Product = props => {
+	const values = useContext(ProductContext);
 	return (
 		<div className="product">
 			<img src={props.product.image} alt={`${props.product.title} book`} />
diff --git a/src/components/Products.js b/src/components/Products.js
index 3f56b80e..ef816c42 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import ProductContext from './../contexts/ProductContext';
 
 // Components
 import Product from './Product';
 
 const Products = props => {
+	const { products } = useContext(ProductContext);
 	return (
 		<div className="products-container">
-			{props.products.map(product => (
+			{products.map(product => (
 				<Product
 					key={product.id}
 					product={product}
-					addItem={props.addItem}
 				/>
 			))}
 		</div>

From 4f59f50096ccd5b57fe3d8bd1602576ef5296456 Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:42:06 -0400
Subject: [PATCH 5/9] completed

---
 src/components/Product.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Product.js b/src/components/Product.js
index 22691da1..29461bac 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import ProductContext from './../contexts/ProductContext';
 
 const Product = props => {
-	const values = useContext(ProductContext);
+	const { addItem } = useContext(ProductContext);
 	return (
 		<div className="product">
 			<img src={props.product.image} alt={`${props.product.title} book`} />
@@ -11,7 +11,7 @@ const Product = props => {
 
 			<p className="price">${props.product.price}</p>
 
-			<button onClick={() => props.addItem(props.product)}>
+			<button onClick={() => addItem(props.product)}>
 				Add to cart
 			</button>
 		</div>

From 410acbc331e0bd9b357fab9199c6f7326f4c58ed Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:47:07 -0400
Subject: [PATCH 6/9] completed

---
 src/contexts/CartContext.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/contexts/CartContext.js

diff --git a/src/contexts/CartContext.js b/src/contexts/CartContext.js
new file mode 100644
index 00000000..62adec9a
--- /dev/null
+++ b/src/contexts/CartContext.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CartContext = createContext();
+
+export default CartContext;
\ No newline at end of file

From 93052deb7c96c6a84ead18c0bf6e5298588437d0 Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:52:09 -0400
Subject: [PATCH 7/9] completed

---
 src/App.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index c0159e3f..25e16875 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ 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';
@@ -18,7 +19,8 @@ function App() {
 
 	return (
 		<div className="App">
-			<Navigation cart={cart} />
+			<CartContext.Provider value={cart}>
+			<Navigation />
 
 			{/* Routes */}
 			<ProductContext.Provider value={{ products, addItem }}>
@@ -27,8 +29,9 @@ function App() {
 			</Route>
 			</ProductContext.Provider>
 			<Route path="/cart">
-				<ShoppingCart cart={cart} />
+				<ShoppingCart />
 			</Route>
+			</CartContext.Provider>
 		</div>
 	);
 }

From 7df0914f2d12beb1b718247b7df4c3d889c9424f Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 21:56:36 -0400
Subject: [PATCH 8/9] completed

---
 src/components/Navigation.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index b2ef658a..f7162414 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { NavLink } from 'react-router-dom';
+import CartContext from './../contexts/CartContext';
 
 const Navigation = props => {
+	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>
 	);

From 605d82171200b8c8d24311d2842b127fe61aa4ec Mon Sep 17 00:00:00 2001
From: DJ1 <jimmynoble604@gmail.com>
Date: Tue, 11 Jul 2023 22:01:11 -0400
Subject: [PATCH 9/9] completed

---
 src/components/ShoppingCart.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ShoppingCart.js b/src/components/ShoppingCart.js
index a2d21939..9f306730 100644
--- a/src/components/ShoppingCart.js
+++ b/src/components/ShoppingCart.js
@@ -1,18 +1,20 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import CartContext from './../contexts/CartContext';
 
 // Components
 import Item from './ShoppingCartItem';
 
 const ShoppingCart = props => {
+	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} />
 			))}