fix(gtfsplus): fix multiple page rendering/pageCount update and use versionId for GTFS entities

Update pageCount and currentPage state variables correctly when props (specifically tableData) are
updated. Also, use the feedVersionId to fetch GTFS entities rather than the MTC feed source ID
(which refs latest published version) because there may be a mismatch between entity IDs (or entity
IDs may be missing)

fixes #34

Author: landonreed

lib/gtfsplus/actions/gtfsplus.js

@@ -5,7 +5,6 @@ import { secureFetch } from '../../common/actions'
 import { getConfigProperty } from '../../common/util/config'
 // import {stopsAndRoutes, compose} from '../../gtfs/util/graphql'
 import { fetchFeedVersions } from '../../manager/actions/versions'
-import { getFeedId } from '../../common/util/modules'
 
 // EDIT ACTIVE GTFS+ ACTIONS
 
@@ -180,7 +179,7 @@ export function receiveGtfsEntities (gtfsEntities) {
   }
 }
 
-export function loadGtfsEntities (tableId, rows, feedSource) {
+export function loadGtfsEntities (tableId, rows, feedSource, feedVersionId) {
   return function (dispatch, getState) {
     // lookup table for mapping tableId:fieldName keys to inputType values
     const typeLookup = {}
@@ -221,23 +220,32 @@ export function loadGtfsEntities (tableId, rows, feedSource) {
     //     return dispatch(receivedStopsAndRoutes(results))
     //   })
 
+    // FIXME: major issue here with feedId vs. feedVersionId.
+    // Basically, feedId will only reference the published feed version.
+    // Here in the GTFS+ editor, we always want routes/stops from the
+    // feedVersionId because there may be new routes/stops here that don't exist
+    // in the published version.
     if (routesToLoad.length === 0 && stopsToLoad.length === 0) return
-    const feedId = getFeedId(feedSource)
+    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)
       .then((response) => response.json())
+      .catch(err => console.log(err))
     }))
 
     var loadStops = Promise.all(stopsToLoad.map(stopId => {
       const url = `/api/manager/stops/${stopId}?feed=${feedId}`
       return fetch(url)
       .then((response) => response.json())
+      .catch(err => console.log(err))
     }))
 
     Promise.all([loadRoutes, loadStops]).then(results => {
-      const loadedRoutes = results[0]
-      const loadedStops = results[1]
+      const loadedRoutes = results[0].filter(res => res) // filter out undefined
+      const loadedStops = results[1].filter(res => res) // filter out undefined
       dispatch(receiveGtfsEntities(loadedRoutes.concat(loadedStops)))
     })
   }

lib/gtfsplus/components/GtfsPlusEditor.js

