[AFP-47 Shaphen Pangburn]: Abstract Product item to its own component

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

+import React, { Component } from 'react'
+
+export default class ProductItem extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    calculateDiscount(price, discount) {
+        return (price * (1.00 - discount / 100)).toFixed(2);
+    }
+    
+    render() {
+        return (
+            <div className="product-item">
+                <div id="more-details-img-box">
+                    <img id="prod-img" src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } />
+                    <p id="more-details-text">More Details</p>
+                </div>
+                <p id="prod-name">{ this.props.item.productName }</p>
+                <div id="prod-price">
+                    { this.props.item.promo ? 
+                    <div id="promo-show">
+                        <p id="promo-show-text-original">
+                        ${ this.props.item.price }
+                        </p>
+                        <p id="promo-show-text">
+                        ${ this.calculateDiscount(this.props.item.price, this.props.item.promo) }
+                        </p>
+                    </div> : "$" + this.props.item.price }
+                </div>
+                { this.props.item.promo ?
+                <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>
+                </div>
+        )
+    }
+}

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

+import ProductItem from './product-item'
 import '../../resources/stylesheets/product-market.css';
 import '../../resources/stylesheets/reset.css';
 
@@ -13,10 +14,6 @@ export default class ProductMarket extends Component {
     this.props.getProducts();
     this.props.getPromotions();
   }
-
-  calculateDiscount(price, discount) {
-    return (price * (1.00 - discount / 100)).toFixed(2);
-  }
   
   render() {
     let products = this.props.products;
@@ -38,32 +35,7 @@ export default class ProductMarket extends Component {
             return (
               <div className="product-item-container" key={ prod.sku }>
                 { prod.productName ?
-                  <div className="product-item">
-                    <div id="more-details-img-box">
-                      <img id="prod-img" src={ prod.productImageUrl ? prod.productImageUrl : "-no photo-" } />
-                      <p id="more-details-text">More Details</p>
-                    </div>
-                    <p id="prod-name">{ prod.productName }</p>
-                    <p id="prod-price">
-                      { prod.promo ? 
-                        <div id="promo-show">
-                          <p id="promo-show-text-original">
-                            ${ prod.price }
-                          </p>
-                          <p id="promo-show-text">
-                            ${ this.calculateDiscount(prod.price, prod.promo) }
-                          </p>
-                        </div> : "$" + prod.price }
-                    </p>
-                    {prod.promo ?
-                    <p id="prod-promotion">
-                      { "Save " + prod.promo + "% on your order!"}
-                    </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>
-                  </div>
+                  <ProductItem item={ prod }/>
                   : 
                   <div className="product-item">
                     <p id="prod-not-available">This Product is No Longer Available</p>