Merge branch 'AFP-11' into dev

src/component/Product.jsx

-import React from 'react'
-import './../styles/Product.css'
+import React, { useState } from "react";
+import "./../styles/Product.css";
+import { Modal, Button, Alert } from "react-bootstrap";
 
-export default function Product({product}) {
+export default function Product({ product }) {
+  const [show, setShow] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const handleClose = () => {
+    setShow(false);
+    handleCloseConfirm();
+  };
+  const handleShow = () => setShow(true);
+  const handleShowConfirm = () => setShowConfirm(true);
+  const handleCloseConfirm = () => setShowConfirm(false);
 
   return (
     <div>
-        <div className="img-container">
-            <img src={product.productImageUrl} alt={product.productName}/>
-        </div>
-        <div className="prod-info">
-            <h5>{product.productName}</h5>
-            {product.sku}<br/>
-            ${product.price}<br/>
-            In Stock: {product.stock}
-        </div>		
+      <div className="img-container" onClick={handleShow}>
+        <img
+          className="grid-img"
+          src={product.productImageUrl}
+          alt={product.productName}
+        />
+      </div>
+      <div className="prod-info">
+        <h5>{product.productName}</h5>
+        {product.sku}
+        <br />${product.price}
+        <br />
+        In Stock: {product.stock}
+      </div>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>{product.productName}</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <div className="modal-img">
+            <img src={product.productImageUrl} alt={product.productName} />
+          </div>
+          <h5>{product.sku}</h5>${product.price}
+          <br />
+          {product.productDescription}
+          <br />
+          In Stock: {product.stock}
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            className="float-left"
+            onClick={handleShowConfirm}
+          >
+            Delete product
+          </Button>
+
+          <Button variant="primary" onClick={handleClose}>
+            Edit Product
+          </Button>
+
+          <Alert show={showConfirm} variant="danger">
+            <h5> Are you sure?</h5>
+            <Button variant="secondary" onClick={handleCloseConfirm}>
+              Cancel
+            </Button>
+            &nbsp;&nbsp;
+            <Button variant="danger">Yes, delete</Button>
+          </Alert>
+        </Modal.Footer>
+      </Modal>
     </div>
-  )
+  );
 }

src/styles/Product.css

+img {
+    max-width: 100%;
+    max-height: 250px;
+}
+
 .img-container{
     position:relative;
     overflow:hidden;
     padding-bottom:100%;
 }
-img {
+.grid-img {
     position: absolute;
     max-width: 100%;
     max-height: 100%;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
+}
+
+.modal-img {
+    display: flex;
+    justify-content: center;
+}
+
+.alert{
+    width: 100%;
 }
\ No newline at end of file