MemberAdder.js

import React from "react";
import { Redirect } from "react-router-dom";
import { Form, Button, InputGroup } from "react-bootstrap";
import Sender from "./Sender";

class MemberAdder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: null,
      login: null,
      name: null,
      email: null,
      phone: null,
      password: null,
      euros: 0,
      cents: 0,
      admin: false,
      redirect: false,
    };
  }

  render() {
    if (this.state.redirect) {
      return <Redirect to="/members" />;
    }

    const invalid =
      !this.state.num || !this.state.login || !this.state.password;

    const body = () => {
      return {
        num: parseInt(this.state.num),
        login: this.state.login,
        name: this.state.name,
        email: this.state.email,
        phone: this.state.phone,
        password: this.state.password,
        balance: parseInt(this.state.euros) * 100 + parseInt(this.state.cents),
        role: this.state.admin ? "admin" : "member",
      };
    };

    return (
      <Sender
        url="/api/member"
        body={body}
        onSuccess={() => this.setState({ redirect: true })}
      >
        <Form.Group>
          <Form.Label>Numero de socia:</Form.Label>
          <Form.Control
            type="number"
            placeholder="numero"
            value={this.state.num}
            onChange={(e) => this.setState({ num: e.target.value })}
            isInvalid={!this.state.num}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Nombre de acceso:</Form.Label>
          <Form.Control
            placeholder="login"
            value={this.state.login}
            onChange={(e) => this.setState({ login: e.target.value })}
            isInvalid={!this.state.login}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Nombre:</Form.Label>
          <Form.Control
            placeholder="nombre"
            value={this.state.name}
            onChange={(e) => this.setState({ name: e.target.value })}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Email:</Form.Label>
          <Form.Control
            type="email"
            placeholder="email"
            value={this.state.email}
            onChange={(e) => this.setState({ email: e.target.value })}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Telefono:</Form.Label>
          <Form.Control
            placeholder="telefono"
            value={this.state.phone}
            onChange={(e) => this.setState({ phone: e.target.value })}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Contraseña:</Form.Label>
          <Form.Control
            type="password"
            placeholder="contraseña"
            value={this.state.password}
            onChange={(e) => this.setState({ password: e.target.value })}
            isInvalid={!this.state.password}
          />
        </Form.Group>
        <Form.Group>
          <Form.Check
            type="switch"
            id="admin"
            label="Es administradora"
            checked={this.state.admin}
            onChange={(e) => this.setState({ admin: e.target.checked })}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Saldo inicial:</Form.Label>
          <InputGroup>
            <Form.Control
              placeholder="euros"
              value={this.state.euros}
              onChange={(e) => this.setState({ euros: e.target.value })}
            />
            <InputGroup.Append>
              <InputGroup.Text>.</InputGroup.Text>
            </InputGroup.Append>
            <Form.Control
              placeholder="centimos"
              value={this.state.cents}
              onChange={(e) => this.setState({ cents: e.target.value })}
              min="0"
              max="99"
            />
            <InputGroup.Append>
              <InputGroup.Text>€</InputGroup.Text>
            </InputGroup.Append>
          </InputGroup>
        </Form.Group>
        <Button type="submit" disabled={invalid}>
          Crear usuaria
        </Button>
      </Sender>
    );
  }
}

export default MemberAdder;