refactor(gtfsplus): move component state into store, use selectors for filtering rows

Author: landonreed

lib/gtfsplus/actions/gtfsplus.js

@@ -1,5 +1,6 @@
 import JSZip from 'jszip'
 import fetch from 'isomorphic-fetch'
+import {createAction} from 'redux-actions'
 
 import { secureFetch } from '../../common/actions'
 import { getConfigProperty } from '../../common/util/config'
@@ -8,30 +9,15 @@ import { fetchFeedVersions } from '../../manager/actions/versions'
 
 // EDIT ACTIVE GTFS+ ACTIONS
 
-export function addGtfsPlusRow (tableId) {
-  const table = getConfigProperty('modules.gtfsplus.spec').find(t => t.id === tableId)
+export const addGtfsPlusRow = createAction('ADD_GTFSPLUS_ROW')
 
-  const rowData = {}
-  for (const field of table.fields) {
-    rowData[field.name] = null
-  }
+export const setActiveTable = createAction('SET_ACTIVE_GTFSPLUS_TABLE')
 
-  return {
-    type: 'ADD_GTFSPLUS_ROW',
-    tableId,
-    rowData
-  }
-}
+export const setCurrentPage = createAction('SET_CURRENT_GTFSPLUS_PAGE')
 
-export function updateGtfsPlusField (tableId, rowIndex, fieldName, newValue) {
-  return {
-    type: 'UPDATE_GTFSPLUS_FIELD',
-    tableId,
-    rowIndex,
-    fieldName,
-    newValue
-  }
-}
+export const setVisibilityFilter = createAction('SET_GTFSPLUS_VISIBILITY')
+
+export const updateGtfsPlusField = createAction('UPDATE_GTFSPLUS_FIELD')
 
 export function deleteGtfsPlusRow (tableId, rowIndex) {
   return {
@@ -227,8 +213,6 @@ export function loadGtfsEntities (tableId, rows, feedSource, feedVersionId) {
     // in the published version.
     if (routesToLoad.length === 0 && stopsToLoad.length === 0) return
     const feedId = feedVersionId.replace('.zip', '')
-    console.log(`fetching routes ${routesToLoad.join(',')}`)
-    console.log(`fetching stops ${stopsToLoad.join(',')}`)
     var loadRoutes = Promise.all(routesToLoad.map(routeId => {
       const url = `/api/manager/routes/${routeId}?feed=${feedId}`
       return fetch(url)

lib/gtfsplus/components/GtfsPlusEditor.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react'
-import { Grid, Row, Col, Button, Glyphicon, PageHeader } from 'react-bootstrap'
+import {Grid, Row, Col, Button, Glyphicon, PageHeader} from 'react-bootstrap'
 import JSZip from 'jszip'
 import { Link } from 'react-router'
 
@@ -20,15 +20,14 @@ export default class GtfsPlusEditor extends Component {
     newRowClicked: PropTypes.func,
     onComponentMount: PropTypes.func,
     project: PropTypes.object,
+    setActiveTable: PropTypes.func,
+    setCurrentPage: PropTypes.func,
+    setVisibilityFilter: PropTypes.func,
     tableData: PropTypes.object,
     user: PropTypes.object,
     validation: PropTypes.object
   }
 
-  state = {
-    activeTableId: 'realtime_routes'
-  }
-
   componentWillMount () {
     this.props.onComponentMount(this.props)
   }
@@ -66,11 +65,11 @@ export default class GtfsPlusEditor extends Component {
   _gtfsEntitySelected = (type, entity) => this.props.gtfsEntitySelected(type, entity)
 
   _newRowsDisplayed = (rows) => {
-    const {feedSource, feedVersionId, loadGtfsEntities} = this.props
-    loadGtfsEntities(this.state.activeTableId, rows, feedSource, feedVersionId)
+    const {activeTableId, feedSource, feedVersionId, loadGtfsEntities} = this.props
+    loadGtfsEntities(activeTableId, rows, feedSource, feedVersionId)
   }
 
-  _selectTable = (activeTableId) => this.setState({activeTableId})
+  _selectTable = (activeTableId) => this.props.setActiveTable({activeTableId})
 
   _showHelpClicked = (tableId, fieldName) => {
     const helpContent = fieldName
@@ -87,23 +86,25 @@ export default class GtfsPlusEditor extends Component {
 
   render () {
     const {
+      activeTableId,
       feedSource,
-      deleteRowClicked,
-      fieldEdited,
-      newRowClicked,
       project,
       tableData,
       user,
-      validation
+      validation,
+      visibleRows
     } = this.props
     if (!feedSource) return null
     const editingIsDisabled = !user.permissions.hasFeedPermission(feedSource.organizationId, feedSource.projectId, feedSource.id, 'edit-gtfs')
     const buttonStyle = {
       display: 'block',
-      width: '100%'
+      width: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     }
 
-    const activeTable = getConfigProperty('modules.gtfsplus.spec').find(t => t.id === this.state.activeTableId)
+    const activeTable = getConfigProperty('modules.gtfsplus.spec').find(t => t.id === activeTableId)
 
     return (
       <ManagerPage ref='page'>
@@ -137,11 +138,16 @@ export default class GtfsPlusEditor extends Component {
           <Row>
             <Col xs={2}>
               {getConfigProperty('modules.gtfsplus.spec').map((table, index) => {
+                const tableLength = tableData[table.id] && tableData[table.id].length
                 return (<p key={index}>
                   <OptionButton
-                    bsStyle={table.id === this.state.activeTableId ? 'info' : 'default'}
+                    active={table.id === activeTableId}
                     key={table.id}
-                    style={buttonStyle}
+                    style={{
+                      color: tableLength ? 'black' : 'grey',
+                      ...buttonStyle
+                    }}
+                    title={table.id}
                     value={table.id}
                     onClick={this._selectTable}>
                     {validation && (table.id in validation)
@@ -155,14 +161,11 @@ export default class GtfsPlusEditor extends Component {
             </Col>
             <Col xs={10}>
               <GtfsPlusTable
+                {...this.props}
                 ref='activeTable'
-                feedSource={feedSource}
                 table={activeTable}
-                tableData={tableData[activeTable.id]}
-                validation={validation[activeTable.id]}
-                newRowClicked={newRowClicked}
-                deleteRowClicked={deleteRowClicked}
-                fieldEdited={fieldEdited}
+                rows={visibleRows}
+                validation={validation[activeTable.id] || []}
                 gtfsEntitySelected={this._gtfsEntitySelected}
                 getGtfsEntity={this._getGtfsEntity}
                 showHelpClicked={this._showHelpClicked}

lib/gtfsplus/components/GtfsPlusField.js

@@ -17,25 +17,26 @@ export default class GtfsPlusField extends Component {
   }
 
   _onChangeRoute = ({route}) => {
-    const {field, fieldEdited, gtfsEntitySelected, row, table} = this.props
-    fieldEdited(table.id, row, field.name, route.route_id)
+    const {field, fieldEdited, gtfsEntitySelected, row: rowIndex, table} = this.props
+    // tableId, rowIndex, fieldName, newValue
+    fieldEdited({tableId: table.id, rowIndex, fieldName: field.name, newValue: route.route_id})
     gtfsEntitySelected('route', route)
   }
 
   _onChangeStop = ({stop}) => {
-    const {field, fieldEdited, gtfsEntitySelected, row, table} = this.props
-    fieldEdited(table.id, row, field.name, stop.stop_id)
+    const {field, fieldEdited, gtfsEntitySelected, row: rowIndex, table} = this.props
+    fieldEdited({tableId: table.id, rowIndex, fieldName: field.name, newValue: stop.stop_id})
     gtfsEntitySelected('stop', stop)
   }
 
-  _onChangeValue = (value) => {
-    const {field, fieldEdited, row, table} = this.props
-    fieldEdited(table.id, row, field.name, value)
+  _onChangeValue = (newValue) => {
+    const {field, fieldEdited, row: rowIndex, table} = this.props
+    fieldEdited({tableId: table.id, rowIndex, fieldName: field.name, newValue})
   }
 
   _onChange = ({target}) => {
-    const {field, fieldEdited, row, table} = this.props
-    fieldEdited(table.id, row, field.name, target.value)
+    const {field, fieldEdited, row: rowIndex, table} = this.props
+    fieldEdited({tableId: table.id, rowIndex, fieldName: field.name, newValue: target.value})
   }
 
   render () {
@@ -56,7 +57,7 @@ export default class GtfsPlusField extends Component {
         const option = currentValue !== null && field.options.find(o => o.value.toUpperCase() === currentValue.toUpperCase())
         return (
           <FormControl componentClass='select'
-            value={option ? option.value : undefined}
+            value={option ? option.value : ''}
             onChange={this._onChange}>
             {/* Add field for empty string value if that is not an allowable option so that user selection triggers onChange */}
             {field.options.findIndex(option => option.value === '') === -1