renderHome()

in assets/src/modules/signup/Home.tsx [519:586]
68 lines of code
3 McCabe index (conditional complexity)

  renderHome() {
    const position = {
      lat: 40.7397,
      lon: -73.9945,
      zoom: 14,
    }
    return (
          <div>
            <h2>Real-time Bike Station Status</h2>
            <Form>
              <Form.Row>
                <Form.Group as={Col} md="8" className="form-group-inline">
                  <FormControl 
                    id="search"
                    minLength={1}
                    placeholder="Search bike stations.."
                    value={this.state.searchInput}
                    onChange={this.handleSearchChange}
                    onKeyPress={this.handleSearchKeyPress}
                    required />
                </Form.Group>
                <Form.Group as={Col} md="1" className="form-group-inline">
                  <Button variant="primary" type='button' className='uniform-width' onClick={this.handleSearchClick} disabled={!this.validateSearchForm()}>Search</Button>
                </Form.Group>
                <Form.Group as={Col} md="1" className="form-group-inline">
                  <Button variant="primary" type='button' className='uniform-width' onClick={this.handleClearClick}>Clear</Button>
                </Form.Group>
              </Form.Row>
            </Form>
            <Accordion>
              <Card className="adv-search-header">
                <Card.Header className="adv-search-header">
                  <Accordion.Toggle as={Card.Header} variant="link" eventKey="0" className="adv-search-toggle" onClick={this.handleToggleClick}>
                    <p><i className={this.validateToggle()}></i>&nbsp;&nbsp;Plan Your Trip</p>
                  </Accordion.Toggle>
                </Card.Header>
                <Accordion.Collapse eventKey="0">
                  <Card.Body className="adv-search-body">
                    <Form>
                      <Form.Row>
                        <Form.Group as={Col} md="8" className="form-group-inline">
                          <DatePicker selected={this.state.predictInput} 
                                      onChange={this.handlePredictChange} 
                                      showTimeSelect 
                                      dateFormat="Pp" />
                        </Form.Group>
                        <Form.Group as={Col} md="1" className="form-group-inline">
                          <Button variant="primary" type="button" className="uniform-width" onClick={this.handlePredictClick}>Plan</Button>
                        </Form.Group>
                      </Form.Row>
                    </Form>
                  </Card.Body>
                </Accordion.Collapse>
              </Card>
            </Accordion>
            <MapContainer center={[position.lat, position.lon]} zoom={position.zoom}>
              <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
                { this.renderBikeStations(this.state.bikeStations) }        
            </MapContainer>
            <div>&nbsp;</div>
            { this.state.showRideModal && this.renderRideModal() }
            { this.state.showReviewModal && this.renderReviewModal() }
          </div>          
        );
  }