Improve save user locations

lib/actions/user.js

@@ -10,7 +10,8 @@ import { setQueryParam } from './form'
 import { routeTo } from './ui'
 import { TRIPS_PATH } from '../util/constants'
 import { secureFetch } from '../util/middleware'
-import { isNewUser } from '../util/user'
+import { isBlank } from '../util/ui'
+import { isNewUser, positionHomeAndWorkFirst } from '../util/user'
 
 // Middleware API paths.
 const API_MONITORED_TRIP_PATH = '/api/secure/monitoredtrip'
@@ -78,13 +79,18 @@ export function fetchAuth0Token (auth0) {
 }
 
 /**
- * Updates the redux state with the provided user data,
- * and also fetches monitored trips if requested, i.e. when
+ * Updates the redux state with the provided user data, including
+ * placing the Home and Work locations at the beginning of the list
+ * of saved places for rendering in several UI components.
+ *
+ * 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) {
+    positionHomeAndWorkFirst(user)
+
     dispatch(setCurrentUser(user))
 
     if (fetchTrips) {
@@ -129,7 +135,8 @@ export function fetchOrInitializeUser (auth0User) {
     const isNewAccount = status === 'error' || (user && user.result === 'ERR')
     const userData = isNewAccount ? createNewUser(auth0User) : user
 
-    // Set uset in redux state. (Fetch trips for existing users.)
+    // Set user in redux state.
+    // (This sorts saved places, and, for existing users, fetches trips.)
     dispatch(setUser(userData, !isNewAccount))
   }
 }
@@ -146,6 +153,11 @@ export function createOrUpdateUser (userData, silentOnSuccess = false) {
     const { id } = userData // Middleware ID, NOT auth0 (or similar) id.
     let requestUrl, method
 
+    // Before persisting, filter out entries from userData.savedLocations with blank addresses.
+    userData.savedLocations = userData.savedLocations.filter(
+      ({ address }) => !isBlank(address)
+    )
+
     // Determine URL and method to use.
     const isCreatingUser = isNewUser(loggedInUser)
     if (isCreatingUser) {
@@ -156,19 +168,20 @@ export function createOrUpdateUser (userData, silentOnSuccess = false) {
       method = 'PUT'
     }
 
-    const { data, message, status } = await secureFetch(requestUrl, accessToken, apiKey, method, {
+    const { data: returnedUser, message, status } = await secureFetch(requestUrl, accessToken, apiKey, method, {
       body: JSON.stringify(userData)
     })
 
     // TODO: improve the UI feedback messages for this.
-    if (status === 'success' && data) {
+    if (status === 'success' && returnedUser) {
       if (!silentOnSuccess) {
         alert('Your preferences have been saved.')
       }
 
       // Update application state with the user entry as saved
-      // (as returned) by the middleware. (Fetch trips if creating user.)
-      dispatch(setUser(data, isCreatingUser))
+      // (as returned) by the middleware.
+      // (This sorts saved places, and, for existing users, fetches trips.)
+      dispatch(setUser(returnedUser, isCreatingUser))
     } else {
       alert(`An error was encountered:\n${JSON.stringify(message)}`)
     }
@@ -291,6 +304,7 @@ export function toggleSnoozeTrip (trip) {
 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}`
 
@@ -417,3 +431,35 @@ export function planNewTripFromMonitoredTrip (monitoredTrip) {
     }, 300)
   }
 }
+
+/**
+ * Saves the given place data at the specified index for the logged-in user.
+ * Note: places with blank addresses will not appear in persistence.
+ */
+export function saveUserPlace (placeToSave, placeIndex) {
+  return function (dispatch, getState) {
+    const { loggedInUser } = getState().user
+
+    if (placeIndex === 'new') {
+      loggedInUser.savedLocations.push(placeToSave)
+    } else {
+      loggedInUser.savedLocations[placeIndex] = placeToSave
+    }
+
+    dispatch(createOrUpdateUser(loggedInUser, true))
+  }
+}
+
+/**
+ * Delete the place data at the specified index for the logged-in user.
+ */
+export function deleteUserPlace (placeIndex) {
+  return function (dispatch, getState) {
+    if (!confirm('Would you like to remove this place?')) return
+
+    const { loggedInUser } = getState().user
+    loggedInUser.savedLocations.splice(placeIndex, 1)
+
+    dispatch(createOrUpdateUser(loggedInUser, true))
+  }
+}

lib/components/app/responsive-webapp.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 { Redirect, Route, Switch, withRouter } from 'react-router'
+import { Route, Switch, withRouter } from 'react-router'
 
 import PrintLayout from './print-layout'
 import * as authActions from '../../actions/auth'
@@ -16,20 +16,25 @@ import * as formActions from '../../actions/form'
 import * as locationActions from '../../actions/location'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
