showing cart data in modal

Author: deeproop

src/App.js

@@ -6,19 +6,22 @@ import { BrowserRouter, Routes, Route} from 'react-router-dom';
 import Store from './pages/Store';
 import Success from './pages/Success';
 import Cancel from './pages/Cancel';
+import CartProvider from './CartContext';
 
 function App() {
   return (
-    <Container>
-        <NavbarComponent></NavbarComponent>
-        <BrowserRouter>
-          <Routes>
-            <Route index element={<Store />} /> {/*here index property represents the home route or '/' */}
-            <Route path="success" element={<Success />} />
-            <Route path="cancel" element={<Cancel />} />
-          </Routes>
-        </BrowserRouter>
-    </Container>
+    <CartProvider>
+      <Container>
+          <NavbarComponent></NavbarComponent>
+          <BrowserRouter>
+            <Routes>
+              <Route index element={<Store />} /> {/*here index property represents the home route or '/' */}
+              <Route path="success" element={<Success />} />
+              <Route path="cancel" element={<Cancel />} />
+            </Routes>
+          </BrowserRouter>
+      </Container>
+    </CartProvider>
   );
 }
 

src/CartContext.js

@@ -18,7 +18,7 @@ export function CartProvider({children}) {
     // { id: 1, quantity: 2 }
 
     function getProductQuantity(id) {
-        cartProducts.find(product => product.id === id)?.quantity
+        const quantity = cartProducts.find(product => product.id === id)?.quantity
 
         if(quantity === undefined) {
             return 0;

src/components/CartProduct.js

@@ -0,0 +1,9 @@
+import { Button } from "react-bootstrap";
+import { CartContext } from "../CartContext";
+import { useContext } from "react";
+import { getProductData } from "../productsStore";
+
+function CartProduct(props) {}
+
+
+export default CartProduct;

src/components/Navbar.js

@@ -1,18 +1,23 @@
 import {Button, Container, Navbar, Modal} from 'react-bootstrap';
-import { useState } from 'react';
+import { useState, useContext } from 'react';
+import { CartContext } from '../CartContext';
 
 function NavbarComponent() {
+    const cart = useContext(CartContext);
+
     const [ show, setShow ] = useState(false);
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
+
+    const productCount = cart.items.reduce((sum, product) => sum + product.quantity, 0);
 
     return (
         <>
             <Navbar expand="sm"> {/*expand determines where your window collapses */}
                 <Navbar.Brand href='/'>Ecommerce Store</Navbar.Brand>
                 <Navbar.Toggle /> {/*This determines the things to collaps on small screen size */}
                 <Navbar.Collapse className='justify-content-end'>
-                    <Button onClick={handleShow}>Cart 0 Items</Button>
+                    <Button onClick={handleShow}>Cart ({productCount} Items)</Button>
                 </Navbar.Collapse>
             </Navbar>
 
@@ -21,7 +26,22 @@ function NavbarComponent() {
                     <Modal.Title>Shopping Cart</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <h1>This is the Modal Body</h1>
+                    {productCount > 0 ?
+                      <>
+                        <p>Items in your cart: </p>
+                        {cart.items.map((currentProduct, idx) => (
+                            <h1>{currentProduct.id}</h1>
+                        ))}
+
+                        <h1>Total Cost: {cart.getTotalCost().toFixed(2)}</h1>
+
+                        <Button variant="success">
+                            Purchase items!
+                        </Button>
+                      </>
+                    :
+                        <h1>There are no items in your cart!</h1>
+                    }
                 </Modal.Body>
             </Modal>
         </>

src/components/ProductCard.js

@@ -1,14 +1,33 @@
 import { Card, Button, Form, Row, Col } from 'react-bootstrap';
+import { CartContext } from '../CartContext';
+import { useContext } from 'react';
 
 function ProductCard(props) { //props.product is the product we are selling
     const product = props.product;
+    const cart = useContext(CartContext);
+    const productQuantity = cart.getProductQuantity(product.id);
+    console.log(cart.items);
 
     return (
         <Card>
             <Card.Body>
                 <Card.Title>{product.title}</Card.Title>
                 <Card.Text>₹{product.price}</Card.Text>
-                <Button variant="primary">Add To Cart </Button>
+                { productQuantity > 0 ?
+                  <>
+                        <Form as={Row}>
+                            <Form.Label column="true" sm="6">In Cart: {productQuantity}</Form.Label>
+                            <Col sm="6">
+                                <Button sm="6" onClick={() => cart.addOneToCart(product.id)} className='mx-2'>+</Button>
+                                <Button sm="6" onClick={() => cart.removeOneFromCart(product.id)} className='mx-2'>-</Button>
+                            </Col>
+                        </Form>
+                        <Button variant='danger' onClick={() => cart.deleteFromCart(product.id)} className='my-2'>Remove from cart</Button>
+                  </>
+                  :
+                  <Button variant="primary" onClick={() => cart.addOneToCart(product.id)}>Add To Cart </Button>
+
+                }
             </Card.Body>
         </Card>
     )