Merge pull request #104 from opentripplanner/react16

React 16

__tests__/test-utils/mock-data/store.js

@@ -1,6 +1,6 @@
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import Enzyme, {mount} from 'enzyme'
-import EnzymeReactAdapter from 'enzyme-adapter-react-15.4'
+import EnzymeReactAdapter from 'enzyme-adapter-react-16'
 import {mountToJson} from 'enzyme-to-json'
 import { createHashHistory } from 'history'
 import clone from 'lodash/cloneDeep'

lib/actions/api.js

@@ -455,13 +455,13 @@ export const findGeometryForTripResponse = createAction('FIND_GEOMETRY_FOR_TRIP_
 export const findGeometryForTripError = createAction('FIND_GEOMETRY_FOR_TRIP_ERROR')
 
 export function findGeometryForTrip (params) {
-  return createQueryAction(`index/trips/${params.tripId}/geometry`,
-    findGeometryForTripResponse, findGeometryForTripError,
-    (payload) => {
-      return {
-        tripId: params.tripId,
-        geometry: payload
-      }
+  const { tripId } = params
+  return createQueryAction(
+    `index/trips/${tripId}/geometry`,
+    findGeometryForTripResponse,
+    findGeometryForTripError,
+    {
+      rewritePayload: (payload) => ({ tripId, geometry: payload })
     }
   )
 }

lib/actions/config.js

@@ -6,3 +6,4 @@ export const setAutoPlan = createAction('SET_AUTOPLAN')
 export const setMapCenter = createAction('SET_MAP_CENTER')
 export const setMapZoom = createAction('SET_MAP_ZOOM')
 export const setRouterId = createAction('SET_ROUTER_ID')
+export const updateOverlayVisibility = createAction('UPDATE_OVERLAY_VISIBILITY')

lib/components/app/print-layout.js

@@ -35,21 +35,16 @@ class PrintLayout extends Component {
 
   componentDidMount () {
     const { location } = this.props
+    // Add print-view class to html tag to ensure that iOS scroll fix only applies
+    // to non-print views.
+    const root = document.getElementsByTagName('html')[0]
+    root.setAttribute('class', 'print-view')
     // Parse the URL query parameters, if present
     if (location && location.search) {
       this.props.parseUrlQueryString()
     }
   }
 
-  /**
-   * Add print-view class to html tag to ensure that iOS scroll fix only applies
-   * to non-print views.
-   */
-  componentWillMount () {
-    const root = document.getElementsByTagName('html')[0]
-    root.setAttribute('class', 'print-view')
-  }
-
   /**
    * Remove class attribute from html tag on clean up.
    */

lib/components/app/responsive-webapp.js

@@ -197,7 +197,7 @@ class RouterWrapper extends Component {
                 // combine the router props with the other props that get
                 // passed to the exported component. This way it's possible for
                 // the PrintLayout component to receive the custom icons prop.
-                const props = {...this.props, ...routerProps}
+                const props = { ...this.props, ...routerProps }
                 return <PrintLayout {...props} />
               }}
             />
@@ -211,7 +211,5 @@ class RouterWrapper extends Component {
     )
   }
 }
-
-export default connect((state, ownProps) => {
-  return { routerConfig: state.otp.config.reactRouter }
-})(RouterWrapper)
+const mapStateToWrapperProps = (state, ownProps) => ({ routerConfig: state.otp.config.reactRouter })
+export default connect(mapStateToWrapperProps)(RouterWrapper)

lib/components/form/checkbox-selector.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import { Form, FormGroup, Row, Col, Checkbox } from 'react-bootstrap'
 import { connect } from 'react-redux'
 

lib/components/form/date-time-modal.js

@@ -1,5 +1,6 @@
 // import necessary React/Redux libraries
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Button, ButtonGroup } from 'react-bootstrap'
 

lib/components/form/date-time-preview.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import moment from 'moment'
 import { connect } from 'react-redux'
 import { Button } from 'react-bootstrap'

lib/components/form/date-time-selector.js