+import { RedirectWithQuery } from '../form/connected-links'
 import { getAuth0Config } from '../../util/auth'
 import {
   ACCOUNT_PATH,
   AUTH0_AUDIENCE,
   AUTH0_SCOPE,
   ACCOUNT_SETTINGS_PATH,
   CREATE_ACCOUNT_PATH,
+  CREATE_ACCOUNT_PLACES_PATH,
+  CREATE_ACCOUNT_VERIFY_PATH,
+  PLACES_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 FavoritePlaceScreen from '../user/places/favorite-place-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'
@@ -158,11 +163,11 @@ const mapStateToProps = (state, ownProps) => {
     activeItinerary: getActiveItinerary(state.otp),
     activeSearchId: state.otp.activeSearchId,
     currentPosition: state.otp.location.currentPosition,
-    query: state.otp.currentQuery,
-    searches: state.otp.searches,
-    mobileScreen: state.otp.ui.mobileScreen,
     initZoomOnLocate: state.otp.config.map && state.otp.config.map.initZoomOnLocate,
+    mobileScreen: state.otp.ui.mobileScreen,
     modeGroups: state.otp.config.modeGroups,
+    query: state.otp.currentQuery,
+    searches: state.otp.searches,
     title
   }
 }
@@ -231,17 +236,24 @@ class RouterWrapperWithAuth0 extends Component {
               ]}
               render={() => <WebappWithRouter {...this.props} />}
             />
+            <Route
+              component={FavoritePlaceScreen}
+              path={[`${CREATE_ACCOUNT_PLACES_PATH}/:id`, `${PLACES_PATH}/:id`]}
+            />
             <Route
               component={SavedTripScreen}
               path={`${TRIPS_PATH}/:id`}
             />
             <Route exact path={ACCOUNT_PATH}>
-              <Redirect to={TRIPS_PATH} />
+              <RedirectWithQuery to={TRIPS_PATH} />
+            </Route>
+            <Route exact path={CREATE_ACCOUNT_PATH}>
+              <RedirectWithQuery to={CREATE_ACCOUNT_VERIFY_PATH} />
             </Route>
             <Route
               // This route lets new or existing users edit or set up their account.
               component={UserAccountScreen}
-              path={[CREATE_ACCOUNT_PATH, ACCOUNT_SETTINGS_PATH]}
+              path={[`${CREATE_ACCOUNT_PATH}/:step`, ACCOUNT_SETTINGS_PATH]}
             />
             <Route
               component={SavedTripList}

lib/components/form/connect-location-field.js

@@ -0,0 +1,53 @@
+import { connect } from 'react-redux'
+
+import * as apiActions from '../../actions/api'
+import * as locationActions from '../../actions/location'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
+
+/**
+ * This higher-order component connects the target (styled) LocationField to the
+ * redux store.
+ * @param StyledLocationField The input LocationField component to connect.
+ * @param options Optional object with the following optional props:
+ *                - actions: a list of actions to include in mapDispatchToProps
+ *                - includeLocation: whether to derive the location prop from
+ *                  the active query
+ * @returns The connected component.
+ */
+export default function connectLocationField (StyledLocationField, options = {}) {
+  // By default, set actions to empty list and do not include location.
+  const {actions = [], includeLocation = false} = options
+  const mapStateToProps = (state, ownProps) => {
+    const { config, currentQuery, location, transitIndex, user } = state.otp
+    const { currentPosition, nearbyStops, sessionSearches } = location
+    const activeSearch = getActiveSearch(state.otp)
+    const query = activeSearch ? activeSearch.query : currentQuery
+
+    const stateToProps = {
+      currentPosition,
+      geocoderConfig: config.geocoder,
+      nearbyStops,
+      sessionSearches,
+      showUserSettings: getShowUserSettings(state.otp),
+      stopsIndex: transitIndex.stops,
+      userLocationsAndRecentPlaces: [...user.locations, ...user.recentPlaces]
+    }
+    // Set the location prop only if includeLocation is specified, else leave unset.
+    // Otherwise, the StyledLocationField component will use the fixed undefined/null value as location
+    // and will not respond to user input.
+    if (includeLocation) {
+      stateToProps.location = query[ownProps.locationType]
+    }
+
+    return stateToProps
+  }
+
+  const mapDispatchToProps = {
+    addLocationSearch: locationActions.addLocationSearch,
+    findNearbyStops: apiActions.findNearbyStops,
+    getCurrentPosition: locationActions.getCurrentPosition,
+    ...actions
+  }
+
+  return connect(mapStateToProps, mapDispatchToProps)(StyledLocationField)
+}

