From 81a33f761c6ae31ed31fe2c53e830c392bd14c91 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Mon, 12 Jun 2023 21:40:35 -0400 Subject: [PATCH 1/2] created context folder --- src/App.js | 54 +++++++++++++++++++--------------- src/components/Navigation.js | 22 +++++++------- src/components/Product.js | 23 +++++++-------- src/components/Products.js | 26 ++++++++-------- src/contexts/ProductContext.js | 3 ++ 5 files changed, 67 insertions(+), 61 deletions(-) create mode 100644 src/contexts/ProductContext.js diff --git a/src/App.js b/src/App.js index e134ca03..e6f52f65 100644 --- a/src/App.js +++ b/src/App.js @@ -1,34 +1,40 @@ -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"; -function App() { - const [products] = useState(data); - const [cart, setCart] = useState([]); +// Context +import { ProductContext } from "./contexts/ProductContext"; - const addItem = item => { - // add the given item to the cart - }; +function App() { + const [products] = useState(data); + const [cart, setCart] = useState([]); - return ( -
- + const addItem = (item) => { + // add the given item to the cart + setCart(...cart, item); + }; + console.log(cart); + return ( +
+ + - {/* Routes */} - - - + {/* Routes */} + + + - - - -
- ); + + + + +
+ ); } export default App; diff --git a/src/components/Navigation.js b/src/components/Navigation.js index b2ef658a..93b89f95 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -1,15 +1,15 @@ -import React from 'react'; -import { NavLink } from 'react-router-dom'; +import React from "react"; +import { NavLink } from "react-router-dom"; -const Navigation = props => { - return ( -
- Products - - Cart {props.cart.length} - -
- ); +const Navigation = (props) => { + return ( +
+ Products + + Cart {props.cart.length} + +
+ ); }; export default Navigation; diff --git a/src/components/Product.js b/src/components/Product.js index 8c9b860b..e63ffd71 100644 --- a/src/components/Product.js +++ b/src/components/Product.js @@ -1,19 +1,18 @@ -import React from 'react'; +import React, { useContext } from "react"; -const Product = props => { - return ( -
- {`${props.product.title} +const Product = (props) => { + const { addItem } = useContext(Product); + return ( +
+ {`${props.product.title} -

{props.product.title}

+

{props.product.title}

-

${props.product.price}

+

${props.product.price}

- -
- ); + +
+ ); }; export default Product; diff --git a/src/components/Products.js b/src/components/Products.js index 3f56b80e..b2b09eb6 100644 --- a/src/components/Products.js +++ b/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 ( -
- {props.products.map(product => ( - - ))} -
- ); +const Products = () => { + const { products } = useContext(ProductContext); + return ( +
+ {products.map((product) => ( + + ))} +
+ ); }; export default Products; diff --git a/src/contexts/ProductContext.js b/src/contexts/ProductContext.js new file mode 100644 index 00000000..67ececc9 --- /dev/null +++ b/src/contexts/ProductContext.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const ProductContext = createContext(); From 33e86f026e3cf6ac8e88ae724d321641457b68a6 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Mon, 12 Jun 2023 22:04:25 -0400 Subject: [PATCH 2/2] Completed Proj --- src/App.js | 17 ++++++++------ src/components/Navigation.js | 8 ++++--- src/components/Product.js | 5 ++-- src/components/Products.js | 2 +- src/components/ShoppingCart.js | 43 +++++++++++++++++++--------------- src/contexts/CartContext.js | 3 +++ 6 files changed, 46 insertions(+), 32 deletions(-) create mode 100644 src/contexts/CartContext.js diff --git a/src/App.js b/src/App.js index e6f52f65..3570cae8 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import ShoppingCart from "./components/ShoppingCart"; // Context import { ProductContext } from "./contexts/ProductContext"; +import { CartContext } from "./contexts/CartContext"; function App() { const [products] = useState(data); @@ -16,23 +17,25 @@ function App() { const addItem = (item) => { // add the given item to the cart - setCart(...cart, item); + setCart([...cart, item]); }; - console.log(cart); + return (
- + {/* Routes */} - - - + + + + + - +
); } diff --git a/src/components/Navigation.js b/src/components/Navigation.js index 93b89f95..179866b6 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 Navigation = () => { + const cart = useContext(CartContext); return (
Products - Cart {props.cart.length} + Cart {cart.length}
); diff --git a/src/components/Product.js b/src/components/Product.js index e63ffd71..cd602c3d 100644 --- a/src/components/Product.js +++ b/src/components/Product.js @@ -1,7 +1,8 @@ import React, { useContext } from "react"; +import { ProductContext } from "../contexts/ProductContext"; const Product = (props) => { - const { addItem } = useContext(Product); + const { addItem } = useContext(ProductContext); return (
{`${props.product.title} @@ -10,7 +11,7 @@ const Product = (props) => {

${props.product.price}

- +
); }; diff --git a/src/components/Products.js b/src/components/Products.js index b2b09eb6..2bd8b5ea 100644 --- a/src/components/Products.js +++ b/src/components/Products.js @@ -4,7 +4,7 @@ import React, { useContext } from "react"; import Product from "./Product"; import { ProductContext } from "../contexts/ProductContext"; -const Products = () => { +const Products = (props) => { const { products } = useContext(ProductContext); return (
diff --git a/src/components/ShoppingCart.js b/src/components/ShoppingCart.js index a2d21939..38e20333 100644 --- a/src/components/ShoppingCart.js +++ b/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 ( -
- {props.cart.map(item => ( - - ))} + return ( +
+ {cart.map((item) => ( + + ))} -
-

Total: ${getCartTotal()}

- -
-
- ); +
+

Total: ${getCartTotal()}

+ +
+
+ ); }; export default ShoppingCart; diff --git a/src/contexts/CartContext.js b/src/contexts/CartContext.js new file mode 100644 index 00000000..22d69585 --- /dev/null +++ b/src/contexts/CartContext.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const CartContext = createContext();