JourneyPatternsCollection#show: Fallback to route costs

When editing a `JourneyPattern`, you can edit the distance & time costs
between stops. We want to pre-fill these cost values (in the input
fields) if they haven't already been set by a user. This way, they get
an existing estimate of the cost and don't have to enter a value
manually unless the default doesn't work.

The pre-filled values come from `Route#costs`, which get calculated
ahead of time via the TomTom API.

Add a new `fetchRouteCosts` function that will fetch the costs for the
current route from the API. This function also caches the value on
`actions` so we don't keep making requests since the data isn't going to
change. Put the cached fetch in a `requestAnimationFrame` as a sort of
timeout to prevent a warning from React complaining about doing this
during a `render()` call.

Update `getTimeAndDistanceBetweenStops` to use the cost value from the
route costs instead of the journey pattern costs if it doesn't exist.

The `totalDistance` and `totalTime` we moved into `componentWillUpdate`
instead of `render()` because we thought that might be the cause of the
`render()` warning I mentioned above. Decided to leave this part in even
though it doesn't have anything to do with the goal of the changes here,
because it seemed like an okay change.

The `RECEIVE_ROUTE_COSTS` reducer will update the state with route
costs. We need the default distance:0 time:0 to avoid infinitely
fetching the costs API if a cost with the given key can't be found.

Put the route cost API URL in `window.routeCostsUrl` to allow us to get
it from the Rails URL helper.

Huge thanks to Johan for pairing with me on this code and walking me
through the setup for integrating the route costs JSON response into the
frontend interface.

Refs #6203

3 files changed, 70 insertions, 2 deletions

diff --git a/spec/javascript/journey_patterns/components/JourneyPattern_spec.js b/spec/javascript/journey_patterns/components/JourneyPattern_spec.js
index 0da75ad47..82c996424 100644
--- a/spec/javascript/journey_patterns/components/JourneyPattern_spec.js
+++ b/spec/javascript/journey_patterns/components/JourneyPattern_spec.js
@@ -26,7 +26,8 @@ describe('the edit button', () => {
         stop_points: []
       },
       index: 0,
-      editMode: editMode
+      editMode: editMode,
+      fetchRouteCosts: () => {}
     }
     let list = renderer.create(
       <JourneyPattern
@@ -38,6 +39,7 @@ describe('the edit button', () => {
         onDeleteJourneyPattern={props.onDeleteJourneyPattern}
         onOpenEditModal={props.onOpenEditModal}
         editMode={props.editMode}
+        fetchRouteCosts={props.fetchRouteCosts}
       />
     )
 
diff --git a/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js b/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js
index 0c852deff..b6f83963b 100644
--- a/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js
+++ b/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js
@@ -15,7 +15,8 @@ describe('stopPointHeader', () => {
       onLoadFirstPage: ()=>{},
       onOpenEditModal: ()=>{},
       stopPointsList: [stop_point, same_city_stop_point, other_country_stop_point],
-      journeyPatterns: []
+      journeyPatterns: [],
+      fetchRouteCosts: () => {}
     }
     let list = renderer.create(
       <JourneyPatterns
@@ -25,6 +26,7 @@ describe('stopPointHeader', () => {
         onCheckboxChange={props.onCheckboxChange}
         onLoadFirstPage={props.onLoadFirstPage}
         onOpenEditModal={props.onOpenEditModal}
+        fetchRouteCosts={props.fetchRouteCosts}
       />
     ).toJSON()
 
diff --git a/spec/javascript/journey_patterns/reducers/journey_patterns_spec.js b/spec/javascript/journey_patterns/reducers/journey_patterns_spec.js
index bfa87d24a..ce3bdc055 100644
--- a/spec/javascript/journey_patterns/reducers/journey_patterns_spec.js
+++ b/spec/javascript/journey_patterns/reducers/journey_patterns_spec.js
@@ -132,6 +132,70 @@ describe('journeyPatterns reducer', () => {
     ).toEqual([state[0], new_state])
   })
 
+  it('should handle RECEIVE_ROUTE_COSTS', () => {
+    const costs = {
+      "1-2": {
+        distance: 1,
+        time: 9,
+      },
+      "2-3": {
+        distance: 23,
+        time: 10
+      }
+    }
+    const new_costs = {
+      "1-2": {
+        distance: 0,
+        time: 10,
+      },
+      "2-3": {
+        distance: 23,
+        time: 10
+      }
+    }
+    const new_state = Object.assign({}, state[1], {costs: new_costs})
+    expect(
+      jpReducer(state, {
+        type: 'RECEIVE_ROUTE_COSTS',
+        costs,
+        key: '2-3',
+        index: 1
+      })
+    ).toEqual([state[0], new_state])
+  })
+
+  it('should handle RECEIVE_ROUTE_COSTS when cost key is missing', () => {
+    const costs = {
+      "1-2": {
+        distance: 1,
+        time: 9,
+      },
+      "2-3": {
+        distance: 23,
+        time: 10
+      }
+    }
+    const new_costs = {
+      "1-2": {
+        distance: 0,
+        time: 10,
+      },
+      "3-4": {
+        distance: 0,
+        time: 0
+      }
+    }
+    const new_state = Object.assign({}, state[1], {costs: new_costs})
+    expect(
+      jpReducer(state, {
+        type: 'RECEIVE_ROUTE_COSTS',
+        costs,
+        key: '3-4',
+        index: 1
+      })
+    ).toEqual([state[0], new_state])
+  })
+
   it('should handle DELETE_JOURNEYPATTERN', () => {
     expect(
       jpReducer(state, {