Delete orders

src/order/ShowOrder.js

 import React from "react";
+import { Redirect } from "react-router-dom";
 import Fetcher from "../Fetcher";
-import { Container, Row, Col, Badge } from "react-bootstrap";
+import {
+  Container,
+  Row,
+  Col,
+  Badge,
+  Button,
+  Spinner,
+  Alert,
+} from "react-bootstrap";
 import PurchaseOrder from "./PurchaseOrder";
 import { printDate } from "../util";
 import AuthContext from "../AuthContext";
@@ -79,6 +88,9 @@ class ShowOrder extends React.Component {
         transactions: [],
       },
       transaction: null,
+      isLoading: false,
+      redirect: false,
+      error: null,
     };
   }
 
@@ -117,15 +129,66 @@ class ShowOrder extends React.Component {
     this.setState({ order: data.order, transaction: data.transaction });
   }
 
+  delorder() {
+    this.setState({ isLoading: true });
+    fetch("/api/order/" + this.state.order.ID, {
+      method: "DELETE",
+      headers: { "x-authentication": this.context.token },
+    }).then((response) => {
+      if (!response.ok) {
+        this.setState({
+          error:
+            "Ha ocurrido un error cancelando el pedido: " +
+            response.status.toString() +
+            " " +
+            response.statusText,
+          isLoading: false,
+        });
+      } else {
+        this.setState({ redirect: true });
+      }
+    });
+  }
+
   render() {
+    if (this.state.redirect) {
+      return <Redirect to="/" />;
+    }
+
+    const order = this.state.order;
     let expired;
-    if (!this.state.order.active) {
+    if (!order.active) {
       expired = <Badge variant="info">finalizado</Badge>;
     }
 
+    let delbutton;
+    if (this.state.isLoading) {
+      delbutton = <Spinner animation="border" />;
+    } else {
+      let deadline_week = new Date(order.deadline);
+      deadline_week.setDate(deadline_week.getDate() + 7);
+      if (
+        (order.member_num === parseInt(this.context.num) ||
+          this.context.role === "admin") &&
+        deadline_week > Date.now()
+      ) {
+        delbutton = (
+          <Button variant="danger" onClick={() => this.delorder()}>
+            Cancelar pedido
+          </Button>
+        );
+      }
+    }
+
+    let alert;
+    if (this.state.error) {
+      alert = <Alert variant="danger">{this.state.error}</Alert>;
+    }
+
     const { id } = this.props.match.params;
     return (
       <Container>
+        {alert}
         <Fetcher
           url={"/api/order/" + id}
           onFetch={(data) => this.setData(data)}
@@ -134,11 +197,12 @@ class ShowOrder extends React.Component {
             <Col>
               <h1>{this.state.order.name}</h1>
             </Col>
-            <Col>
-              <p className="text-right">
+            <Col className="text-right">
+              <p>
                 Fecha limite: {printDate(this.state.order.deadline)}
                 {expired}
               </p>
+              {delbutton}
             </Col>
           </Row>
           <p>{this.state.order.description}</p>