Topup.js

import React from "react";
import { Redirect } from "react-router-dom";
import Fetcher from "./Fetcher";
import {
  Container,
  Form,
  Col,
  Row,
  Button,
  Alert,
  Spinner,
  InputGroup,
} from "react-bootstrap";
import { Typeahead } from "react-bootstrap-typeahead";
import AuthContext from "./AuthContext";

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

  constructor(props) {
    super(props);
    this.state = {
      members: [],
      numInvalid: false,
      amount: 0,
      num: null,
      name: "",
      comment: "",
      transactionId: null,
      isLoading: false,
      badAuth: false,
      error: null,
    };
  }

  setNum(numStr) {
    const num = parseInt(numStr);
    const member = this.state.members.find((p) => p.num === num);
    let name = "";
    if (member) {
      name = member.name;
    }
    this.setState({
      num: numStr,
      name: name,
      numInvalid: name === undefined,
    });
  }

  setName(member) {
    this.setState({
      num: member.num,
      name: member.name,
      numInvalid: false,
    });
  }

  send(e) {
    e.preventDefault();

    this.setState({ isLoading: true, error: null });
    const body = JSON.stringify({
      member: parseInt(this.state.num),
      comment: this.state.comment,
      amount: parseInt(this.state.amount) * 100,
    });
    fetch("/api/topup", {
      headers: { "x-authentication": this.context.token },
      method: "POST",
      body,
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            response.status.toString() + " " + response.statusText
          );
        }
        return response.json();
      })
      .then((transaction) => {
        this.setState({ transactionId: transaction.ID, isLoading: false });
      })
      .catch((error) => {
        this.setState({ isLoading: false, error: error.message });
      });
  }

  render() {
    if (this.state.isLoading) {
      return <Spinner animation="border" />;
    }

    let alert;
    if (this.state.error != null) {
      alert = (
        <Alert variant="danger">
          Ha ocurrido un error enviando la compra: {this.state.error}
        </Alert>
      );
    }
    if (this.state.transactionId !== null) {
      return <Redirect to={"/transaction/" + this.state.transactionId} />;
    }

    return (
      <Fetcher
        url="/api/member"
        onFetch={(members) => this.setState({ members })}
      >
        <Container>
          {alert}
          <Form onSubmit={(e) => this.send(e)}>
            <Form.Group as={Row}>
              <Form.Label as="legend" column sm={2}>
                Socia
              </Form.Label>
              <Col sm={5}>
                <Form.Control
                  placeholder="numero de socia"
                  value={this.state.num}
                  onChange={(e) => this.setNum(e.target.value)}
                  isInvalid={this.state.numInvalid}
                />
              </Col>
              <Col sm={5}>
                <Typeahead
                  id="name"
                  labelKey="name"
                  options={this.state.members}
                  onChange={(m) => this.setName(m[0])}
                  selected={this.state.name ? [this.state.name] : []}
                />
              </Col>
            </Form.Group>
            <Form.Group as={Row}>
              <Form.Label as="legend" column sm={2}>
                Recarga
              </Form.Label>
              <Col sm={10}>
                <InputGroup>
                  <Form.Control
                    type="number"
                    placeholder="euros"
                    value={this.state.amount}
                    onChange={(e) => this.setState({ amount: e.target.value })}
                  />
                  <InputGroup.Append>
                    <InputGroup.Text>.00 €</InputGroup.Text>
                  </InputGroup.Append>
                </InputGroup>
              </Col>
            </Form.Group>
            <Form.Group as={Row}>
              <Form.Label as="legend" column sm={2}>
                Comentario
              </Form.Label>
              <Col sm={10}>
                <Form.Control
                  placeholder="..."
                  value={this.state.comment}
                  onChange={(e) => this.setState({ comment: e.target.value })}
                />
              </Col>
            </Form.Group>
            <Form.Group as={Row}>
              <Col sm={{ span: 10, offset: 2 }}>
                <Button type="submit">Recarga</Button>
              </Col>
            </Form.Group>
          </Form>
        </Container>
      </Fetcher>
    );
  }
}

export default Topup;