[AFP-47 Shaphen Pangburn]: Add basic style formatting and add logic to not...

[AFP-47 Shaphen Pangburn]: Add basic style formatting and add logic to not include null products in list display

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

@@ -24,33 +24,38 @@ export default class ProductMarket extends Component {
     products.forEach(prod => {
       promotions.forEach(promo => {
         if (prod.sku === promo.productSku) {
-          debugger
-          prod.promo = promo.discountPercentage;
+          prod.promo = (promo.discountPercentage * 100);
         }
       });
     });
     
     return (
-      <div>
-        {this.props.products.map(prod => {
-          return (
-            prod.productName ? 
-            <div key={ prod.sku }>
-              <p>{ prod.productName }</p>
-              <p>{ prod.productDescription }</p>
-              <p>${ prod.price }</p>
-              <p>
-                { prod.promo  ? "This has a promotion for " 
-                              + prod.promo 
-                              + "% off, making it now " 
-                              + this.calculateDiscount(prod.price, prod.promo) 
-                              + "!" :  "" }
-              </p>
-              <button>Add to Cart</button>
-              <p>_________________________________</p>
-            </div> : ""
-          )
-        })}
+      <div className="product-market-container">
+        <h1 id="product-market-title">Product Market</h1>
+        <div className="products-container">
+          {this.props.products.map(prod => {
+            return (
+              <div className="product-item">
+                {prod.productName ?
+                  <div key={ prod.sku }>
+                    <img id="prod-img" src={ prod.productImageUrl ? prod.productImageUrl : "-no photo-" } />
+                    <p id="prod-name">{ prod.productName }</p>
+                    <p id="prod-description">{ prod.productDescription }</p>
+                    <p id="prod-price">${ prod.price }</p>
+                    <p id="prod-promotion">
+                      { prod.promo  ? "Order now for " 
+                                    + prod.promo 
+                                    + "% off, making it " 
+                                    + this.calculateDiscount(prod.price, prod.promo) 
+                                    + "!" :  "" }
+                    </p>
+                    <button id="add-to-cart-button">Add to Cart</button>
+                  </div>
+                : ""}
+              </div>
+            )
+          })}
+        </div>
       </div>
     )
   }

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

+.product-market-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#product-market-title {
+    width: 100%;
+    text-align: center;
+}
+
+.products-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#prod-img {
+    width: 250px;
+}
\ No newline at end of file