@@ -12,11 +12,12 @@ export default class GtfsPlusEditor extends Component {
   static propTypes = {
     deleteRowClicked: PropTypes.func,
     feedSource: PropTypes.object,
+    feedVersionId: PropTypes.string,
     fieldEdited: PropTypes.func,
     gtfsEntityLookup: PropTypes.object,
     gtfsEntitySelected: PropTypes.func,
+    loadGtfsEntities: PropTypes.func,
     newRowClicked: PropTypes.func,
-    newRowsDisplayed: PropTypes.func,
     onComponentMount: PropTypes.func,
     project: PropTypes.object,
     tableData: PropTypes.object,
@@ -64,7 +65,10 @@ export default class GtfsPlusEditor extends Component {
 
   _gtfsEntitySelected = (type, entity) => this.props.gtfsEntitySelected(type, entity)
 
-  _newRowsDisplayed = (rows) => this.props.newRowsDisplayed(this.state.activeTableId, rows, this.props.feedSource)
+  _newRowsDisplayed = (rows) => {
+    const {feedSource, feedVersionId, loadGtfsEntities} = this.props
+    loadGtfsEntities(this.state.activeTableId, rows, feedSource, feedVersionId)
+  }
 
   _selectTable = (activeTableId) => this.setState({activeTableId})
 

lib/gtfsplus/components/GtfsPlusTable.js

@@ -9,7 +9,16 @@ const RECORDS_PER_PAGE = 25
 
 export default class GtfsPlusTable extends Component {
   static propTypes = {
-    table: PropTypes.object
+    table: PropTypes.object,
+    tableData: PropTypes.array,
+    validation: PropTypes.object,
+    newRowClicked: PropTypes.func,
+    deleteRowClicked: PropTypes.func,
+    fieldEdited: PropTypes.func,
+    gtfsEntitySelected: PropTypes.func,
+    getGtfsEntity: PropTypes.func,
+    showHelpClicked: PropTypes.func,
+    newRowsDisplayed: PropTypes.func
   }
 
   state = {
@@ -22,6 +31,19 @@ export default class GtfsPlusTable extends Component {
     if (this.props.table !== nextProps.table) {
       this.setState({ currentPage: 1 })
     }
+    const nextTableLength = nextProps.tableData && nextProps.tableData.length
+    const tableLength = this.props.tableData && this.props.tableData.length
+    if (tableLength !== nextTableLength && nextProps.tableData) {
+      const pageCount = Math.ceil(nextTableLength / RECORDS_PER_PAGE)
+      // If current page becomes greater than page count (e.g., after deleting rows)
+      // or page count increases (e.g., after adding rows), set current page to
+      // page count to avoid confusion for user (user has added a row, but they
+      // don't see it because the current page has not updated).
+      const currentPage = this.state.currentPage > pageCount || pageCount > this.state.pageCount
+        ? pageCount
+        : this.state.currentPage
+      this.setState({currentPage, pageCount})
+    }
   }
 
   componentDidMount () {
@@ -33,17 +55,18 @@ export default class GtfsPlusTable extends Component {
   }
 
   getActiveRowData (currentPage) {
-    if (!this.props.tableData) return []
-    const tableValidation = this.props.validation || []
+    const {tableData, validation} = this.props
+    if (!tableData) return []
+    const tableValidation = validation || []
     if (this.state.visibility === 'validation' && tableValidation.length < 5000) {
-      return this.props.tableData
+      return tableData
         .filter(record => (tableValidation.find(v => v.rowIndex === record.origRowIndex)))
         .slice((currentPage - 1) * RECORDS_PER_PAGE,
-          Math.min(currentPage * RECORDS_PER_PAGE, this.props.tableData.length))
+          Math.min(currentPage * RECORDS_PER_PAGE, tableData.length))
     }
-    return this.props.tableData
+    return tableData
       .slice((currentPage - 1) * RECORDS_PER_PAGE,
-        Math.min(currentPage * RECORDS_PER_PAGE, this.props.tableData.length))
+        Math.min(currentPage * RECORDS_PER_PAGE, tableData.length))
   }
 
   _onChangeVisibleRows = (evt) => this.setState({visibility: evt.target.value, currentPage: 1})
@@ -71,9 +94,10 @@ export default class GtfsPlusTable extends Component {
   _onPageRight = evt => this.setState({ currentPage: this.state.currentPage + 1 })
 
   render () {
-    const {showHelpClicked, table} = this.props
-    const {pageCount} = this.state
-    const rowData = this.getActiveRowData(this.state.currentPage)
+    const {showHelpClicked, table, tableData, validation} = this.props
+    const {currentPage, pageCount} = this.state
+    console.log(currentPage, pageCount, tableData && tableData.length)
+    const rowData = this.getActiveRowData(currentPage)
     const headerStyle = {
       fontWeight: 'bold',
       fontSize: '24px',
@@ -103,15 +127,15 @@ export default class GtfsPlusTable extends Component {
             {(pageCount > 1)
               ? <span style={{ marginRight: '15px' }}>
                 <Button
-                  disabled={this.state.currentPage <= 1}
+                  disabled={currentPage <= 1}
                   onClick={this._onPageLeft}>
                   <Glyphicon glyph='arrow-left' />
                 </Button>
                 <span style={{fontSize: '18px', margin: '0px 10px'}}>
-                  Page {this.state.currentPage} of {pageCount}
+                  Page {currentPage} of {pageCount}
                 </span>
                 <Button
-                  disabled={this.state.currentPage >= pageCount}
+                  disabled={currentPage >= pageCount}
                   onClick={this._onPageRight}>
                   <Glyphicon glyph='arrow-right' />
                 </Button>
@@ -160,11 +184,11 @@ export default class GtfsPlusTable extends Component {
         <tbody>
           {rowData && rowData.length > 0
             ? rowData.map((data, rowIndex) => {
-              const tableRowIndex = ((this.state.currentPage - 1) * RECORDS_PER_PAGE) + rowIndex
+              const tableRowIndex = ((currentPage - 1) * RECORDS_PER_PAGE) + rowIndex
               return (
                 <tr key={rowIndex}>
                   {table.fields.map(field => {
-                    const validationIssue = this.props.validation
+                    const validationIssue = validation
                       ? this.props.validation.find(v =>
                           (v.rowIndex === data.origRowIndex && v.fieldName === field.name))
                       : null
@@ -196,7 +220,7 @@ export default class GtfsPlusTable extends Component {
                     <OptionButton
                       bsStyle='danger'
                       bsSize='small'
-                      value={rowIndex}
+                      value={tableRowIndex}
                       className='pull-right'
                       onClick={this._onClickDeleteRow}>
                       <Glyphicon glyph='remove' />
@@ -210,7 +234,7 @@ export default class GtfsPlusTable extends Component {
         </tbody>
       </Table>
 
-      {!rowData || rowData.length === 0
+      {(!tableData || tableData.length === 0)
         ? <Row><Col xs={12}>
           <i>No entries exist for this table.</i>
         </Col></Row>

lib/gtfsplus/containers/ActiveGtfsPlusEditor.js

@@ -14,6 +14,7 @@ import {
 
 const mapStateToProps = (state, ownProps) => {
   const feedSourceId = ownProps.routeParams.feedSourceId
+  const feedVersionId = ownProps.routeParams.feedVersionId
   const user = state.user
   // find the containing project
   const project = state.projects.all
@@ -33,6 +34,7 @@ const mapStateToProps = (state, ownProps) => {
     gtfsEntityLookup: state.gtfsplus.gtfsEntityLookup,
     validation: state.gtfsplus.validation,
     feedSource,
+    feedVersionId,
     project,
     user
   }
@@ -54,8 +56,8 @@ const mapDispatchToProps = (dispatch, ownProps) => {
       dispatch(uploadGtfsPlusFeed(feedVersionId, file))
       .then(() => dispatch(downloadGtfsPlusFeed(feedVersionId)))
     },
-    newRowsDisplayed: (tableId, rows, feedSource) => {
-      if (feedSource) dispatch(loadGtfsEntities(tableId, rows, feedSource))
+    loadGtfsEntities: (tableId, rows, feedSource, feedVersionId) => {
+      if (feedSource) dispatch(loadGtfsEntities(tableId, rows, feedSource, feedVersionId))
     },
     gtfsEntitySelected: (type, entity) => dispatch(receiveGtfsEntities([entity]))
   }