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..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') );