feat(overlay): Refine/enhance bike station overlay

Add icons for hubs/floating bikes. Add simple station info popup. Refresh periodically using timer.

Author: David Emory

lib/components/map/bike-rental-overlay.js

@@ -1,5 +1,7 @@
-import { Component, PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { Marker, Popup } from 'react-leaflet'
+import { divIcon } from 'leaflet'
 
 import { bikeRentalQuery } from '../../actions/api'
 
@@ -10,28 +12,62 @@ class BikeRentalOverlay extends Component {
   }
 
   componentDidMount () {
-    console.log('refreshing bike stations');
-    this.state.refreshStations()
+    // ititial station retrieval
+    this.props.refreshStations()
+
+    // set up timer to refresh stations periodically
+    this._refreshTimer = setInterval(() => {
+      this.props.refreshStations()
+    }, 30000) // defaults to every 30 sec. TODO: make this configurable?
+  }
+
+  componentWillUnmount () {
+    clearInterval(this._refreshTimer)
   }
 
   render () {
-    // const { from, to } = this.props.query
-    console.log('render stations: ' + this.props.stations)
-    return null
-    /*return (
+    return (
       <div>
-        <Endpoint type='from' location={from} {...this.props} />
-        <Endpoint type='to' location={to} {...this.props} />
+        {this.props.stations.map((station) => {
+          const icon = station.isFloatingBike
+            ? divIcon({
+                html: `<i class="fa fa-bicycle fa-stack-2x" style="color: #000000"></i>`,
+                className: ''
+              })
+            : divIcon({
+                html: `<i class="fa fa-circle fa-stack-2x" style="color: #000000"></i>`,
+                className: ''
+              })
+          return (
+            <Marker
+              icon={icon}
+              position={[station.y, station.x]}
+            >
+              <Popup>
+                {station.isFloatingBike
+                  ? <span>
+                      <b>Floating bike: {station.name}</b>
+                    </span>
+                  : <span>
+                      <b>{station.name}</b><br />
+                      Available bikes: {station.bikesAvailable}<br />
+                      Available docks: {station.spacesAvailable}<br />
+                    </span>
+                }
+              </Popup>
+            </Marker>
+          )
+        })}
       </div>
-    )*/
+    )
   }
 }
 
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    stations: state.otp.overlay.bike_rental.stations
+    stations: state.otp.overlay.bikeRental.stations
   }
 }
 

lib/reducers/create-otp-reducer.js

@@ -33,7 +33,7 @@ function createOtpReducer (config, initialQuery) {
     searches: [],
     activeSearch: 0,
     overlay: {
-      bike_rental: {
+      bikeRental: {
         stations: []
       }
     }
@@ -73,11 +73,29 @@ function createOtpReducer (config, initialQuery) {
           }},
           activeSearch: { $set: latestSearchIndex }
         })
+      case 'BIKE_RENTAL_REQUEST':
+        return update(state, {
+          overlay: {
+            bikeRental: {
+              pending: {$set: true},
+              error: {$set: null}
+            }
+          }
+        })
+      case 'BIKE_RENTAL_ERROR':
+        return update(state, {
+          overlay: {
+            bikeRental: {
+              pending: {$set: false},
+              error: {$set: action.payload}
+            }
+          }
+        })
       case 'BIKE_RENTAL_RESPONSE':
         return update(state, {
           overlay: {
-            bike_rental: {
-              stations: {$set: action.payload},
+            bikeRental: {
+              stations: {$set: action.payload.stations},
               pending: {$set: false}
             }
           }