From fb83c835c7e67a7c869589e85bc96b55a75e4a5a Mon Sep 17 00:00:00 2001 From: wlongmireLambda <71340015+wlongmireLambda@users.noreply.github.com> Date: Tue, 2 Nov 2021 21:47:17 -0400 Subject: [PATCH 1/3] Update README.md --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index 24835949..369ed364 100644 --- a/README.md +++ b/README.md @@ -161,8 +161,3 @@ Do not attempt stretch problems until MVP has been reached and a final commit ha - Create a `removeItem` function that allows you to remove an item from your cart with a click of a button. This `removeItem` function should be able to be consumed from your `ShoppingCartItem` component. Remember each item has an `id` this will help out a lot while creating your removeItem function! - -- Persist Cart Items using `localStorage`. (If you try this one, it will be a bit tricky to get our items to populate the shopping cart on a refresh. You'll have to think about where the data actually lives, and how you can get data there from localStorage when the app is being mounted after a refresh. Good luck!) - -## Submission Format -* [ ] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** From c5eaaa6f63ffd8606797b07503ecc3de7ff1c49c Mon Sep 17 00:00:00 2001 From: wlongmireLambda <71340015+wlongmireLambda@users.noreply.github.com> Date: Tue, 2 Nov 2021 21:48:11 -0400 Subject: [PATCH 2/3] Update README.md --- README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/README.md b/README.md index 369ed364..115a4a0a 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,6 @@ In this project you'll take take an almost completed e-commerce store and refact - [ ] CD into the project base directory `cd react-shopping-cart`. - [ ] Download project dependencies by running `npm install`. - [ ] Start up the app using `npm start`. -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. ### Task 2: MVP From 9b7b7d8273df801f0f84848437114e6c55155531 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 4 Nov 2021 19:21:11 -0400 Subject: [PATCH 3/3] cart --- src/App.js | 17 ++++++++++++++--- src/components/Navigation.js | 11 +++++++++-- src/components/Products.js | 12 +++++++++--- src/components/ShoppingCart.js | 13 ++++++++++--- src/contexts/CartContext.js | 5 +++++ src/contexts/ProductContext.js | 5 +++++ 6 files changed, 52 insertions(+), 11 deletions(-) create mode 100644 src/contexts/CartContext.js create mode 100644 src/contexts/ProductContext.js diff --git a/src/App.js b/src/App.js index e134ca03..536de085 100644 --- a/src/App.js +++ b/src/App.js @@ -7,26 +7,37 @@ 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]) }; + console.log(cart) return (
- + + + + {/* Routes */} - + - + + + +
); } diff --git a/src/components/Navigation.js b/src/components/Navigation.js index b2ef658a..593491bf 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -1,12 +1,19 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -const Navigation = props => { +import { useContext } from 'react'; + +import CartContext from '../contexts/CartContext'; + +const Navigation = () => { + + const { cart } = useContext(CartContext) + return (
Products - Cart {props.cart.length} + Cart {cart.length}
); diff --git a/src/components/Products.js b/src/components/Products.js index 3f56b80e..d8df8886 100644 --- a/src/components/Products.js +++ b/src/components/Products.js @@ -3,14 +3,20 @@ import React from 'react'; // Components import Product from './Product'; -const Products = props => { +import { useContext } from 'react'; +import ProductContext from '../contexts/ProductContext'; + +const Products = () => { + + const { products, addItem } = useContext(ProductContext) + return (
- {props.products.map(product => ( + {products.map(product => ( ))}
diff --git a/src/components/ShoppingCart.js b/src/components/ShoppingCart.js index a2d21939..e426dcc5 100644 --- a/src/components/ShoppingCart.js +++ b/src/components/ShoppingCart.js @@ -3,16 +3,23 @@ import React from 'react'; // Components import Item from './ShoppingCartItem'; -const ShoppingCart = props => { +import { useContext } from 'react'; + +import CartContext from '../contexts/CartContext'; + +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 (
- {props.cart.map(item => ( + {cart.map(item => ( ))} diff --git a/src/contexts/CartContext.js b/src/contexts/CartContext.js new file mode 100644 index 00000000..c1bfac69 --- /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 diff --git a/src/contexts/ProductContext.js b/src/contexts/ProductContext.js new file mode 100644 index 00000000..611ccbdb --- /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