[AFP-48 Shaphen Pangburn]: Refactor to display 'No Photo Available' if product...

[AFP-48 Shaphen Pangburn]: Refactor to display 'No Photo Available' if product image url is not provided

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

@@ -49,13 +49,27 @@ export default class ProductItem extends Component {
         return (
             <div className="product-item">
                 <div id="more-details-img-box">
-                    <img 
-                        id="prod-img" 
-                        alt="" 
-                        src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } 
-                        onClick={ this.toggleDetailsModal }
-                    />
-                    <p onClick={ this.toggleDetailsModal } id="more-details-text">More Details</p>
+                    {
+                        this.props.item.productImageUrl ? 
+                        <img 
+                            id="prod-img" 
+                            alt="" 
+                            src={ this.props.item.productImageUrl } 
+                            onClick={ this.toggleDetailsModal }
+                        />
+                        :
+                        <div 
+                            id="no-image-found"
+                            onClick={ this.toggleDetailsModal }
+                        >
+                            <p id="no-image-display">- No Photo Available -</p>
+                        </div>
+                    }
+                    {
+                        this.props.item.productImageUrl ?
+                        <p onClick={ this.toggleDetailsModal } id="more-details-text">More Details</p>
+                        : ""
+                    }
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>
                 <div id="prod-price">

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

@@ -14,8 +14,7 @@ export default class ProductMarket extends Component {
   componentDidMount() {
     this.props.getProducts();
     this.props.getPromotions();
-    // this.props.getUserCart(this.props.user.emailAddress);
-    this.props.getUserCart("chef");
+    // this.props.getUserCart("chef");
   }
   
   render() {

ecom-web/src/reducers/cart_reducer.js

 import { RECEIVE_USER_CART } from '../actions/cart_actions';
 
-const initialState = {}
+const initialState = {
+    cart: []
+}
 
 const cartReducer = (state = initialState, action) => {
     Object.freeze(state);

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

@@ -58,6 +58,15 @@
     transition: all 0.3s;
 }
 
+#no-image-found {
+    height: 200px;
+    width: 100%;
+    transition: all 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 #more-details-img-box {
     width: 100%;
     display: flex;