Merge pull request #318 from opentripplanner/dev

Feature release

Author: landonreed

__tests__/components/viewers/__snapshots__/stop-viewer.js.snap

@@ -1,6 +1,7 @@
 .otp .navbar {
   border-radius: 0;
   background-color: #444;
+  margin: 0px;
 }
 
 .otp .navbar .container {

example.css

@@ -1,6 +1,14 @@
+import clone from 'clone'
+import moment from 'moment'
+import { planParamsToQuery } from '@opentripplanner/core-utils/lib/query'
+import { OTP_API_DATE_FORMAT } from '@opentripplanner/core-utils/lib/time'
+import qs from 'qs'
 import { createAction } from 'redux-actions'
 
+import { routingQuery } from './api'
+import { setQueryParam } from './form'
 import { routeTo } from './ui'
+import { TRIPS_PATH } from '../util/constants'
 import { secureFetch } from '../util/middleware'
 import { isNewUser } from '../util/user'
 
@@ -9,6 +17,7 @@ const API_MONITORED_TRIP_PATH = '/api/secure/monitoredtrip'
 const API_OTPUSER_PATH = '/api/secure/user'
 const API_OTPUSER_VERIFY_SMS_SUBPATH = '/verify_sms'
 
+const setAccessToken = createAction('SET_ACCESS_TOKEN')
 const setCurrentUser = createAction('SET_CURRENT_USER')
 const setCurrentUserMonitoredTrips = createAction('SET_CURRENT_USER_MONITORED_TRIPS')
 const setLastPhoneSmsRequest = createAction('SET_LAST_PHONE_SMS_REQUEST')
@@ -60,14 +69,30 @@ export function fetchAuth0Token (auth0) {
     try {
       const accessToken = await auth0.getAccessTokenSilently()
 
-      dispatch(setCurrentUser({ accessToken }))
+      dispatch(setAccessToken(accessToken))
     } catch (error) {
       // TODO: improve UI if there is an error.
       alert('Error obtaining an authorization token.')
     }
   }
 }
 
+/**
+ * Updates the redux state with the provided user data,
+ * and also fetches monitored trips if requested, i.e. when
+ * - initializing the user state with an existing persisted user, or
+ * - POST-ing a user for the first time.
+ */
+function setUser (user, fetchTrips) {
+  return function (dispatch, getState) {
+    dispatch(setCurrentUser(user))
+
+    if (fetchTrips) {
+      dispatch(fetchMonitoredTrips())
+    }
+  }
+}
+
 /**
  * Attempts to fetch user preferences (or set initial values if the user is being created)
  * into the redux state, under state.user.
@@ -103,12 +128,9 @@ export function fetchOrInitializeUser (auth0User) {
 
     const isNewAccount = status === 'error' || (user && user.result === 'ERR')
     const userData = isNewAccount ? createNewUser(auth0User) : user
-    dispatch(setCurrentUser({ accessToken, user: userData }))
 
-    // Also load monitored trips for existing users.
-    if (!isNewAccount) {
-      dispatch(fetchUserMonitoredTrips())
-    }
+    // Set uset in redux state. (Fetch trips for existing users.)
+    dispatch(setUser(userData, !isNewAccount))
   }
 }
 
@@ -125,7 +147,8 @@ export function createOrUpdateUser (userData, silentOnSuccess = false) {
     let requestUrl, method
 
     // Determine URL and method to use.
-    if (isNewUser(loggedInUser)) {
+    const isCreatingUser = isNewUser(loggedInUser)
+    if (isCreatingUser) {
       requestUrl = `${apiBaseUrl}${API_OTPUSER_PATH}`
       method = 'POST'
     } else {
@@ -144,8 +167,8 @@ export function createOrUpdateUser (userData, silentOnSuccess = false) {
       }
 
       // Update application state with the user entry as saved
-      // (as returned) by the middleware.
-      dispatch(setCurrentUser({ accessToken, user: data }))
+      // (as returned) by the middleware. (Fetch trips if creating user.)
+      dispatch(setUser(data, isCreatingUser))
     } else {
       alert(`An error was encountered:\n${JSON.stringify(message)}`)
     }
@@ -175,7 +198,7 @@ export function resendVerificationEmail () {
  * We use the accessToken to fetch the data regardless of
  * whether the process to populate state.user is completed or not.
  */
