fix(TimetableHeader): move offsetRows to action/reducer; initial work…

… on saveNewTrip

previously offsetRows was modifying component state so edits were not moving through the store. This
caused the save button to remain disabled. This fixes that issue by creating a new offsetRows
action/reducer pair.

lib/editor/actions/trip.js

@@ -1,3 +1,5 @@
+import {createAction} from 'redux-actions'
+
 import { secureFetch } from '../../common/actions'
 import { setErrorMessage } from '../../manager/actions/status'
 
@@ -26,9 +28,7 @@ export function fetchTripsForCalendar (feedId, pattern, calendarId) {
     const url = `/api/editor/secure/trip?feedId=${feedId}&patternId=${pattern.id}&calendarId=${calendarId}`
     return dispatch(secureFetch(url))
       .then(res => res.json())
-      .then(trips => {
-        dispatch(receiveTripsForCalendar(feedId, pattern, calendarId, trips))
-      })
+      .then(trips => dispatch(receiveTripsForCalendar(feedId, pattern, calendarId, trips)))
   }
 }
 
@@ -77,6 +77,18 @@ export function saveTripsForCalendar (feedId, pattern, calendarId, trips) {
   }
 }
 
+// TODO: finish function to replace soft (unsaved) addNewTrip for POST API call
+export function saveNewTrip (feedId, pattern, calendarId, trip) {
+  return function (dispatch, getState) {
+    dispatch(savingTrips(feedId, pattern, calendarId, trip))
+    const url = `/api/editor/secure/trip?feedId=${feedId}`
+    trip.id = null
+    return dispatch(secureFetch(url, 'post', trip))
+      .then(res => res.json())
+      .then(t => dispatch(addNewTrip(t)))
+  }
+}
+
 // TODO: action is under construction...
 export function saveMultipleTripsForCalendar (feedId, pattern, calendarId, trips) {
   return function (dispatch, getState) {
@@ -116,6 +128,8 @@ export function saveMultipleTripsForCalendar (feedId, pattern, calendarId, trips
   }
 }
 
+export const offsetRows = createAction('OFFSET_ROWS')
+
 export function deletingTrips (feedId, pattern, calendarId, trips) {
   return {
     type: 'DELETING_TRIPS_FOR_CALENDAR',

lib/editor/components/timetable/TimetableEditor.js

@@ -96,6 +96,7 @@ export default class TimetableEditor extends Component {
   }
 
   duplicateRows = (indexArray) => {
+    // const {activePattern, activeScheduleId} = this.props
     const arrayAscending = indexArray.sort((a, b) => {
       return a - b
     })
@@ -109,12 +110,15 @@ export default class TimetableEditor extends Component {
         scrollToRow: {$set: lastIndex + arrayAscending.length}, // increment selected row
         scrollToColumn: {$set: 0}
       }
+      // TODO: replace addNewTrip with func that saves trip via POST
+      // this.props.addNewTrip(activePattern.feedId, activePattern, activeScheduleId, newRow)
       this.props.addNewTrip(newRow)
       this.setState(update(this.state, stateUpdate))
     }
   }
 
   addNewRow = (blank = false, scroll = false) => {
+    // const {activePattern, activeScheduleId} = this.props
     // set blank to true if there are no rows to clone
     blank = blank || this.props.timetable.trips.length === 0
     const lastIndex = this.props.timetable.trips.length - 1
@@ -126,6 +130,8 @@ export default class TimetableEditor extends Component {
       scrollToRow: {$set: lastIndex + 1}, // increment selected row
       scrollToColumn: {$set: 0}
     }
+    // TODO: replace addNewTrip with func that saves trip via POST
+    // this.props.addNewTrip(activePattern.feedId, activePattern, activeScheduleId, newRow)
     this.props.addNewTrip(newRow)
     if (scroll) {
       this.setState(update(this.state, stateUpdate))
@@ -158,30 +164,6 @@ export default class TimetableEditor extends Component {
     this.props.toggleAllRows(false)
   }
 
-  offsetRows = (rowIndexes, offsetAmount) => {
-    const newRows = [...this.props.timetable.trips]
-    const editedRows = []
-    console.log(`Offsetting ${rowIndexes.length} rows by ${offsetAmount} seconds`)
-    for (var i = 0; i < rowIndexes.length; i++) {
-      editedRows.push(rowIndexes[i])
-      for (var j = 0; j < this.props.timetable.columns.length; j++) {
-        const col = this.props.timetable.columns[j]
-        const path = `${rowIndexes[i]}.${col.key}`
-        if (isTimeFormat(col.type)) {
-          const currentVal = objectPath.get(newRows, path)
-          const value = currentVal + (offsetAmount % 86399) // ensure seconds does not exceed 24 hours
-          objectPath.set(newRows, path, value)
-          // this.props.updateCellValue(value, i, path)
-        }
-      }
-    }
-    const stateUpdate = {
-      data: {$set: newRows},
-      edited: {$push: editedRows}
-    }
-    this.setState(update(this.state, stateUpdate))
-  }
-
   saveEditedTrips = (pattern, activeScheduleId) => {
     const trips = []
     const tripIndexes = []
@@ -219,7 +201,8 @@ export default class TimetableEditor extends Component {
   }
 
   render () {
-    const {activePattern, activeSchedule} = this.props
+    const {activePattern, activeSchedule, toggleAllRows, toggleRowSelection} = this.props
+    const {height, scrollToColumn, scrollToRow} = this.state
 
     const panelStyle = {
       backgroundColor: 'white',
@@ -234,20 +217,19 @@ export default class TimetableEditor extends Component {
         <TimetableHeader
           activePattern={activePattern}
           removeSelectedRows={this.removeSelectedRows}
-          offsetRows={this.offsetRows}
           addNewRow={this.addNewRow}
           duplicateRows={this.duplicateRows}
           saveEditedTrips={this.saveEditedTrips}
           {...this.props} />
         {activeSchedule
           ? <Timetable
-            style={{height: `${this.state.height - HEADER_HEIGHT - 50}px`}}
+            style={{height: `${height - HEADER_HEIGHT - 50}px`}}
             constructNewRow={this.constructNewRow}
             addNewRow={this.addNewRow}
-            toggleRowSelection={this.props.toggleRowSelection}
-            toggleAllRows={this.props.toggleAllRows}
-            scrollToRow={this.state.scrollToRow}
-            scrollToColumn={this.state.scrollToColumn}
+            toggleRowSelection={toggleRowSelection}
+            toggleAllRows={toggleAllRows}
+            scrollToRow={scrollToRow}
+            scrollToColumn={scrollToColumn}
             {...this.props} />
           : <p className='lead text-center'>
             {activePattern

lib/editor/components/timetable/TimetableHeader.js

@@ -50,10 +50,10 @@ export default class TimetableHeader extends Component {
     const {offsetRows, timetable} = this.props
     const {selected, trips, offset} = timetable
     if (selected.length > 0) {
-      offsetRows(selected, offset)
+      offsetRows({rowIndexes: selected, offset})
     } else {
       // if no rows selected, offset last row
-      offsetRows([trips.length - 1], offset)
+      offsetRows({rowIndexes: [trips.length - 1], offset})
     }
   }
 

lib/editor/containers/ActiveTimetableEditor.js

@@ -2,11 +2,13 @@ import { connect } from 'react-redux'
 import {
   saveTripsForCalendar,
   deleteTripsForCalendar,
+  offsetRows,
   updateCellValue,
   toggleRowSelection,
   toggleAllRows,
   toggleDepartureTimes,
   addNewTrip,
+  // saveNewTrip,
   removeTrips,
   setOffset
 } from '../actions/trip'
@@ -32,7 +34,8 @@ const mapDispatchToProps = {
 
   // TIMETABLE FUNCTIONS
   updateCellValue,
-  addNewTrip,
+  addNewTrip, // : saveNewTrip,
+  offsetRows,
   removeTrips,
   toggleAllRows,
   toggleRowSelection,

lib/editor/reducers/timetable.js

@@ -3,6 +3,7 @@ import objectPath from 'object-path'
 import clone from 'lodash.clonedeep'
 
 import { sortAndFilterTrips } from '../util'
+import { isTimeFormat } from '../util/timetable'
 
 const defaultState = {
   columns: [],
@@ -39,6 +40,26 @@ const timetable = (state = defaultState, action) => {
         trips: {$set: trips},
         edited: {$set: []}
       })
+    case 'OFFSET_ROWS':
+      trips = clone(state.trips)
+      const editedRows = []
+      // console.log(`Offsetting ${action.payload.rowIndexes.length} rows by ${action.payload.offset} seconds`)
+      for (var i = 0; i < action.payload.rowIndexes.length; i++) {
+        editedRows.push(action.payload.rowIndexes[i])
+        for (var j = 0; j < state.columns.length; j++) {
+          const col = state.columns[j]
+          const path = `${action.payload.rowIndexes[i]}.${col.key}`
+          if (isTimeFormat(col.type)) {
+            const currentVal = objectPath.get(trips, path)
+            const value = currentVal + (action.payload.offset % 86399) // ensure seconds does not exceed 24 hours
+            objectPath.set(trips, path, value)
+          }
+        }
+      }
+      return update(state, {
+        trips: {$set: trips},
+        edited: {$push: editedRows}
+      })
     case 'SET_TIMETABLE_OFFSET':
       return update(state, {
         offset: {$set: action.seconds}