[AFP-48 Shaphen Pangburn]: Comment unused code and add handlesubmit functionality to product page

ecom-web/src/components/Header/header.js

 import React, { Component } from 'react'
 import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
-import NavDropdown from 'react-bootstrap/NavDropdown'
+// import NavDropdown from 'react-bootstrap/NavDropdown'
 import {NavLink} from 'react-router-dom'
 import Session from '../session/session-container'
 

ecom-web/src/components/checkout/PaymentMethod.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function PaymentMethod() {
     return (

ecom-web/src/components/checkout/ReviewOrder.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function ReviewOrder() {
     return (

ecom-web/src/components/checkout/ShippingAddress.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function ShippingAddress() {
     return (

ecom-web/src/components/checkout/SubmitOrder.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function SubmitOrder() {
     return (

ecom-web/src/components/checkout/checkout.jsx

-import React, {useState, useEffect} from 'react'
-import ShippingAddress from './ShippingAddress.js'
-import PaymentMethod from './PaymentMethod.js'
-import ReviewOrder from './ReviewOrder.js'
-import SubmitOrder from './SubmitOrder.js'
+// import React, {useState, useEffect} from 'react'
+// import ShippingAddress from './ShippingAddress.js'
+// import PaymentMethod from './PaymentMethod.js'
+// import ReviewOrder from './ReviewOrder.js'
+// import SubmitOrder from './SubmitOrder.js'
 
 
 export default function checkout() {

ecom-web/src/components/product-market/product-details.jsx

@@ -39,8 +39,8 @@ export default class ProductDetails extends Component {
                             :
                             <p id="prod-details-original-price">Price: ${ this.props.product.price }</p>
                         }
-                        <input type="number" id="prod-details-quantity" placeholder="Quantity" />
-                        <button id="prod-details-add-to-cart">
+                        <input type="number" className="prod-details-quantity" placeholder="Quantity" />
+                        <button className="prod-details-add-to-cart">
                             Add to Cart
                         </button>
                     </div>

ecom-web/src/components/product-market/product-item.jsx

@@ -9,6 +9,7 @@ export default class ProductItem extends Component {
         this.state = {
             showDetailsModal: false
         }
+        this.handleSubmit = this.handleSubmit.bind(this);
         this.toggleDetailsModal = this.toggleDetailsModal.bind(this);
     }
 
@@ -20,6 +21,10 @@ export default class ProductItem extends Component {
     calculateDiscount(price, discount) {
         return (price * ((100 - discount) / 100)).toFixed(2);
     }
+
+    handleSubmit(e, product) {
+        e.preventDefault();
+    }
     
     render() {
         let discount = this.calculateDiscount(this.props.item.price, this.props.item.promo)
@@ -50,10 +55,10 @@ export default class ProductItem extends Component {
                 <p id="prod-promotion">
                     { "Save " + this.props.item.promo + "% on this item!"}
                 </p> : ""}
-                <div className="add-cart-and-quantity">
-                    <input id="order-quantity" type="number" placeholder="Qty" />
-                    <span id="add-to-cart-button">Add to Cart</span>
-                </div>
+                <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
+                    <input className="order-quantity" type="number" placeholder="Qty" />
+                    <button className="add-to-cart-button">Add to Cart</button>
+                </form>
 
                 <Modal
                     id="product-details-modal"

ecom-web/src/resources/stylesheets/product-market.css

@@ -107,7 +107,7 @@
     color: red;
 }
 
-#add-to-cart-button {
+.add-to-cart-button {
     cursor: pointer;
     margin-bottom: 10px;
     padding: 5px 40px;
@@ -118,7 +118,7 @@
     transition: all 0.3s;
 }
 
-#add-to-cart-button:hover {
+.add-to-cart-button:hover {
     background-color: rgb(207, 205, 205);
 }
 
@@ -149,24 +149,19 @@
     padding-top: 2px;
 }
 
-#order-quantity {
-    width: 23px;
-    height: 13px;
+.order-quantity {
+    border: 1px dotted rgba(0,0,0,0.3);
+    color: rgb(29, 29, 29);
     border-radius: 5px;
+    margin-top: 2px;
     margin: 1px 5px;
-    padding: 6px;
-}
-
-#order-quantity {
-    border: 1px dotted rgba(0,0,0,0.3);
     outline: none;
-    width: 42px;
     height: 30px;
-    margin-top: 2px;
-    color: rgb(29, 29, 29);
+    padding: 6px;
+    width: 42px;
     transition: all 0.5s;
 }
-#order-quantity:focus {
+.order-quantity:focus {
     border: 1px solid black;
 }
 
@@ -294,7 +289,7 @@
     width: 100%;
 }
 
-#prod-details-quantity {
+.prod-details-quantity {
     border: 1px dotted rgba(0,0,0,0.3);
     border-radius: 5px;
     outline: none;
@@ -303,11 +298,11 @@
     transition: all 0.5s;
 }
 
-#prod-details-quantity:focus {
+.prod-details-quantity:focus {
     border: 1px solid black;
 }
 
-#prod-details-add-to-cart {
+.prod-details-add-to-cart {
     cursor: pointer;
     padding: 5px 40px;
     margin: 10px 3px;
@@ -319,7 +314,7 @@
     transition: all 0.3s;
 }
 
-#prod-details-add-to-cart:hover {
+.prod-details-add-to-cart:hover {
     background-color: rgb(207, 205, 205);
 }