lib/components/form/connected-links.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
+import { Redirect } from 'react-router'
+import { Link } from 'react-router-dom'
+
+/**
+ * This function enhances the routing components imported above
+ * by preserving the itinerary search query from the redux state
+ * when redirecting the user between the main map and account-related pages,
+ * so that when the user returns to the map, the itinerary that was previously
+ * displayed is shown again.
+ * Implementers only need to specify the 'to' route and
+ * do not need to hook to redux store to retrieve the itinerary search query.
+ * @param RoutingComponent The routing component to enhance.
+ * @returns A new component that passes the redux search params to
+ *          the RoutingComponent's 'to' prop.
+ */
+const withQueryParams = RoutingComponent =>
+  ({ children, queryParams, to, ...props }) => (
+    <RoutingComponent {...props} to={{ pathname: to, search: queryParams }}>
+      {children}
+    </RoutingComponent>
+  )
+
+// For connecting to the redux store
+const mapStateToProps = (state, ownProps) => {
+  return {
+    queryParams: state.router.location.search
+  }
+}
+
+// Enhance routing components, connect the result to redux,
+// and export.
+export default {
+  LinkWithQuery: connect(mapStateToProps)(withQueryParams(Link)),
+  LinkContainerWithQuery: connect(mapStateToProps)(withQueryParams(LinkContainer)),
+  RedirectWithQuery: connect(mapStateToProps)(withQueryParams(Redirect))
+}

lib/components/form/connected-location-field.js

@@ -7,13 +7,10 @@ import {
   InputGroupAddon,
   MenuItemA
 } from '@opentripplanner/location-field/lib/styled'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import { clearLocation, onLocationSelected } from '../../actions/map'
-import { addLocationSearch, getCurrentPosition } from '../../actions/location'
-import { findNearbyStops } from '../../actions/api'
-import { getActiveSearch, getShowUserSettings } from '../../util/state'
+import * as mapActions from '../../actions/map'
+import connectLocationField from './connect-location-field'
 
 const StyledLocationField = styled(LocationField)`
   width: 100%;
@@ -55,31 +52,10 @@ const StyledLocationField = styled(LocationField)`
   }
 `
 
-// connect to redux store
-
-const mapStateToProps = (state, ownProps) => {
-  const { config, currentQuery, location, transitIndex, user } = state.otp
-  const { currentPosition, nearbyStops, sessionSearches } = location
-  const activeSearch = getActiveSearch(state.otp)
-  const query = activeSearch ? activeSearch.query : currentQuery
-  return {
-    currentPosition,
-    geocoderConfig: config.geocoder,
-    location: query[ownProps.locationType],
-    nearbyStops,
-    sessionSearches,
-    showUserSettings: getShowUserSettings(state.otp),
-    stopsIndex: transitIndex.stops,
-    userLocationsAndRecentPlaces: [...user.locations, ...user.recentPlaces]
-  }
-}
-
-const mapDispatchToProps = {
-  addLocationSearch,
-  findNearbyStops,
-  getCurrentPosition,
-  onLocationSelected,
-  clearLocation
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(StyledLocationField)
+export default connectLocationField(StyledLocationField, {
+  actions: {
+    clearLocation: mapActions.clearLocation,
+    onLocationSelected: mapActions.onLocationSelected
+  },
+  includeLocation: true
+})

lib/components/form/intermediate-place-field.js

@@ -8,13 +8,10 @@ import {
   MenuItemA
 } from '@opentripplanner/location-field/lib/styled'
 import React, {Component} from 'react'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import { clearLocation } from '../../actions/map'
-import { addLocationSearch, getCurrentPosition } from '../../actions/location'
-import { findNearbyStops } from '../../actions/api'
-import { getShowUserSettings } from '../../util/state'
+import * as mapActions from '../../actions/map'
+import connectLocationField from './connect-location-field'
 
 const StyledIntermediatePlace = styled(LocationField)`
   width: 100%;
@@ -78,27 +75,8 @@ class IntermediatePlaceField extends Component {
   }
 }
 
-// connect to redux store
-
-const mapStateToProps = (state, ownProps) => {
-  const { config, location, transitIndex, user } = state.otp
-  const { currentPosition, nearbyStops, sessionSearches } = location
-  return {
-    currentPosition,
-    geocoderConfig: config.geocoder,
-    nearbyStops,
-    sessionSearches,
-    showUserSettings: getShowUserSettings(state.otp),
-    stopsIndex: transitIndex.stops,
-    userLocationsAndRecentPlaces: [...user.locations, ...user.recentPlaces]
+export default connectLocationField(IntermediatePlaceField, {
+  actions: {
+    clearLocation: mapActions.clearLocation
   }
-}
-
-const mapDispatchToProps = {
-  addLocationSearch,
-  findNearbyStops,
-  getCurrentPosition,
-  clearLocation
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(IntermediatePlaceField)
+})