fix(editor): fix stop/route select input

fixes #92

lib/editor/components/EditorInput.js

@@ -60,6 +60,22 @@ export default class EditorInput extends Component {
     uploadBrandingAsset(feedSource.id, activeEntity.id, activeComponent, files[0])
   }
 
+  _agencyToOption = agency => ({
+    value: agency.agency_id,
+    label: agency.agency_name,
+    agency
+  })
+
+  _entityToOption = (entity, key) => {
+    return entity
+      ? {
+        value: entity[key],
+        label: getEntityName(entity),
+        entity
+      }
+      : null
+  }
+
   render () {
     const {
       activeEntity,
@@ -243,15 +259,19 @@ export default class EditorInput extends Component {
             </FormControl>
           </FormGroup>
         )
-      case 'GTFS_ROUTE':
-        const route = getTableById(tableData, 'route').find(s => s.id === currentValue)
+      case 'GTFS_ROUTE': {
+        const routes = getTableById(tableData, 'route')
+        const key = 'route_id'
+        const route = routes.find(s => s[key] === currentValue)
         return (
           <VirtualizedEntitySelect
-            value={route ? {value: route.id, label: getEntityName(route), entity: route} : null}
+            value={this._entityToOption(route, key)}
             component={'route'}
-            entities={getTableById(tableData, 'route')}
+            entityKey={key}
+            entities={routes}
             onChange={this._onSelectChange} />
         )
+      }
       case 'GTFS_AGENCY':
         const agencies = getTableById(tableData, 'agency')
         const agency = agencies.find(a => a.agency_id === currentValue)
@@ -261,43 +281,41 @@ export default class EditorInput extends Component {
             <Select
               placeholder='Select agency...'
               clearable
-              value={agency ? {value: currentValue, label: agency.agency_name} : {value: currentValue}}
+              value={agency
+                ? this._agencyToOption(agency)
+                : currentValue !== null
+                  // Still display agency_id value for route if not null
+                  ? {value: currentValue}
+                  : null
+              }
               onChange={this._onSelectChange}
-              options={agencies.map(agency => ({
-                value: agency.agency_id,
-                label: agency.agency_name,
-                agency
-              }))} />
+              options={agencies.map(this._agencyToOption)} />
           </FormGroup>
         )
-      case 'GTFS_STOP':
+      case 'GTFS_STOP': {
         // Create copy of stops table (because of destructive splice operation
         // below).
         const stops = [...getTableById(tableData, 'stop')]
-        const stopIndex = stops.findIndex(s => s.id === activeEntity.id)
-        const selectedStop = stops.find(s => s.id === currentValue)
+        const key = 'stop_id'
+        const activeStopIndex = stops.findIndex(s => s[key] === activeEntity[key])
+        const selectedStop = stops.find(s => s[key] === currentValue)
         // Remove current entity from list of stops because this is only used
         // for parent_station selection and we can't make the self the parent).
-        if (stopIndex !== -1) {
-          stops.splice(stopIndex, 1)
+        if (activeStopIndex !== -1) {
+          stops.splice(activeStopIndex, 1)
         }
         return (
           <FormGroup {...formProps}>
             {basicLabel}
             <VirtualizedEntitySelect
-              value={selectedStop
-                ? {
-                  value: selectedStop.id,
-                  label: getEntityName(selectedStop),
-                  entity: selectedStop
-                }
-                : null
-              }
+              value={this._entityToOption(selectedStop, key)}
               component={'stop'}
+              entityKey={key}
               entities={stops}
               onChange={this._onSelectChange} />
           </FormGroup>
         )
+      }
       default:
         return null
     }