diff --git a/README.md b/README.md index 24835949..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 @@ -161,8 +158,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** diff --git a/src/App.js b/src/App.js index e134ca03..152fe04e 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'; @@ -8,11 +9,13 @@ import Products from './components/Products'; import ShoppingCart from './components/ShoppingCart'; function App() { + const [products] = useState(data); const [cart, setCart] = useState([]); - + const addItem = item => { // add the given item to the cart + setCart([...cart, item]) }; return ( @@ -21,7 +24,9 @@ function App() { {/* Routes */} - + + + diff --git a/src/components/Product.js b/src/components/Product.js index 8c9b860b..20d19605 100644 --- a/src/components/Product.js +++ b/src/components/Product.js @@ -1,5 +1,6 @@ import React from 'react'; + const Product = props => { return (
diff --git a/src/components/Products.js b/src/components/Products.js index 3f56b80e..34e56eb5 100644 --- a/src/components/Products.js +++ b/src/components/Products.js @@ -1,16 +1,20 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import ProductContext from '../contexts/ProductContext'; // Components import Product from './Product'; -const Products = props => { +const Products = () => { + + const {products, addItem } = useContext(ProductContext) + return (
- {props.products.map(product => ( + {products.map(product => ( ))}
diff --git a/src/contexts/ProductContext.js b/src/contexts/ProductContext.js new file mode 100644 index 00000000..e69de29b