Refs #5437 @1h; Refactor code

4 files changed, 65 insertions, 60 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/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index 47fb6882d..2ae9f5552 100644
--- a/app/javascript/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -32,8 +32,8 @@ export default class JourneyPattern extends Component{
     return this.props.status.features[key]
   }
 
-  cityNameChecker(sp) {
-    return this.props.journeyPatterns.showHeader(sp.object_id)
+  cityNameChecker(sp, i) {
+    return this.props.journeyPatterns.showHeader(sp.object_id + "-" + i)
   }
 
   spNode(sp, headlined){
@@ -149,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' : '')}>
diff --git a/app/javascript/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js
index c261b408a..31727fefc 100644
--- a/app/javascript/journey_patterns/components/JourneyPatterns.js
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -2,12 +2,16 @@ 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.stopPointsIds = _.map(this.props.stopPointsList, (sp)=>{return sp.stop_area_object_id})
+    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() {
@@ -58,30 +62,7 @@ export default class JourneyPatterns extends Component {
   }
 
   showHeader(object_id) {
-    let showHeadline = false
-    let headline = ""
-    let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name"
-    let index = this.stopPointsIds.indexOf(object_id)
-    let sp = this.props.stopPointsList[index]
-    let previousBreakpoint = this.props.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 : ""
-  }
-
-  stopPointHeader(sp) {
-    let showHeadline = this.showHeader(sp.stop_area_object_id)
-    return (
-      <div
-        className={(showHeadline) ? 'headlined' : ''}
-        data-headline={showHeadline}
-        title={sp.city_name + ' (' + sp.zip_code +')'}
-      >
-        <span><span>{sp.name}</span></span>
-      </div>
-    )
+    return this.headerManager.showHeader(object_id)
   }
 
   hasFeature(key) {
@@ -133,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.stopPointHeader(sp)}
+                      {this.headerManager.stopPointHeader(sp.stop_area_object_id + "-" + i)}
                     </div>
                   )
                 })}
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 3f5a51093..b188962c2 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -2,13 +2,18 @@ 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.stopPointsIds = _.map(this.props.stopPointsList, (sp)=>{return sp.object_id})
+    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)
   }
@@ -17,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() {
@@ -60,33 +69,6 @@ export default class VehicleJourneys extends Component {
     }
   }
 
-  showHeader(object_id) {
-    let showHeadline = false
-    let headline = ""
-    let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name"
-    let index = this.stopPointsIds.indexOf(object_id)
-    let sp = this.props.stopPointsList[index]
-    let previousBreakpoint = this.props.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 : ""
-  }
-
-  stopPointHeader(sp) {
-    let showHeadline = this.showHeader(sp.object_id)
-    return (
-      <div
-        className={(showHeadline) ? 'headlined' : ''}
-        data-headline={showHeadline}
-        title={sp.city_name + ' (' + sp.zip_code +')'}
-      >
-        <span><span>{sp.name}</span></span>
-      </div>
-    )
-  }
-
   render() {
     this.previousBreakpoint = undefined
 
@@ -135,7 +117,7 @@ export default class VehicleJourneys extends Component {
                 {this.props.stopPointsList.map((sp, i) =>{
                   return (
                     <div key={i} className='td'>
-                      {this.stopPointHeader(sp)}
+                      {this.headerManager.stopPointHeader(sp.object_id)}
                     </div>
                   )
                 })}