From 966e6fa04a36f4e14beadf6a69799f6446ea9019 Mon Sep 17 00:00:00 2001 From: Landon Reed Date: Wed, 7 Jun 2017 12:20:28 -0400 Subject: [PATCH] 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 | 20 +++++++-- .../components/timetable/TimetableEditor.js | 44 ++++++------------- .../components/timetable/TimetableHeader.js | 4 +- .../containers/ActiveTimetableEditor.js | 5 ++- lib/editor/reducers/timetable.js | 21 +++++++++ 5 files changed, 57 insertions(+), 37 deletions(-) diff --git a/lib/editor/actions/trip.js b/lib/editor/actions/trip.js index 34a7723d9..47af740e5 100644 --- a/lib/editor/actions/trip.js +++ b/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', diff --git a/lib/editor/components/timetable/TimetableEditor.js b/lib/editor/components/timetable/TimetableEditor.js index af72382de..ab2c65933 100644 --- a/lib/editor/components/timetable/TimetableEditor.js +++ b/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 { {activeSchedule ? :

{activePattern diff --git a/lib/editor/components/timetable/TimetableHeader.js b/lib/editor/components/timetable/TimetableHeader.js index 26d11c724..4ce5e0ec5 100644 --- a/lib/editor/components/timetable/TimetableHeader.js +++ b/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}) } } diff --git a/lib/editor/containers/ActiveTimetableEditor.js b/lib/editor/containers/ActiveTimetableEditor.js index a6408d7cc..791c85688 100644 --- a/lib/editor/containers/ActiveTimetableEditor.js +++ b/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, diff --git a/lib/editor/reducers/timetable.js b/lib/editor/reducers/timetable.js index d874382ff..83bf444ef 100644 --- a/lib/editor/reducers/timetable.js +++ b/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}