fix(gtfs-search): set autoload to false, formatting fixes

autoload=false prevents the react-select component from loading options when the component renders. We need this because otherwise if we were to render some number of select components they would all try to load their options on render.
ibi-group · Sep 28, 2017 · fc26e9d · fc26e9d
1 parent a0aef69
commit fc26e9d
Showing 1 changed file with 36 additions and 29 deletions.
diff --git a/lib/gtfs/components/gtfssearch.js b/lib/gtfs/components/gtfssearch.js
@@ -15,6 +15,7 @@ export default class GtfsSearch extends Component {
   }
 
   static defaultProps = {
+    autoload: false, // prevent options from auto-loading, esp. when rendering multiple
     entities: ['routes', 'stops'],
     minimumInput: 1
   }
@@ -43,18 +44,19 @@ export default class GtfsSearch extends Component {
   }
 
   _getRoutes = (input) => {
-    const feedIds = this.props.feeds.map(getFeedId)
+    const {feeds, filterByStop} = this.props
+    const feedIds = feeds.map(getFeedId)
 
     if (!feedIds.length) return []
 
     // don't need to use limit here
-    // const limit = this.props.limit ? '&limit=' + this.props.limit : ''
+    // const limit = limit ? '&limit=' + limit : ''
     const nameQuery = input ? '&name=' + input : ''
-    const url = this.props.filterByStop ? `/api/manager/routes?stop=${this.props.filterByStop.stop_id}&feed=${feedIds.toString()}` : `/api/manager/routes?feed=${feedIds.toString()}${nameQuery}`
+    const url = filterByStop
+      ? `/api/manager/routes?stop=${filterByStop.stop_id}&feed=${feedIds.toString()}`
+      : `/api/manager/routes?feed=${feedIds.toString()}${nameQuery}`
     return fetch(url)
-      .then((response) => {
-        return response.json()
-      })
+      .then((response) => response.json())
       .then((routes) => {
         const routeOptions = routes !== null && routes.length > 0
           ? routes.sort((a, b) => {
@@ -65,14 +67,7 @@ export default class GtfsSearch extends Component {
             } else {
               return bRouteName.startsWith(input) ? 1 : aRouteName.localeCompare(bRouteName)
             }
-            // return 0
-          }).map(route => (
-            {
-              route,
-              value: route.route_id,
-              label: `${this.getRouteName(route)} (${route.route_id})`,
-              agency: getFeed(this.props.feeds, route.feed_id)}
-          ))
+          }).map(this._routeToOption)
           : []
         return routeOptions
       })
@@ -89,11 +84,11 @@ export default class GtfsSearch extends Component {
 
     const limit = this.props.limit ? '&limit=' + this.props.limit : ''
     const nameQuery = input ? '&name=' + input : ''
-    const url = this.props.filterByRoute ? `/api/manager/stops?route=${this.props.filterByRoute.route_id}&feed=${feedIds.toString()}${limit}` : `/api/manager/stops?feed=${feedIds.toString()}${nameQuery}${limit}`
+    const url = this.props.filterByRoute
+      ? `/api/manager/stops?route=${this.props.filterByRoute.route_id}&feed=${feedIds.toString()}${limit}`
+      : `/api/manager/stops?feed=${feedIds.toString()}${nameQuery}${limit}`
     return fetch(url)
-      .then((response) => {
-        return response.json()
-      })
+      .then((response) => response.json())
       .then((stops) => {
         const stopOptions = stops !== null && stops.length > 0
           ? stops.sort((a, b) => {
@@ -104,16 +99,7 @@ export default class GtfsSearch extends Component {
             } else {
               return bStopName.startsWith(input) ? 1 : aStopName.localeCompare(bStopName)
             }
-          }).map(stop => {
-            const agency = getFeed(this.props.feeds, stop.feed_id)
-            const id = stop.stop_code ? stop.stop_code : stop.stop_id
-            return {
-              stop,
-              value: stop.stop_id,
-              label: `${stop.stop_name} (${id})`,
-              agency: agency
-            }
-          })
+          }).map(this._stopToOption)
           : []
         return stopOptions
       })
@@ -123,6 +109,26 @@ export default class GtfsSearch extends Component {
       })
   }
 
+  _routeToOption = route => (
+    {
+      route,
+      value: route.route_id,
+      label: `${this.getRouteName(route)} (${route.route_id})`,
+      agency: getFeed(this.props.feeds, route.feed_id)
+    }
+  )
+
+  _stopToOption = stop => {
+    const agency = getFeed(this.props.feeds, stop.feed_id)
+    const id = stop.stop_code ? stop.stop_code : stop.stop_id
+    return {
+      stop,
+      value: stop.stop_id,
+      label: `${stop.stop_name} (${id})`,
+      agency
+    }
+  }
+
   getRouteName = (route) => {
     const routeName = route.route_short_name && route.route_long_name
       ? `${route.route_short_name} - ${route.route_long_name}`
@@ -163,7 +169,8 @@ export default class GtfsSearch extends Component {
   }
 
   render () {
-    const placeholder = this.props.placeholder || 'Begin typing to search for ' + this.props.entities.join(' or ') + '...'
+    const {entities, placeholder: propsPlaceholder} = this.props
+    const placeholder = propsPlaceholder || 'Begin typing to search for ' + entities.join(' or ') + '...'
     return (
       <Select.Async
         {...this.props}