Be able to delete products

src/ProductList.js

 import React from "react";
-import { Table, Alert } from "react-bootstrap";
+import { Table, Button, Alert } from "react-bootstrap";
 import Fetcher from "./Fetcher";
 import EditableCell from "./EditableCell";
 import AuthContext from "./AuthContext";
@@ -49,6 +49,24 @@ class ProductList extends React.Component {
     });
   }
 
+  delProduct(code) {
+    let products = this.state.products;
+    const index = products.findIndex((p) => p.code === code);
+    products.splice(index, 1);
+    this.setState({ products });
+
+    fetch("/api/product/" + code, {
+      headers: { "x-authentication": this.context.token },
+      method: "DELETE",
+    }).then((response) => {
+      if (!response.ok) {
+        this.setState({
+          error: response.status.toString() + " " + response.statusText,
+        });
+      }
+    });
+  }
+
   render() {
     let alert = null;
     if (this.state.error !== null) {
@@ -59,30 +77,40 @@ class ProductList extends React.Component {
       );
     }
 
-    const isAdmin = this.context.role !== "admin";
+    const isAdmin = this.context.role === "admin";
     const entries = this.state.products.map((product, row) => {
       return (
         <tr key={product.code}>
           <EditableCell
             onChange={(v) => this.update(row, "code", v)}
             value={product.code}
-            ro={isAdmin}
+            ro={!isAdmin}
           />
           <EditableCell
             onChange={(v) => this.update(row, "name", v)}
             value={product.name}
-            ro={isAdmin}
+            ro={!isAdmin}
           />
           <EditableCell
             onChange={(v) => this.update(row, "price", v)}
             value={printMoney(product.price)}
-            ro={isAdmin}
+            ro={!isAdmin}
           />
           <EditableCell
             onChange={(v) => this.update(row, "stock", v)}
             value={product.stock}
-            ro={isAdmin}
+            ro={!isAdmin}
           />
+          {isAdmin && (
+            <td sm={1}>
+              <Button
+                variant="danger"
+                onClick={() => this.delProduct(product.code)}
+              >
+                -
+              </Button>
+            </td>
+          )}
         </tr>
       );
     });
@@ -100,6 +128,7 @@ class ProductList extends React.Component {
               <th>Nombre</th>
               <th>Precio</th>
               <th>Existencias</th>
+              {isAdmin && <th sm={1}></th>}
             </tr>
           </thead>
           <tbody>{entries}</tbody>