Commit 59209607 authored by Ben Anderson's avatar Ben Anderson

Removed duplocate close button

parent 07064059
import React, { useState } from 'react' import React, { useState } from "react";
import './../styles/Product.css' import "./../styles/Product.css";
import { Modal, Button, Alert } from "react-bootstrap"; import { Modal, Button, Alert } from "react-bootstrap";
export default function Product({ product }) { export default function Product({ product }) {
...@@ -9,63 +9,67 @@ export default function Product({ product }) { ...@@ -9,63 +9,67 @@ export default function Product({ product }) {
const handleClose = () => { const handleClose = () => {
setShow(false); setShow(false);
handleCloseConfirm(); handleCloseConfirm();
} };
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
const handleShowConfirm = () => setShowConfirm(true); const handleShowConfirm = () => setShowConfirm(true);
const handleCloseConfirm = () => setShowConfirm(false); const handleCloseConfirm = () => setShowConfirm(false);
return (<div> return (
<div className="img-container" onClick={handleShow}> <div>
<img className="grid-img" src={product.productImageUrl} alt={product.productName} /> <div className="img-container" onClick={handleShow}>
</div> <img
<div className="prod-info"> className="grid-img"
<h5>{product.productName}</h5> src={product.productImageUrl}
{product.sku}<br /> alt={product.productName}
${product.price}<br /> />
In Stock: {product.stock} </div>
</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 show={show} onHide={handleClose}>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>{product.productName}</Modal.Title> <Modal.Title>{product.productName}</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div className="modal-img"> <div className="modal-img">
<img src={product.productImageUrl} alt={product.productName} /> <img src={product.productImageUrl} alt={product.productName} />
</div> </div>
<h5>{product.sku}</h5> <h5>{product.sku}</h5>${product.price}
${product.price}<br /> <br />
{product.productDescription}<br /> {product.productDescription}
<br />
In Stock: {product.stock} In Stock: {product.stock}
</Modal.Body> </Modal.Body>
<Modal.Footer>
<Button variant="danger" className="float-left" onClick={handleShowConfirm}>
Delete product
</Button>
<Button variant="secondary" onClick={handleClose}> <Modal.Footer>
Close <Button
variant="danger"
className="float-left"
onClick={handleShowConfirm}
>
Delete product
</Button> </Button>
<Button variant="primary" onClick={handleClose}>
Edit Product
</Button>
<Alert show={showConfirm} variant="danger"> <Button variant="primary" onClick={handleClose}>
<h5> Are you sure?</h5> Edit Product
<Button variant="secondary" onClick={handleCloseConfirm}>
Cancel
</Button>&nbsp;&nbsp;
<Button variant="danger">
Yes, delete
</Button> </Button>
</Alert> <Alert show={showConfirm} variant="danger">
</Modal.Footer> <h5> Are you sure?</h5>
</Modal> <Button variant="secondary" onClick={handleCloseConfirm}>
</div> Cancel
) </Button>
&nbsp;&nbsp;
<Button variant="danger">Yes, delete</Button>
</Alert>
</Modal.Footer>
</Modal>
</div>
);
} }
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment