fix(marker): Fix marker mover bug

src/components/application.js

@@ -1,6 +1,7 @@
 // @flow
 import lonlat from '@conveyal/lonlat'
 import isEqual from 'lodash/isEqual'
+import memoize from 'lodash/memoize'
 import React, {Component} from 'react'
 
 import Form from './form'
@@ -24,13 +25,15 @@ import type {
 } from '../types'
 
 type Props = {
+  accessibilityKeys: string[],
   actionLog: LogItems,
   browsochrones: BrowsochronesStore,
   destinations: Accessibility[],
   geocoder: GeocoderStore,
   mapMarkers: any,
   map: any,
   pointsOfInterest: PointsOfInterest,
+  showComparison: boolean,
   timeCutoff: any,
   ui: UIStore,
 
@@ -133,7 +136,7 @@ export default class Application extends Component<void, Props, State> {
   }
 
   _setStartWithEvent = (event: MapEvent) => {
-    this._setStart({latlng: event.latlng || event.currentTarget._latlng})
+    this._setStart({latlng: event.latlng || event.target._latlng})
   }
 
   _setStartWithFeature = (feature: PointFeature) => {
@@ -167,7 +170,7 @@ export default class Application extends Component<void, Props, State> {
   }
 
   _setEndWithEvent = (event: MapEvent) => {
-    this._setEnd({latlng: event.latlng || event.currentTarget._latlng})
+    this._setEnd({latlng: event.latlng || event.target._latlng})
   }
 
   _setEndWithFeature = (feature: PointFeature) => {
@@ -193,16 +196,20 @@ export default class Application extends Component<void, Props, State> {
     })
   }
 
+  _setActiveBrowsochronesInstance = memoize((index) => () =>
+    this.props.setActiveBrowsochronesInstance(index))
+
   count = 0
   render () {
     const {
+      accessibilityKeys,
       actionLog,
       browsochrones,
       destinations,
       geocoder,
       map,
       pointsOfInterest,
-      setActiveBrowsochronesInstance,
+      showComparison,
       timeCutoff,
       ui
     } = this.props
@@ -247,12 +254,14 @@ export default class Application extends Component<void, Props, State> {
             {destinations.map((accessibility, index) => (
               <RouteCard
                 accessibility={accessibility.accessibility}
+                accessibilityKeys={accessibilityKeys}
                 active={browsochrones.active === index}
                 alternate={index !== 0}
                 key={`${index}-route-card`}
                 oldAccessibility={destinations[0].accessibility}
                 oldTravelTime={map.travelTimes[0]}
-                onClick={() => setActiveBrowsochronesInstance(index)}
+                onClick={this._setActiveBrowsochronesInstance(index)}
+                showComparison={showComparison}
                 transitiveData={map.transitives[index]}
                 travelTime={map.travelTimes[index]}
                 waitTime={map.waitTimes[index]}

src/components/map.js

@@ -58,42 +58,42 @@ export default class Map extends PureComponent<void, Props, State> {
     lastClickedLatlng: null
   }
 
-  _clearState () {
+  _clearState (): void {
     this.setState({
       showSelectStartOrEnd: false,
       lastClickedLabel: null,
       lastClickedLatlng: null
     })
   }
 
-  _clearStartAndEnd = () => {
+  _clearStartAndEnd = (): void => {
     const {clearStartAndEnd} = this.props
     clearStartAndEnd()
     this._clearState()
   }
 
-  _onMapClick = (e: MapEvent) => {
+  _onMapClick = (e: MapEvent): void => {
     this.setState({
       showSelectStartOrEnd: !this.state.showSelectStartOrEnd,
       lastClickedLatlng: e.latlng
     })
   }
 
-  _setEnd = () => {
+  _setEnd = (): void => {
     const {setEnd} = this.props
     const {lastClickedLatlng} = this.state
     setEnd({latlng: lastClickedLatlng})
     this._clearState()
   }
 
-  _setStart = () => {
+  _setStart = (): void => {
     const {setStart} = this.props
     const {lastClickedLatlng} = this.state
     setStart({latlng: lastClickedLatlng})
     this._clearState()
   }
 
-  _clickPoi = (event: Event & {layer: {feature: Feature}}) => {
+  _clickPoi = (event: Event & {layer: {feature: Feature}}): void => {
     if (!event.layer || !event.layer.feature) {
       return this._clearState()
     }
@@ -107,7 +107,7 @@ export default class Map extends PureComponent<void, Props, State> {
     })
   }
 
-  render () {
+  render (): React$Element<LeafletMap> {
     const {
       centerCoordinates,
       geojson,

src/components/route-card.js

@@ -13,10 +13,12 @@ type Props = {
   active: boolean,
   alternate: boolean,
   accessibility: any,
+  accessibilityKeys: string[],
   children?: any,
   oldAccessibility: any,
   oldTravelTime: number,
   onClick(): void,
+  showComparison: boolean,
   transitiveData: any,
   travelTime: number,
   waitTime: number
@@ -27,10 +29,12 @@ export default (props: Props) => {
     active,
     alternate,
     accessibility,
+    accessibilityKeys,
     children,
     oldAccessibility,
     oldTravelTime,
     onClick,
+    showComparison,
     transitiveData,
     travelTime,
     waitTime
@@ -39,8 +43,6 @@ export default (props: Props) => {
     'Card' +
     (alternate ? ' Card-alternate' : '') +
     (active ? ' Card-active' : '')
-  const accessibilityKeys = Object.keys(accessibility)
-  const comparisonAccessibilityKeys = Object.keys(oldAccessibility || {})
 
   return (
     <div className={className}>
@@ -57,13 +59,13 @@ export default (props: Props) => {
         </span>
       </a>
       <div className='CardContent'>
-        {comparisonAccessibilityKeys.length > 0
-          ? <ShowAccess keys={accessibilityKeys} base={accessibility} />
-          : <ShowDiff
+        {showComparison
+          ? <ShowDiff
             keys={accessibilityKeys}
             base={accessibility}
             comparison={oldAccessibility}
-            />}
+            />
+          : <ShowAccess keys={accessibilityKeys} base={accessibility} />}
         {accessibility !== ACCESSIBILITY_IS_EMPTY &&
           accessibility !== ACCESSIBILITY_IS_LOADING &&
           <Journeys
@@ -233,7 +235,12 @@ function MetricIcon ({name}) {
   return <span />
 }
 
-function ShowAccess ({keys, base}) {
+function ShowAccess ({keys, base}: {
+  keys: string[],
+  base: {
+    [name: string]: number
+  }
+}) {
   return (
     <div className='CardAccess'>
       <div className='heading'>{messages.Systems.AccessTitle}</div>

src/containers/application.js

@@ -4,12 +4,16 @@ import {connect} from 'react-redux'
 import * as actions from '../actions'
 import initializeBrowsochrones from '../actions/browsochrones'
 import Application from '../components/application'
+import selectAccessibilityKeys from '../selectors/accessibility-keys'
 import selectPointsOfInterest from '../selectors/points-of-interest'
+import selectShowComparison from '../selectors/show-comparison'
 
 function mapStateToProps (state, ownProps) {
   return {
     ...state,
-    pointsOfInterest: selectPointsOfInterest(state, ownProps)
+    accessibilityKeys: selectAccessibilityKeys(state, ownProps),
+    pointsOfInterest: selectPointsOfInterest(state, ownProps),
+    showComparison: selectShowComparison(state, ownProps)
   }
 }
 

src/selectors/accessibility-keys.js

@@ -0,0 +1,6 @@
+import {createSelector} from 'reselect'
+
+export default createSelector(
+  (state) => state.destinations[0],
+  (accessibility = {}) => Object.keys(accessibility.accessibility || {})
+)

src/selectors/show-comparison.js

@@ -0,0 +1,6 @@
+import {createSelector} from 'reselect'
+
+export default createSelector(
+  (state) => state.destinations[0],
+  (accessibility = {}) => Object.keys(accessibility).length > 0
+)

src/types.js

@@ -127,7 +127,7 @@ export type InputEvent = Event & {
 
 export type MapEvent = {
   latlng?: Coordinate,
-  currentTarget: {
+  target: {
     _latlng: Coordinate
   }
 }