Proj Complete

src/App.js

@@ -1,34 +1,43 @@
-import React, { useState } from 'react';
-import { Route } from 'react-router-dom';
-import data from './data';
+import React, { useState } from "react";
+import { Route } from "react-router-dom";
+import data from "./data";
 
 // Components
-import Navigation from './components/Navigation';
-import Products from './components/Products';
-import ShoppingCart from './components/ShoppingCart';
+import Navigation from "./components/Navigation";
+import Products from "./components/Products";
+import ShoppingCart from "./components/ShoppingCart";
+
+// Context
+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
-	};
-
-	return (
-		<div className="App">
-			<Navigation cart={cart} />
-
-			{/* Routes */}
-			<Route exact path="/">
-				<Products products={products} addItem={addItem} />
-			</Route>
-
-			<Route path="/cart">
-				<ShoppingCart cart={cart} />
-			</Route>
-		</div>
-	);
+  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">
+      <CartContext.Provider value={cart}>
+        <Navigation cart={cart} />
+
+        {/* Routes */}
+        <ProductContext.Provider value={{ products, addItem }}>
+          <Route exact path="/">
+            <Products />
+          </Route>
+        </ProductContext.Provider>
+
+        <Route path="/cart">
+          <ShoppingCart cart={cart} />
+        </Route>
+      </CartContext.Provider>
+    </div>
+  );
 }
 
 export default App;

src/components/Navigation.js

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

src/components/Product.js

@@ -1,19 +1,19 @@
-import React from 'react';
+import React, { useContext } from "react";
+import { ProductContext } from "../contexts/ProductContext";
 
-const Product = props => {
-	return (
-		<div className="product">
-			<img src={props.product.image} alt={`${props.product.title} book`} />
+const Product = (props) => {
+  const { addItem } = useContext(ProductContext);
+  return (
+    <div className="product">
+      <img src={props.product.image} alt={`${props.product.title} book`} />
 
-			<h1 className="title">{props.product.title}</h1>
+      <h1 className="title">{props.product.title}</h1>
 
-			<p className="price">${props.product.price}</p>
+      <p className="price">${props.product.price}</p>
 
-			<button onClick={() => props.addItem(props.product)}>
-				Add to cart
-			</button>
-		</div>
-	);
+      <button onClick={() => addItem(props.product)}>Add to cart</button>
+    </div>
+  );
 };
 
 export default Product;

src/components/Products.js

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

src/components/ShoppingCart.js

@@ -1,27 +1,32 @@
-import React from 'react';
+import React, { useContext } from "react";
 
 // Components
-import Item from './ShoppingCartItem';
+import Item from "./ShoppingCartItem";
+import { CartContext } from "../contexts/CartContext";
 
-const ShoppingCart = props => {
-	const getCartTotal = () => {
-		return props.cart.reduce((acc, value) => {
-			return acc + value.price;
-		}, 0).toFixed(2);
-	};
+const ShoppingCart = () => {
+  const cart = useContext(CartContext);
+  console.log(cart);
+  const getCartTotal = () => {
+    return cart
+      .reduce((acc, value) => {
+        return acc + value.price;
+      }, 0)
+      .toFixed(2);
+  };
 
-	return (
-		<div className="shopping-cart">
-			{props.cart.map(item => (
-				<Item key={item.id} {...item} />
-			))}
+  return (
+    <div className="shopping-cart">
+      {cart.map((item) => (
+        <Item key={item.id} {...item} />
+      ))}
 
-			<div className="shopping-cart__checkout">
-				<p>Total: ${getCartTotal()}</p>
-				<button>Checkout</button>
-			</div>
-		</div>
-	);
+      <div className="shopping-cart__checkout">
+        <p>Total: ${getCartTotal()}</p>
+        <button>Checkout</button>
+      </div>
+    </div>
+  );
 };
 
 export default ShoppingCart;

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