[AFP-47 Shaphen Pangburn]: Integrate react modal and attach to Product Market Page

ecom-web/package-lock.json

@@ -6256,6 +6256,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -12554,6 +12559,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-m6yXK7I4YKssQnsjHK7xITSXy2O81BSOHOsg0/uWAsdKtuT9HF2tdoYhRuxNNQg2V+LgepsoHUPJKS8m6no+eg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
@@ -15455,6 +15476,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

ecom-web/package.json

@@ -11,6 +11,7 @@
     "jquery": "^3.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.13.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

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

 import React, { Component } from 'react'
+import Modal from 'react-modal';
 import '../../resources/stylesheets/product-market.css';
 
 export default class ProductItem extends Component {
     constructor(props) {
         super(props)
-        this.state = {}
+        this.state = {
+            showDetailsModal: false
+        }
+        this.toggleDetailsModal = this.toggleDetailsModal.bind(this);
+    }
+
+    toggleDetailsModal() {
+        const prevState = this.state.showDetailsModal;
+        this.setState({ showDetailsModal: !prevState });
     }
 
     calculateDiscount(price, discount) {
@@ -15,7 +24,12 @@ 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-" } />
+                    <img 
+                        id="prod-img" 
+                        alt="" 
+                        src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } 
+                        onClick={ this.toggleDetailsModal }
+                    />
                     <p id="more-details-text">More Details</p>
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>
@@ -38,6 +52,34 @@ export default class ProductItem extends Component {
                     <input id="order-quantity" type="number" placeholder="Qty" />
                     <span id="add-to-cart-button">Add to Cart</span>
                 </div>
+
+                <Modal
+                    id="product-details-modal"
+                    isOpen={ this.state.showDetailsModal }
+                    contentLabel="Product Details Modal"
+                    onRequestClose={ this.toggleDetailsModal }
+                    style={{
+                        content: {
+                          position: "absolute",
+                          top: '55px',
+                          left: '85px',
+                          right: '0',
+                          bottom: '0',
+                          border: '1px solid black',
+                          padding: '7px',
+                          width: '210px',
+                          height: '134px',
+                          background: 'white'
+                        },
+                        overlay: {
+                          position: 'fixed',
+                          backgroundColor: 'rgba(0,0,0,0.0)',
+                          zIndex: '50'
+                        }
+                      }}
+                >
+                    Whoa its a modal!
+                </Modal>
             </div>
         )
     }

ecom-web/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import configureStore from './store/store'
-import Root from './components/root'
+import configureStore from './store/store';
+import Root from './components/root';
+import Modal from 'react-modal';
 
 document.addEventListener("DOMContentLoaded", () => {
+  Modal.setAppElement('#root')
   let store = configureStore();
 
   const root = document.getElementById('root');