-export function fetchUserMonitoredTrips () {
+export function fetchMonitoredTrips () {
   return async function (dispatch, getState) {
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(getState())
     const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}`
@@ -192,7 +215,12 @@ export function fetchUserMonitoredTrips () {
  * then, if that was successful, alerts (optional)
  * and refreshes the redux monitoredTrips with the updated trip.
  */
-export function createOrUpdateUserMonitoredTrip (tripData, isNew, silentOnSuccess) {
+export function createOrUpdateUserMonitoredTrip (
+  tripData,
+  isNew,
+  silentOnSuccess,
+  noRedirect
+) {
   return async function (dispatch, getState) {
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(getState())
     const { id } = tripData
@@ -218,29 +246,58 @@ export function createOrUpdateUserMonitoredTrip (tripData, isNew, silentOnSucces
       }
 
       // Reload user's monitored trips after add/update.
-      await dispatch(fetchUserMonitoredTrips())
+      await dispatch(fetchMonitoredTrips())
+
+      if (noRedirect) return
 
       // Finally, navigate to the saved trips page.
-      dispatch(routeTo('/savedtrips'))
+      dispatch(routeTo(TRIPS_PATH))
     } else {
       alert(`An error was encountered:\n${JSON.stringify(message)}`)
     }
   }
 }
 
+/**
+ * Toggles the isActive status of a monitored trip
+ */
+export function togglePauseTrip (trip) {
+  return function (dispatch, getState) {
+    const clonedTrip = clone(trip)
+    clonedTrip.isActive = !clonedTrip.isActive
+
+    // Silent update of existing trip.
+    dispatch(createOrUpdateUserMonitoredTrip(clonedTrip, false, true, true))
+  }
+}
+
+/**
+ * Toggles the snoozed status of a monitored trip
+ */
+export function toggleSnoozeTrip (trip) {
+  return function (dispatch, getState) {
+    const newTrip = clone(trip)
+    newTrip.snoozed = !newTrip.snoozed
+
+    // Silent update of existing trip.
+    dispatch(createOrUpdateUserMonitoredTrip(newTrip, false, true, true))
+  }
+}
+
 /**
  * Deletes a logged-in user's monitored trip,
  * then, if that was successful, refreshes the redux monitoredTrips state.
  */
-export function deleteUserMonitoredTrip (tripId) {
+export function confirmAndDeleteUserMonitoredTrip (tripId) {
   return async function (dispatch, getState) {
+    if (!confirm('Would you like to remove this trip?')) return
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(getState())
     const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}/${tripId}`
 
     const { message, status } = await secureFetch(requestUrl, accessToken, apiKey, 'DELETE')
     if (status === 'success') {
       // Reload user's monitored trips after deletion.
-      dispatch(fetchUserMonitoredTrips())
+      dispatch(fetchMonitoredTrips())
     } else {
       alert(`An error was encountered:\n${JSON.stringify(message)}`)
     }
@@ -334,3 +391,29 @@ export function checkItineraryExistence (trip) {
     }
   }
 }
+
+/**
+ * Plans a new trip for the current date given the query parameters in the given
+ * monitored trip
+ */
+export function planNewTripFromMonitoredTrip (monitoredTrip) {
+  return function (dispatch, getState) {
+    // update query params in store
+    const newQuery = planParamsToQuery(qs.parse(monitoredTrip.queryParams))
+    newQuery.date = moment().format(OTP_API_DATE_FORMAT)
+
+    dispatch(setQueryParam(newQuery))
+
+    dispatch(routeTo('/'))
+
+    // This prevents some kind of race condition whose origin I can't figure
+    // out. Unless this is called after redux catches up with routing to the '/'
+    // path, then the old path will be used and the screen won't change.
+    // Therefore, this timeout occurs so that the view of the homepage has time
+    // to render itself.
+    // FIXME: remove hack
+    setTimeout(() => {
+      dispatch(routingQuery())
+    }, 300)
+  }
+}

lib/actions/user.js