@@ -1,5 +1,6 @@
 // import moment from 'moment'
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import { Form, FormGroup, FormControl, Row, Col, Button } from 'react-bootstrap'
 // import { SingleDatePicker } from 'react-dates'
 import { connect } from 'react-redux'
@@ -13,6 +14,12 @@ import {
   getDateFormat
 } from '../../util/time'
 
+function checkInput (type) {
+  var input = document.createElement('input')
+  input.setAttribute('type', type)
+  return input.type === type
+}
+
 class DateTimeSelector extends Component {
   static propTypes = {
     date: PropTypes.string,
@@ -33,6 +40,8 @@ class DateTimeSelector extends Component {
     this.state = {
       dateFocused: false
     }
+    this._supportsDateTimeInputs = checkInput('date') && checkInput('time')
+    console.log(`supports date time: ${this._supportsDateTimeInputs}`)
   }
 
   _onDateChange = (evt) => {
@@ -80,15 +89,6 @@ class DateTimeSelector extends Component {
     }
   }
 
-  componentWillMount () {
-    const checkInput = (type) => {
-      var input = document.createElement('input')
-      input.setAttribute('type', type)
-      return input.type === type
-    }
-    this._supportsDateTimeInputs = checkInput('date') && checkInput('time')
-  }
-
   render () {
     const { departArrive, date, time, timeFormat, dateFormat } = this.props
 

lib/components/form/dropdown-selector.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import { Form, FormGroup, FormControl, Row, Col } from 'react-bootstrap'
 import { connect } from 'react-redux'
 

lib/components/form/error-message.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import TripTools from '../narrative/trip-tools'
 

lib/components/form/general-settings-panel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import CheckboxSelector from './checkbox-selector'

lib/components/form/location-field.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import {
   Button,
@@ -62,10 +63,15 @@ class LocationField extends Component {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (this.props.location !== nextProps.location) {
+  componentDidUpdate (prevProps) {
+    // If location is updated externally, replace value and geocoded features
+    // in internal state.
+    // TODO: This might be considered an anti-pattern. There may be a more
+    // effective way to handle this.
+    const { location } = this.props
+    if (location !== prevProps.location) {
       this.setState({
-        value: nextProps.location !== null ? nextProps.location.name : '',
+        value: location !== null ? location.name : '',
         geocodedFeatures: []
       })
     }

lib/components/form/mode-button.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component, PureComponent} from 'react'
+import React, {Component, PureComponent} from 'react'
+import PropTypes from 'prop-types'
 
 import { getIcon, isTransit } from '../../util/itinerary'
 

lib/components/form/mode-selector.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { FormGroup, ControlLabel, FormControl } from 'react-bootstrap'
 import { connect } from 'react-redux'
 

lib/components/form/modes-panel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import { setQueryParam } from '../../actions/form'

lib/components/form/plan-trip-button.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 

lib/components/form/settings-preview.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 

lib/components/form/settings-selector-panel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Row, Col, Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
@@ -283,7 +284,7 @@ class SettingsSelectorPanel extends Component {
       switch (exclusiveMode) {
         case 'WALK':
           children.push(
-            <Col xs={4}>
+            <Col key={key++} xs={4}>
               <ModeButton
                 enabled
                 key={key++}
@@ -300,7 +301,7 @@ class SettingsSelectorPanel extends Component {
           break
         case 'BICYCLE':
           children.push(
-            <Col xs={4}>
+            <Col key={key++} xs={4}>
               <ModeButton
                 enabled
                 key={key++}
@@ -317,7 +318,7 @@ class SettingsSelectorPanel extends Component {
           break
         case 'MICROMOBILITY':
           children.push(
-            <Col xs={4}>
+            <Col key={key++} xs={4}>
               <ModeButton
                 enabled
                 key={key++}

lib/components/form/switch-button.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 

lib/components/icons/location-icon.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class LocationIcon extends Component {
   static propTypes = {

lib/components/icons/mode-icon.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class ModeIcon extends Component {
   static propTypes = {