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 66e3602fa7a8d8dfbc8db250407a28a7f72cf932 Mon Sep 17 00:00:00 2001 From: Justin Peisker Date: Thu, 4 Nov 2021 12:43:46 -0700 Subject: [PATCH 3/3] still buggy --- src/App.js | 9 +++++---- src/components/Navigation.js | 7 +++++-- src/components/Product.js | 12 +++++++----- src/components/Products.js | 8 ++++++-- src/components/ShoppingCart.js | 13 +++++++++---- src/context/ProductContext.js | 5 +++++ src/index.js | 13 +++++++++++-- 7 files changed, 48 insertions(+), 19 deletions(-) create mode 100644 src/context/ProductContext.js diff --git a/src/App.js b/src/App.js index e134ca03..b8c17529 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useContext } from 'react'; import { Route } from 'react-router-dom'; -import data from './data'; +import ProductContext from './context/ProductContext'; + // Components import Navigation from './components/Navigation'; @@ -8,11 +9,11 @@ import Products from './components/Products'; import ShoppingCart from './components/ShoppingCart'; function App() { - const [products] = useState(data); - const [cart, setCart] = useState([]); + const { products, cart, setCart } = useContext(ProductContext) const addItem = item => { // add the given item to the cart + return setCart(item) }; return ( diff --git a/src/components/Navigation.js b/src/components/Navigation.js index b2ef658a..f4ce9c9c 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -1,12 +1,15 @@ -import React from 'react'; +import React, {useContext} from 'react'; import { NavLink } from 'react-router-dom'; +import ProductContext from '../context/ProductContext'; + const Navigation = props => { + const { cart } = useContext(ProductContext) return (
Products - Cart {props.cart.length} + Cart {cart.length}
); diff --git a/src/components/Product.js b/src/components/Product.js index 8c9b860b..a47ce426 100644 --- a/src/components/Product.js +++ b/src/components/Product.js @@ -1,15 +1,17 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import ProductContext from '../context/ProductContext'; const Product = props => { + const { product, addItem } = props; return (
- {`${props.product.title} + {`${product.title} -

{props.product.title}

+

{product.title}

-

${props.product.price}

+

${product.price}

-
diff --git a/src/components/Products.js b/src/components/Products.js index 3f56b80e..1fe83f53 100644 --- a/src/components/Products.js +++ b/src/components/Products.js @@ -1,12 +1,16 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import ProductContext from '../context/ProductContext'; + // Components import Product from './Product'; const Products = props => { + const { products } = useContext(ProductContext); + return (
- {props.products.map(product => ( + {products.map(product => ( { +const ShoppingCart = () => { + const { cart } = useContext(ProductContext); + 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/context/ProductContext.js b/src/context/ProductContext.js new file mode 100644 index 00000000..57c23c12 --- /dev/null +++ b/src/context/ProductContext.js @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const ProductContext = createContext(); + +export default ProductContext; \ No newline at end of file diff --git a/src/index.js b/src/index.js index f77d5543..98c24559 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,23 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, withRouter } from 'react-router-dom'; import './sass/index.scss'; import App from './App'; +import ProductContext from './context/ProductContext'; +import data from './data'; const AppWithRouter = withRouter(App); +const Application = () => { + const [products] = useState(data); + const [cart, setCart] = useState(products[0]); + return() +} + ReactDOM.render( - + + , document.getElementById('root') );