Purchase.js

import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { Row, Col, Button, Alert } from "react-bootstrap";
import ProductPicker from "../ProductPicker";
import MemberPicker from "../member/MemberPicker";
import Sender from "../Sender";
import { printMoney } from "../util";

function Purchase(props) {
  const [purchase, setPurchase] = useState([]);
  const [member, setMember] = useState(null);
  const [total, setTotal] = useState(0);
  const [transaction, setTransaction] = useState(null);
  const [noMoney, setNoMoney] = useState(false);

  if (transaction !== null) {
    return <Redirect to={"/transaction/" + transaction.ID} />;
  }

  const url =
    props.member && member
      ? "/api/member/" + member.num + "/purchase"
      : "/api/purchase";

  const updatePurchase = (newPurchase) => {
    const add = (acc, p) => acc + p.price * p.amount;
    const newTotal = newPurchase.reduce(add, 0);
    setPurchase(newPurchase);
    setTotal(newTotal);
  };

  const body = () =>
    purchase.map((p) => {
      return {
        code: p.code,
        amount: p.amount,
      };
    });

  const onError = (status) => {
    if (status === 400) {
      setNoMoney(true);
      return true;
    }
    return false;
  };

  const disabled = (props.member && !member) || total === 0;

  return (
    <Sender url={url} body={body} onSuccess={setTransaction} onError={onError}>
      {noMoney && (
        <Alert variant="warning">
          No tienes suficiente dinero para realizar esta compra.
        </Alert>
      )}

      {props.member && <MemberPicker member={member} onChange={setMember} />}

      <ProductPicker amount picks={purchase} setPicks={updatePurchase} />
      <br />
      <Row>
        <Col>
          <h3>Total: {printMoney(total)}€</h3>
        </Col>
        <Col>
          <div className="text-right">
            <Button variant="primary" type="submit" disabled={disabled}>
              Finalizar compra
            </Button>
          </div>
        </Col>
      </Row>
    </Sender>
  );
}

export default Purchase;