ShowOrder.js

import React from "react";
import { Redirect } from "react-router-dom";
import Fetcher from "../Fetcher";
import {
  Container,
  Row,
  Col,
  Badge,
  Button,
  Spinner,
  Alert,
} from "react-bootstrap";
import PurchaseOrder from "./PurchaseOrder";
import { printDate } from "../util";
import AuthContext from "../AuthContext";
import { printMoney } from "../util";

function ShowOrderTransaction(props) {
  const list = props.transaction.order_purchase.map((o) => (
    <li key={o.product.code}>
      {o.product.name} ({o.product.code}): {o.amount}
    </li>
  ));
  return (
    <div>
      <h3>Mi pedido</h3>
      <ul>{list}</ul>
      <p>Total: {printMoney(-props.transaction.total)} €</p>
    </div>
  );
}

function ShowOrderResults(props) {
  let products = props.order.products.map((p) => {
    p.total = 0;
    return p;
  });
  const transactions = props.order.transactions.map((t) => {
    const list = t.order_purchase.map((purchase) => {
      const i = products.findIndex((p) => p.code === purchase.product_code);
      if (i === -1) {
        return null;
      }
      products[i].total += purchase.amount;
      if (purchase.amount) {
        const key =
          t.member.num.toString() + "-" + purchase.product_code.toString();
        return (
          <li key={key}>
            {products[i].name} {purchase.amount}
          </li>
        );
      }
      return null;
    });
    return (
      <li key={t.member.num}>
        {t.member.name} ({t.member.num}):
        <ul>{list}</ul>
      </li>
    );
  });

  const product_list = products.map((p) => (
    <li key={p.code}>
      {p.name}: {p.total}
    </li>
  ));
  return (
    <div>
      <h3>Productos pedidos</h3>
      <ul>{product_list}</ul>

      <h3>Pedidos</h3>
      <ul>{transactions}</ul>
    </div>
  );
}

class ShowOrder extends React.Component {
  static contextType = AuthContext;

  constructor(props) {
    super(props);
    this.state = {
      order: {
        products: [],
        transactions: [],
      },
      transaction: null,
      isLoading: false,
      redirect: false,
      error: null,
    };
  }

  onSend(purchase, total) {
    const order_purchase = purchase.map((p) => {
      p.product = p;
      return p;
    });
    const transaction = { order_purchase, total: -total };
    this.setState({ transaction });
  }

  showTransaction() {
    if (this.state.order.active) {
      return (
        <PurchaseOrder
          order={this.state.order}
          purchase={
            this.state.transaction && this.state.transaction.order_purchase
          }
          onSend={(p, t) => this.onSend(p, t)}
        />
      );
    }
    if (this.state.transaction) {
      return (
        <ShowOrderTransaction
          order={this.state.order}
          transaction={this.state.transaction}
        />
      );
    }
  }

  setData(data) {
    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 (!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)}
        >
          <Row>
            <Col>
              <h1>{this.state.order.name}</h1>
            </Col>
            <Col className="text-right">
              <p>
                Fecha limite: {printDate(this.state.order.deadline)}
                {expired}
              </p>
              {delbutton}
            </Col>
          </Row>
          <p>{this.state.order.description}</p>

          {this.showTransaction()}
          <ShowOrderResults order={this.state.order} />
        </Fetcher>
      </Container>
    );
  }
}

export default ShowOrder;