Add confirmation modal to product deletion

src/ProductList.js

 import React from "react";
-import { Table, Button, Alert } from "react-bootstrap";
+import { Table, Button, Alert, Modal } from "react-bootstrap";
 import Fetcher from "./Fetcher";
 import EditableCell from "./EditableCell";
 import ProductAdder from "./ProductAdder";
@@ -12,9 +12,15 @@ class ProductList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      delete: {
+        name: null,
+      },
       products: [],
       error: null,
     };
+
+    this.modalClose = this.modalClose.bind(this);
+    this.delProduct = this.delProduct.bind(this);
   }
 
   update(row, key, value) {
@@ -52,11 +58,13 @@ class ProductList extends React.Component {
     });
   }
 
-  delProduct(code) {
+  delProduct() {
+    const code = this.state.delete.code;
     let products = this.state.products;
     const index = products.findIndex((p) => p.code === code);
     products.splice(index, 1);
     this.setState({ products });
+    this.modalClose();
 
     fetch(url("/api/product/" + code), {
       headers: { "x-authentication": this.context.token },
@@ -89,6 +97,10 @@ class ProductList extends React.Component {
     });
   }
 
+  modalClose() {
+    this.setState({ delete: { name: null } });
+  }
+
   render() {
     let alert = null;
     if (this.state.error !== null) {
@@ -127,7 +139,7 @@ class ProductList extends React.Component {
             <td sm={1}>
               <Button
                 variant="danger"
-                onClick={() => this.delProduct(product.code)}
+                onClick={() => this.setState({ delete: product })}
               >
                 -
               </Button>
@@ -161,6 +173,23 @@ class ProductList extends React.Component {
             <ProductAdder addProduct={(p) => this.addProduct(p)} />
           </div>
         )}
+
+        <Modal show={this.state.delete.name != null} onHide={this.modalClose}>
+          <Modal.Header closeButton>
+            <Modal.Title>Confirmar la elminicacion</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            ¿Borrar permanentemente el producto {this.state.delete.name}?
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={this.modalClose}>
+              Cancelar
+            </Button>
+            <Button variant="danger" onClick={this.delProduct}>
+              Eliminar
+            </Button>
+          </Modal.Footer>
+        </Modal>
       </Fetcher>
     );
   }

src/member/MemberEditer.js

@@ -102,7 +102,7 @@ function MemberEditer() {
             <Modal.Title>Confirmar la elminicacion</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            ¿Borrar la cuenta permanentemente la cuenta de {member.name}?
+            ¿Borrar permanentemente la cuenta de {member.name}?
           </Modal.Body>
           <Modal.Footer>
             <Button variant="secondary" onClick={handleClose}>