Merge pull request #194 from af83/5156-handle-long-distance-routes

Handle long distance routes. Refs #5156

48 files changed, 192 insertions, 116 deletions

diff --git a/app/javascript/helpers/stop_area_header_manager.js b/app/javascript/helpers/stop_area_header_manager.js
new file mode 100644
index 000000000..54d957be9
--- /dev/null
+++ b/app/javascript/helpers/stop_area_header_manager.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+export default class StopAreaHeaderManager {
+  constructor(ids_list, stopPointsList, features) {
+    this.ids_list = ids_list
+    this.stopPointsList = stopPointsList
+    this.features = features
+  }
+
+  hasFeature(key) {
+    return this.features[key]
+  }
+
+  stopPointHeader(object_id) {
+    let index = this.ids_list.indexOf(object_id)
+    let sp = this.stopPointsList[index]
+    let showHeadline = this.showHeader(object_id)
+    return (
+      <div
+        className={(showHeadline) ? 'headlined' : ''}
+        data-headline={showHeadline}
+        title={sp.city_name + ' (' + sp.zip_code +')'}
+      >
+        <span><span>{sp.name}</span></span>
+      </div>
+    )
+  }
+
+  showHeader(object_id) {
+    let showHeadline = false
+    let headline = ""
+    let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name"
+    let index = this.ids_list.indexOf(object_id)
+    let sp = this.stopPointsList[index]
+    let previousBreakpoint = this.stopPointsList[index - 1]
+    if(index == 0 || (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){
+      showHeadline = true
+      headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name
+    }
+    return showHeadline ? headline : ""
+  }
+}
diff --git a/app/javascript/journey_patterns/components/ConfirmModal.js b/app/javascript/journey_patterns/components/ConfirmModal.js
index 2cc1bef44..ccd0a9384 100644
--- a/app/javascript/journey_patterns/components/ConfirmModal.js
+++ b/app/javascript/journey_patterns/components/ConfirmModal.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 
 export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) {
   return (
diff --git a/app/javascript/journey_patterns/components/CreateModal.js b/app/javascript/journey_patterns/components/CreateModal.js
index d0eff6e57..a6c1b608a 100644
--- a/app/javascript/journey_patterns/components/CreateModal.js
+++ b/app/javascript/journey_patterns/components/CreateModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class CreateModal extends Component {
diff --git a/app/javascript/journey_patterns/components/EditModal.js b/app/javascript/journey_patterns/components/EditModal.js
index 7a5d24fba..c960cb41c 100644
--- a/app/javascript/journey_patterns/components/EditModal.js
+++ b/app/javascript/journey_patterns/components/EditModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class EditModal extends Component {
diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index 69eff978e..2ae9f5552 100644
--- a/app/javascript/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class JourneyPattern extends Component{
@@ -31,14 +32,8 @@ export default class JourneyPattern extends Component{
     return this.props.status.features[key]
   }
 
-  cityNameChecker(sp) {
-    let bool = false
-
-    if(sp.city_name != this.previousCity){
-      bool = true
-      this.previousCity = sp.city_name
-    }
-    return bool
+  cityNameChecker(sp, i) {
+    return this.props.journeyPatterns.showHeader(sp.object_id + "-" + i)
   }
 
   spNode(sp, headlined){
@@ -154,7 +149,7 @@ export default class JourneyPattern extends Component{
             if(stopPoint.checked){
               this.previousSpId = stopPoint.id
             }
-            let headlined = this.cityNameChecker(stopPoint)
+            let headlined = this.cityNameChecker(stopPoint, i)
             return (
               <div key={i} className={(stopPoint.checked ? 'activated' : 'deactivated') + (this.props.editMode ? ' edit-mode' : '')}>
                 <div className={'td' + (headlined ? ' with-headline' : '')}>
@@ -189,5 +184,6 @@ JourneyPattern.propTypes = {
   index: PropTypes.number,
   onCheckboxChange: PropTypes.func.isRequired,
   onOpenEditModal: PropTypes.func.isRequired,
-  onDeleteJourneyPattern: PropTypes.func.isRequired
+  onDeleteJourneyPattern: PropTypes.func.isRequired,
+  journeyPatterns: PropTypes.object.isRequired
 }
diff --git a/app/javascript/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js
index 1e391b0c2..31727fefc 100644
--- a/app/javascript/journey_patterns/components/JourneyPatterns.js
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -1,16 +1,23 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 import JourneyPattern from './JourneyPattern'
-
+import StopAreaHeaderManager from '../../helpers/stop_area_header_manager'
 
 export default class JourneyPatterns extends Component {
   constructor(props){
     super(props)
-    this.previousCity = undefined
+    this.headerManager = new StopAreaHeaderManager(
+      _.map(this.props.stopPointsList, (sp, i)=>{return sp.stop_area_object_id + "-" + i}),
+      this.props.stopPointsList,
+      this.props.status.features
+    )
   }
+
   componentDidMount() {
     this.props.onLoadFirstPage()
   }
+
   componentDidUpdate(prevProps, prevState) {
     if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
@@ -54,25 +61,12 @@ export default class JourneyPatterns extends Component {
     }
   }
 
-  hasFeature(key) {
-    return this.props.status.features[key]
+  showHeader(object_id) {
+    return this.headerManager.showHeader(object_id)
   }
 
-  cityNameChecker(sp) {
-    let bool = false
-    if(sp.city_name != this.previousCity){
-      bool = true
-      this.previousCity = sp.city_name
-    }
-    return (
-      <div
-        className={(bool) ? 'headlined' : ''}
-        data-headline={(bool) ? sp.city_name : ''}
-        title={sp.city_name + ' (' + sp.zip_code +')'}
-      >
-        <span><span>{sp.name}</span></span>
-      </div>
-    )
+  hasFeature(key) {
+    return this.props.status.features[key]
   }
 
   render() {
@@ -120,7 +114,7 @@ export default class JourneyPatterns extends Component {
                 {this.props.stopPointsList.map((sp, i) =>{
                   return (
                     <div key={i} className={'td' + (this.hasFeature('costs_in_journey_patterns') ? ' with-costs' : '')}>
-                      {this.cityNameChecker(sp)}
+                      {this.headerManager.stopPointHeader(sp.stop_area_object_id + "-" + i)}
                     </div>
                   )
                 })}
@@ -138,6 +132,7 @@ export default class JourneyPatterns extends Component {
                       onUpdateJourneyPatternCosts={(costs) => this.props.onUpdateJourneyPatternCosts(index, costs)}
                       status= {this.props.status}
                       editMode= {this.props.editMode}
+                      journeyPatterns= {this}
                       />
                   )}
                 </div>
diff --git a/app/javascript/journey_patterns/components/Navigate.js b/app/javascript/journey_patterns/components/Navigate.js
index f2fdd668f..78f324a7d 100644
--- a/app/javascript/journey_patterns/components/Navigate.js
+++ b/app/javascript/journey_patterns/components/Navigate.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default function Navigate({ dispatch, journeyPatterns, pagination, status }) {
diff --git a/app/javascript/journey_patterns/components/SaveJourneyPattern.js b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
index d071fa542..7e4492e0e 100644
--- a/app/javascript/journey_patterns/components/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class SaveJourneyPattern extends Component {
diff --git a/app/javascript/packs/routes/edit.js b/app/javascript/packs/routes/edit.js
index d6ceed60f..b787bec97 100644
--- a/app/javascript/packs/routes/edit.js
+++ b/app/javascript/packs/routes/edit.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
@@ -12,7 +14,7 @@ datas = JSON.parse(decodeURIComponent(datas))
 
 // logger, DO NOT REMOVE
 var applyMiddleware = require('redux').applyMiddleware
-var createLogger = require('redux-logger')
+import {createLogger} from 'redux-logger';
 var thunkMiddleware = require('redux-thunk').default
 var promise = require('redux-promise')
 
diff --git a/app/javascript/routes/components/App.js b/app/javascript/routes/components/App.js
index 0f5786407..26e69bf53 100644
--- a/app/javascript/routes/components/App.js
+++ b/app/javascript/routes/components/App.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import AddStopPoint from '../containers/AddStopPoint'
 import VisibleStopPoints from'../containers/VisibleStopPoints'
 import clone  from '../../helpers/clone'
@@ -16,8 +17,8 @@ export default class App extends Component {
         <VisibleStopPoints />
         <AddStopPoint />
       </div>
-    )  
-  } 
+    )
+  }
 }
 
 App.childContextTypes = {
diff --git a/app/javascript/routes/components/BSelect2.js b/app/javascript/routes/components/BSelect2.js
index 0d8d7787f..158deaa17 100644
--- a/app/javascript/routes/components/BSelect2.js
+++ b/app/javascript/routes/components/BSelect2.js
@@ -1,6 +1,7 @@
 import _ from'lodash'
-import React, { Component, PropTypes } from 'react'
-import Select2 from 'react-select2'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Select2 from 'react-select2-wrapper'
 
 
 // get JSON full path
diff --git a/app/javascript/routes/components/OlMap.js b/app/javascript/routes/components/OlMap.js
index 2c01dfa7f..056bddbcb 100644
--- a/app/javascript/routes/components/OlMap.js
+++ b/app/javascript/routes/components/OlMap.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class OlMap extends Component{
   constructor(props, context){
diff --git a/app/javascript/routes/components/StopPoint.js b/app/javascript/routes/components/StopPoint.js
index 606121f99..2d47e802b 100644
--- a/app/javascript/routes/components/StopPoint.js
+++ b/app/javascript/routes/components/StopPoint.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import BSelect2 from './BSelect2'
 import OlMap from './OlMap'
 
diff --git a/app/javascript/routes/components/StopPointList.js b/app/javascript/routes/components/StopPointList.js
index 68af16f57..43a027084 100644
--- a/app/javascript/routes/components/StopPointList.js
+++ b/app/javascript/routes/components/StopPointList.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import StopPoint from './StopPoint'
 
 export default function StopPointList({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }, {I18n}) {
diff --git a/app/javascript/time_tables/components/ConfirmModal.js b/app/javascript/time_tables/components/ConfirmModal.js
index d89170ee7..845e7ed1b 100644
--- a/app/javascript/time_tables/components/ConfirmModal.js
+++ b/app/javascript/time_tables/components/ConfirmModal.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 
 export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, timetable, metas}, {I18n}) {
   return (
diff --git a/app/javascript/time_tables/components/ErrorModal.js b/app/javascript/time_tables/components/ErrorModal.js
index e810f49ab..543177e54 100644
--- a/app/javascript/time_tables/components/ErrorModal.js
+++ b/app/javascript/time_tables/components/ErrorModal.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import actions from '../actions'
 
 export default function ErrorModal({dispatch, modal, onModalClose}, {I18n}) {
diff --git a/app/javascript/time_tables/components/ExceptionsInDay.js b/app/javascript/time_tables/components/ExceptionsInDay.js
index 3335ee89d..f5ed625be 100644
--- a/app/javascript/time_tables/components/ExceptionsInDay.js
+++ b/app/javascript/time_tables/components/ExceptionsInDay.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class ExceptionsInDay extends Component {
diff --git a/app/javascript/time_tables/components/Metas.js b/app/javascript/time_tables/components/Metas.js
index 7098d2b82..4170ba493 100644
--- a/app/javascript/time_tables/components/Metas.js
+++ b/app/javascript/time_tables/components/Metas.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import actions from '../actions'
 import TagsSelect2 from './TagsSelect2'
 
diff --git a/app/javascript/time_tables/components/Navigate.js b/app/javascript/time_tables/components/Navigate.js
index 7307d819b..64f05cb41 100644
--- a/app/javascript/time_tables/components/Navigate.js
+++ b/app/javascript/time_tables/components/Navigate.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import map from 'lodash/map'
 import actions from '../actions'
 
diff --git a/app/javascript/time_tables/components/PeriodForm.js b/app/javascript/time_tables/components/PeriodForm.js
index d9f1d3437..085654a88 100644
--- a/app/javascript/time_tables/components/PeriodForm.js
+++ b/app/javascript/time_tables/components/PeriodForm.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import filter from 'lodash/filter'
 let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
 
diff --git a/app/javascript/time_tables/components/PeriodManager.js b/app/javascript/time_tables/components/PeriodManager.js
index 9922ce2c4..6b817fe73 100644
--- a/app/javascript/time_tables/components/PeriodManager.js
+++ b/app/javascript/time_tables/components/PeriodManager.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class PeriodManager extends Component {
diff --git a/app/javascript/time_tables/components/PeriodsInDay.js b/app/javascript/time_tables/components/PeriodsInDay.js
index 888537579..1aed5c969 100644
--- a/app/javascript/time_tables/components/PeriodsInDay.js
+++ b/app/javascript/time_tables/components/PeriodsInDay.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import PeriodManager from './PeriodManager'
 
 export default class PeriodsInDay extends Component {
diff --git a/app/javascript/time_tables/components/SaveTimetable.js b/app/javascript/time_tables/components/SaveTimetable.js
index d5a57bd1c..704590abd 100644
--- a/app/javascript/time_tables/components/SaveTimetable.js
+++ b/app/javascript/time_tables/components/SaveTimetable.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class SaveTimetable extends Component{
diff --git a/app/javascript/time_tables/components/TagsSelect2.js b/app/javascript/time_tables/components/TagsSelect2.js
index 70a748a04..dc3739d58 100644
--- a/app/javascript/time_tables/components/TagsSelect2.js
+++ b/app/javascript/time_tables/components/TagsSelect2.js
@@ -1,9 +1,10 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import mapKeys from 'lodash/mapKeys'
 import map from 'lodash/map'
 import filter from 'lodash/filter'
 import assign from 'lodash/assign'
-import Select2 from 'react-select2'
+import Select2 from 'react-select2-wrapper'
 
 // get JSON full path
 let origin = window.location.origin
diff --git a/app/javascript/time_tables/components/TimeTableDay.js b/app/javascript/time_tables/components/TimeTableDay.js
index 165c7b848..498e7d0cd 100644
--- a/app/javascript/time_tables/components/TimeTableDay.js
+++ b/app/javascript/time_tables/components/TimeTableDay.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class TimeTableDay extends Component {
   constructor(props) {
diff --git a/app/javascript/time_tables/components/Timetable.js b/app/javascript/time_tables/components/Timetable.js
index df6e6016b..c44f2a134 100644
--- a/app/javascript/time_tables/components/Timetable.js
+++ b/app/javascript/time_tables/components/Timetable.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 import TimeTableDay from './TimeTableDay'
 import PeriodsInDay from './PeriodsInDay'
diff --git a/app/javascript/time_tables/containers/App.js b/app/javascript/time_tables/containers/App.js
index 235dccb50..5963f8f1d 100644
--- a/app/javascript/time_tables/containers/App.js
+++ b/app/javascript/time_tables/containers/App.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from'react-redux'
 import actions from '../actions'
 import Metas from './Metas'
diff --git a/app/javascript/vehicle_journeys/components/App.js b/app/javascript/vehicle_journeys/components/App.js
index 8e5f7aa9d..44559c7c6 100644
--- a/app/javascript/vehicle_journeys/components/App.js
+++ b/app/javascript/vehicle_journeys/components/App.js
@@ -35,4 +35,4 @@ export default function App() {
       <ConfirmModal />
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/ConfirmModal.js b/app/javascript/vehicle_journeys/components/ConfirmModal.js
index df3c96c48..3bfc852fb 100644
--- a/app/javascript/vehicle_journeys/components/ConfirmModal.js
+++ b/app/javascript/vehicle_journeys/components/ConfirmModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, vehicleJourneys}) {
   return (
diff --git a/app/javascript/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index 3bc4f7ff7..b6c255c53 100644
--- a/app/javascript/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import MissionSelect2 from'./tools/select2s/MissionSelect2'
 import VJSelect2 from'./tools/select2s/VJSelect2'
 import TimetableSelect2 from'./tools/select2s/TimetableSelect2'
diff --git a/app/javascript/vehicle_journeys/components/Navigate.js b/app/javascript/vehicle_journeys/components/Navigate.js
index 7493b705b..0158b8392 100644
--- a/app/javascript/vehicle_journeys/components/Navigate.js
+++ b/app/javascript/vehicle_journeys/components/Navigate.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from'../actions'
 
 export default function Navigate({ dispatch, vehicleJourneys, pagination, status, filters}) {
diff --git a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
index 6dba5618c..c5161b917 100644
--- a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class SaveVehicleJourneys extends Component{
diff --git a/app/javascript/vehicle_journeys/components/ToggleArrivals.js b/app/javascript/vehicle_journeys/components/ToggleArrivals.js
index e26ceec3a..9e7089be5 100644
--- a/app/javascript/vehicle_journeys/components/ToggleArrivals.js
+++ b/app/javascript/vehicle_journeys/components/ToggleArrivals.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 
 export default function ToggleArrivals({filters, onToggleArrivals}) {
   return (
@@ -24,4 +26,4 @@ export default function ToggleArrivals({filters, onToggleArrivals}) {
 ToggleArrivals.propTypes = {
   filters : PropTypes.object.isRequired,
   onToggleArrivals: PropTypes.func.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/Tools.js b/app/javascript/vehicle_journeys/components/Tools.js
index d6e04f00e..ee02e5a68 100644
--- a/app/javascript/vehicle_journeys/components/Tools.js
+++ b/app/javascript/vehicle_journeys/components/Tools.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 import AddVehicleJourney from '../containers/tools/AddVehicleJourney'
 import DeleteVehicleJourneys from '../containers/tools/DeleteVehicleJourneys'
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index 8344a951a..d240757a3 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../actions'
 
 export default class VehicleJourney extends Component {
@@ -8,13 +9,7 @@ export default class VehicleJourney extends Component {
   }
 
   cityNameChecker(sp) {
-    let bool = false
-    if(sp.stop_area_cityname != this.previousCity){
-      bool = true
-      this.previousCity = sp.stop_area_cityname
-    }
-
-    return bool
+    return this.props.vehicleJourneys.showHeader(sp.stop_point_objectid)
   }
 
   hasFeature(key) {
@@ -171,5 +166,6 @@ VehicleJourney.propTypes = {
   filters: PropTypes.object.isRequired,
   index: PropTypes.number.isRequired,
   onUpdateTime: PropTypes.func.isRequired,
-  onSelectVehicleJourney: PropTypes.func.isRequired
+  onSelectVehicleJourney: PropTypes.func.isRequired,
+  vehicleJourneys: PropTypes.object.isRequired,
 }
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 0cac0344c..b188962c2 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -1,13 +1,19 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 import VehicleJourney from './VehicleJourney'
-
+import StopAreaHeaderManager from '../../helpers/stop_area_header_manager'
 
 export default class VehicleJourneys extends Component {
   constructor(props){
     super(props)
-    this.previousCity = undefined
+    this.headerManager = new StopAreaHeaderManager(
+      _.map(this.props.stopPointsList, (sp)=>{return sp.object_id}),
+      this.props.stopPointsList,
+      this.props.filters.features
+    )
   }
+
   componentDidMount() {
     this.props.onLoadFirstPage(this.props.filters)
   }
@@ -16,6 +22,10 @@ export default class VehicleJourneys extends Component {
     return this.props.filters.features[key]
   }
 
+  showHeader(object_id) {
+    return this.headerManager.showHeader(object_id)
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
@@ -59,25 +69,8 @@ export default class VehicleJourneys extends Component {
     }
   }
 
-  cityNameChecker(sp) {
-    let bool = false
-    if(sp.city_name != this.previousCity){
-      bool = true
-      this.previousCity = sp.city_name
-    }
-    return (
-      <div
-        className={(bool) ? 'headlined' : ''}
-        data-headline={(bool) ? sp.city_name : ''}
-        title={sp.city_name + ' (' + sp.zip_code +')'}
-      >
-        <span><span>{sp.name}</span></span>
-      </div>
-    )
-  }
-
   render() {
-    this.previousCity = undefined
+    this.previousBreakpoint = undefined
 
     if(this.props.status.isFetching == true) {
       return (
@@ -124,7 +117,7 @@ export default class VehicleJourneys extends Component {
                 {this.props.stopPointsList.map((sp, i) =>{
                   return (
                     <div key={i} className='td'>
-                      {this.cityNameChecker(sp)}
+                      {this.headerManager.stopPointHeader(sp.object_id)}
                     </div>
                   )
                 })}
@@ -142,6 +135,7 @@ export default class VehicleJourneys extends Component {
                       features={this.props.features}
                       onUpdateTime={this.props.onUpdateTime}
                       onSelectVehicleJourney={this.props.onSelectVehicleJourney}
+                      vehicleJourneys={this}
                       />
                   )}
                 </div>
diff --git a/app/javascript/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index cd593cdff..61012d199 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 import MissionSelect2 from './select2s/MissionSelect2'
 import CompanySelect2 from './select2s/CompanySelect2'
diff --git a/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
index fc13ae964..4815003d3 100644
--- a/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import actions from '../../actions'
 
 export default function DeleteVehicleJourneys({onDeleteVehicleJourneys, vehicleJourneys, disabled}) {
diff --git a/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
index 8083defb9..102a87d85 100644
--- a/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 import _ from 'lodash'
 
diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index cad04ed0e..36dbb98d5 100644
--- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 import CompanySelect2 from './select2s/CompanySelect2'
 
diff --git a/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index de97bc403..880542216 100644
--- a/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 import _ from 'lodash'
 
diff --git a/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js
index d61c7a34b..ce9a4cde9 100644
--- a/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 import TimetableSelect2 from './select2s/TimetableSelect2'
 
diff --git a/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
index a54e40502..6574bfa2d 100644
--- a/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 
 export default class ShiftVehicleJourney extends Component {
diff --git a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
index fdaa5aeed..e2fcd27d5 100644
--- a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import actions from '../../actions'
 import TimetableSelect2 from './select2s/TimetableSelect2'
 
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
index 79ba8f094..28a092945 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
-import React, { PropTypes, Component } from 'react'
-import Select2 from 'react-select2'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Select2 from 'react-select2-wrapper'
 import actions from '../../../actions'
 
 // get JSON full path
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
index fa847886c..2a06df77e 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
-import React, { PropTypes, Component } from 'react'
-import Select2 from 'react-select2'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Select2 from 'react-select2-wrapper'
 import actions from '../../../actions'
 
 // get JSON full path
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
index eb8651be2..0339455ca 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
-import React, { PropTypes, Component } from 'react'
-import Select2 from 'react-select2'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Select2 from 'react-select2-wrapper'
 import actions from '../../../actions'
 
 // get JSON full path
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
index b063abeca..ccb4c9595 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
-import React, { PropTypes, Component } from 'react'
-import Select2 from 'react-select2'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Select2 from 'react-select2-wrapper'
 import actions from '../../../actions'
 
 // get JSON full path