renderRideModal()

in assets/src/modules/signup/Home.tsx [408:465]
58 lines of code
2 McCabe index (conditional complexity)

  renderRideModal() {
    const { ride } = this.state;
    return (
      <Modal
        show={this.state.showRideModal}
        onHide={() => this.handleToggleRideModal(false)}
        aria-labelledby="contained-modal-title"
        id="contained-modal">
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title">{ ride.stationName }</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h5 className="modal-prompt">How long do you want to ride?</h5>
          <Form>
            <Form.Row className="form-header">
              <Form.Group as={Col}>
                <FormLabel className="form-header">Hours</FormLabel>
              </Form.Group>
              <Form.Group as={Col}>
                <FormLabel>Total</FormLabel>
              </Form.Group>
            </Form.Row>
            <Form.Row>
              <Form.Group as={Col}>
                <select value={ride.duration} onChange={this.handleRideDurationChange} className="form-control">
                  <option value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                </select>
              </Form.Group>
              <Form.Group as={Col} className="modal-price">$
                { this.state.ride.price.toFixed(2) }
              </Form.Group>
            </Form.Row>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button
            type="button"
            variant="danger"
            className="uniform-width"
            disabled={!this.validateRideForm()}
            onClick={this.handleRentClick}>
            {this.state.isUpdating ?
              <span><Spinner size="sm" animation="border" className="mr-2" />Updating</span> :
              <span>Rent</span>}
            </Button>
        </Modal.Footer>
      </Modal>
    );
  }