@@ -373,7 +373,7 @@ class CallTakerAdvancedOptions extends Component {
 
   static contextType = ComponentContext
 
-  componentWillMount () {
+  componentDidMount () {
     // Fetch routes for banned/preferred routes selectors.
     this.props.findRoutes()
   }

lib/components/app/call-taker-panel.js

@@ -6,7 +6,7 @@ import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { Route, Switch, withRouter } from 'react-router'
+import { Redirect, Route, Switch, withRouter } from 'react-router'
 
 import PrintLayout from './print-layout'
 import * as authActions from '../../actions/auth'
@@ -17,13 +17,21 @@ import * as locationActions from '../../actions/location'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import { getAuth0Config } from '../../util/auth'
-import { AUTH0_AUDIENCE, AUTH0_SCOPE, URL_ROOT } from '../../util/constants'
+import {
+  ACCOUNT_PATH,
+  AUTH0_AUDIENCE,
+  AUTH0_SCOPE,
+  ACCOUNT_SETTINGS_PATH,
+  CREATE_ACCOUNT_PATH,
+  TRIPS_PATH,
+  URL_ROOT
+} from '../../util/constants'
 import { ComponentContext } from '../../util/contexts'
 import { getActiveItinerary, getTitle } from '../../util/state'
 import AfterSignInScreen from '../user/after-signin-screen'
 import BeforeSignInScreen from '../user/before-signin-screen'
-import SavedTripList from '../user/saved-trip-list'
-import SavedTripScreen from '../user/saved-trip-screen'
+import SavedTripList from '../user/monitored-trip/saved-trip-list'
+import SavedTripScreen from '../user/monitored-trip/saved-trip-screen'
 import UserAccountScreen from '../user/user-account-screen'
 import withLoggedInUserSupport from '../user/with-logged-in-user-support'
 
@@ -137,12 +145,8 @@ class ResponsiveWebapp extends Component {
   }
 
   render () {
-    const { components, desktopView, mobileView } = this.props
-    return (
-      <ComponentContext.Provider value={components}>
-        {isMobile() ? mobileView : desktopView}
-      </ComponentContext.Provider>
-    )
+    const { desktopView, mobileView } = this.props
+    return isMobile() ? mobileView : desktopView
   }
 }
 
@@ -191,30 +195,21 @@ const WebappWithRouter = withRouter(
  * so that Auth0 services are available everywhere.
  */
 class RouterWrapperWithAuth0 extends Component {
-  /**
-   * Combine the router props with the other props that get
-   * passed to the exported component. This way, it is possible for
-   * the PrintLayout, UserAccountScreen, and other components to
-   * receive the LegIcon or other needed props.
-   */
-  _combineProps = routerProps => {
-    return { ...this.props, ...routerProps }
-  }
-
   render () {
     const {
       auth0Config,
+      components,
       processSignIn,
       routerConfig,
       showAccessTokenError,
       showLoginError
     } = this.props
 
     const router = (
-      <ConnectedRouter
-        basename={routerConfig && routerConfig.basename}
-        history={history}>
-        <div>
+      <ComponentContext.Provider value={components}>
+        <ConnectedRouter
+          basename={routerConfig && routerConfig.basename}
+          history={history}>
           <Switch>
             <Route
               exact
@@ -237,56 +232,40 @@ class RouterWrapperWithAuth0 extends Component {
               render={() => <WebappWithRouter {...this.props} />}
             />
             <Route
-              // This route lets new or existing users edit or set up their account.
-              path={'/account'}
-              component={routerProps => {
-                const props = this._combineProps(routerProps)
-                return <UserAccountScreen {...props} />
-              }}
-            />
-            <Route
-              path={'/savetrip'}
-              component={(routerProps) => {
-                const props = this._combineProps(routerProps)
-                return <SavedTripScreen isCreating {...props} />
-              }}
+              component={SavedTripScreen}
+              path={`${TRIPS_PATH}/:id`}
             />
+            <Route exact path={ACCOUNT_PATH}>
+              <Redirect to={TRIPS_PATH} />
+            </Route>
             <Route
-              path={'/savedtrips/:id'}
-              component={(routerProps) => {
-                const props = this._combineProps(routerProps)
-                return <SavedTripScreen {...props} />
-              }}
+              // This route lets new or existing users edit or set up their account.
+              component={UserAccountScreen}
+              path={[CREATE_ACCOUNT_PATH, ACCOUNT_SETTINGS_PATH]}
             />
             <Route
-              path={'/savedtrips'}
               component={SavedTripList}
+              path={TRIPS_PATH}
             />
             <Route
               // This route is called immediately after login by Auth0
               // and by the onRedirectCallback function from /lib/util/auth.js.
               // For new users, it displays the account setup form.
               // For existing users, it takes the browser back to the itinerary search prior to login.
-              path={'/signedin'}
-              component={routerProps => {
-                const props = this._combineProps(routerProps)
-                return <AfterSignInScreen {...props} />
-              }}
+              component={AfterSignInScreen}
+              path='/signedin'
             />
             <Route
+              component={PrintLayout}
               path='/print'
-              component={routerProps => {
-                const props = this._combineProps(routerProps)
-                return <PrintLayout {...props} />
-              }}
             />
             {/* For any other route, simply return the web app. */}
             <Route
               render={() => <WebappWithRouter {...this.props} />}
             />
           </Switch>
-        </div>
-      </ConnectedRouter>
+        </ConnectedRouter>
+      </ComponentContext.Provider>
     )
 
     return (

lib/components/app/responsive-webapp.js

@@ -19,7 +19,7 @@ class DateTimePreview extends Component {
     date: PropTypes.string,
     departArrive: PropTypes.string,
     editButtonText: PropTypes.element,
-    hideButton: PropTypes.boolean,
+    hideButton: PropTypes.bool,
     onClick: PropTypes.func,
     routingType: PropTypes.string,
     time: PropTypes.string