renderBikeStations()

in assets/src/modules/signup/Home.tsx [467:495]

• 29 lines of code
• 4 McCabe index (conditional complexity)

  renderBikeStations(bikeStations: BikeStation[]) {
    const stationsList: BikeStation[] = [];
    return stationsList.concat(bikeStations).map(
      (station, i) => {
        let markerColor = 'black';
        if (station.numOfBikes >= 10) markerColor = 'green';
        else if (station.numOfBikes >= 5) markerColor = 'yellow';
        else if (station.numOfBikes >= 1) markerColor = 'red';
        return (
          <CircleMarker key={station.stationId} center={[station.lat, station.lon]} pathOptions={{ color: markerColor, fillColor: markerColor }} radius={10}>
            <Popup className='request-popup'>
              <Table>
                <thead>
                  <tr>
                    <th colSpan={2} className='popup-title'>{station.name}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className='popup-label'>Bikes Available:</td>
                    <td className='popup-caption'>{station.numOfBikes}</td>
                  </tr>
                  <tr>
                    <td className='popup-label'>Station Capacity:</td>
                    <td className='popup-caption'>{station.capacity}</td>
                  </tr>
                  <tr>
                    <td align='center'><Button variant="primary" type='button' className='uniform-width' onClick={() => this.handleRideClick(station)}>Ride</Button></td>
                    <td align='center'><Button variant="primary" type='button' className='uniform-width' onClick={() => this.handleReviewsClick(station)}>Reviews</Button></td>