Merge pull request #174 from opentripplanner/add-save-trips

Add save trips

Author: binh-dam-ibigroup

Diff for: lib/actions/user.js

@@ -1,12 +1,21 @@
 import { createAction } from 'redux-actions'
 
-import { addUser, fetchUser, updateUser } from '../util/middleware'
+import {
+  addTrip,
+  addUser,
+  deleteTrip,
+  fetchUser,
+  getTrips,
+  updateTrip,
+  updateUser
+} from '../util/middleware'
 import { isNewUser } from '../util/user'
 
 const setCurrentUser = createAction('SET_CURRENT_USER')
+const setCurrentUserMonitoredTrips = createAction('SET_CURRENT_USER_MONITORED_TRIPS')
 export const setPathBeforeSignIn = createAction('SET_PATH_BEFORE_SIGNIN')
 
-function getStateForNewUser (auth0User) {
+function createNewUser (auth0User) {
   return {
     auth0UserId: auth0User.sub,
     email: auth0User.email,
@@ -18,19 +27,36 @@ function getStateForNewUser (auth0User) {
   }
 }
 
+/**
+ * Fetches the saved/monitored trips for a user.
+ * We use the accessToken to fetch the data regardless of
+ * whether the process to populate state.user is completed or not.
+ */
+export function fetchUserMonitoredTrips (accessToken) {
+  return async function (dispatch, getState) {
+    const { otp } = getState()
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
+
+    if (otpMiddleware) {
+      const { data: trips, status: fetchStatus } = await getTrips(otpMiddleware, accessToken)
+      if (fetchStatus === 'success') {
+        dispatch(setCurrentUserMonitoredTrips(trips))
+      }
+    }
+  }
+}
+
 /**
  * Fetches user preferences to state.user, or set initial values under state.user if no user has been loaded.
  */
 export function fetchOrInitializeUser (auth) {
   return async function (dispatch, getState) {
     const { otp } = getState()
-    const { accessToken, user } = auth
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
 
-    try {
-      const result = await fetchUser(
-        otp.config.persistence.otp_middleware,
-        accessToken
-      )
+    if (otpMiddleware) {
+      const { accessToken, user: authUser } = auth
+      const { data: user, status: fetchUserStatus } = await fetchUser(otpMiddleware, accessToken)
 
       // Beware! On AWS API gateway, if a user is not found in the middleware
       // (e.g. they just created their Auth0 password but have not completed the account setup form yet),
@@ -53,19 +79,15 @@ export function fetchOrInitializeUser (auth) {
       // }
       // TODO: Improve AWS response.
 
-      const resultData = result.data
-      const isNewAccount = result.status === 'error' || (resultData && resultData.result === 'ERR')
-
+      const isNewAccount = fetchUserStatus === 'error' || (user && user.result === 'ERR')
       if (!isNewAccount) {
-        // TODO: Move next line somewhere else.
-        if (resultData.savedLocations === null) resultData.savedLocations = []
-        dispatch(setCurrentUser({ accessToken, user: resultData }))
+        // Load user's monitored trips before setting the user state.
+        await dispatch(fetchUserMonitoredTrips(accessToken))
+
+        dispatch(setCurrentUser({ accessToken, user }))
       } else {
-        dispatch(setCurrentUser({ accessToken, user: getStateForNewUser(user) }))
+        dispatch(setCurrentUser({ accessToken, user: createNewUser(authUser) }))
       }
-    } catch (error) {
-      // TODO: improve error handling.
-      alert(`An error was encountered:\n${error}`)
     }
   }
 }
@@ -91,15 +113,71 @@ export function createOrUpdateUser (userData) {
 
       // TODO: improve the UI feedback messages for this.
       if (result.status === 'success' && result.data) {
+        alert('Your preferences have been saved.')
+
         // Update application state with the user entry as saved
         // (as returned) by the middleware.
         const userData = result.data
         dispatch(setCurrentUser({ accessToken, user: userData }))
+      } else {
+        alert(`An error was encountered:\n${JSON.stringify(result)}`)
+      }
+    }
+  }
+}
 
+/**
+ * Updates a logged-in user's monitored trip,
+ * then, if that was successful, refreshes the redux monitoredTrips
+ * with the updated trip.
+ */
+export function createOrUpdateUserMonitoredTrip (tripData, isNew) {
+  return async function (dispatch, getState) {
+    const { otp, user } = getState()
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
+
+    if (otpMiddleware) {
+      const { accessToken } = user
+
+      let result
+      if (isNew) {
+        result = await addTrip(otpMiddleware, accessToken, tripData)
+      } else {
+        result = await updateTrip(otpMiddleware, accessToken, tripData)
+      }
+
+      // TODO: improve the UI feedback messages for this.
+      if (result.status === 'success' && result.data) {
         alert('Your preferences have been saved.')
+
+        // Reload user's monitored trips after add/update.
+        await dispatch(fetchUserMonitoredTrips(accessToken))
       } else {
         alert(`An error was encountered:\n${JSON.stringify(result)}`)
       }
     }
   }
 }
+
+/**
+ * Deletes a logged-in user's monitored trip,
+ * then, if that was successful, refreshes the redux monitoredTrips state.
+ */
+export function deleteUserMonitoredTrip (id) {
+  return async function (dispatch, getState) {
+    const { otp, user } = getState()
+    const { otp_middleware: otpMiddleware = null } = otp.config.persistence
+
+    if (otpMiddleware) {
+      const { accessToken } = user
+      const deleteResult = await deleteTrip(otpMiddleware, accessToken, id)
+
+      if (deleteResult.status === 'success') {
+        // Reload user's monitored trips after deletion.
+        await dispatch(fetchUserMonitoredTrips(accessToken))
+      } else {
+        alert(`An error was encountered:\n${JSON.stringify(deleteResult)}`)
+      }
+    }
+  }
+}

Diff for: lib/components/app/responsive-webapp.js

@@ -20,6 +20,8 @@ import { AUTH0_AUDIENCE, AUTH0_SCOPE, URL_ROOT } from '../../util/constants'
 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 UserAccountScreen from '../user/user-account-screen'
 import withLoggedInUserSupport from '../user/with-logged-in-user-support'
 
@@ -233,6 +235,24 @@ class RouterWrapperWithAuth0 extends Component {
                 return <UserAccountScreen {...props} />
               }}
             />
+            <Route
+              path={'/savetrip'}
+              component={(routerProps) => {
+                const props = this._combineProps(routerProps)
+                return <SavedTripScreen isCreating {...props} />
+              }}
+            />
+            <Route
+              path={'/savedtrips/:id'}
+              component={(routerProps) => {
+                const props = this._combineProps(routerProps)
+                return <SavedTripScreen {...props} />
+              }}
+            />
+            <Route
+              path={'/savedtrips'}
+              component={SavedTripList}
+            />
             <Route
               // This route is called immediately after login by Auth0
               // and by the onRedirectCallback function from /lib/util/auth.js.

Diff for: lib/components/narrative/default/default-itinerary.js

@@ -6,6 +6,7 @@ import ItinerarySummary from './itinerary-summary'
 import ItineraryDetails from './itinerary-details'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
+import LinkButton from '../../user/link-button'
 
 const { formatDuration, formatTime } = coreUtils.time
 
@@ -31,6 +32,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
           <span className='title'>Itinerary {index + 1}</span>{' '}
           <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
           <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
+          <span className='pull-right'><LinkButton to='/savetrip'>Save</LinkButton></span>{' '}
           <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
         </button>
         {(active || expanded) &&

Diff for: lib/components/narrative/line-itin/line-itinerary.js

@@ -6,6 +6,7 @@ import ItineraryBody from './connected-itinerary-body'
 import ItinerarySummary from './itin-summary'
 import NarrativeItinerary from '../narrative-itinerary'
 import SimpleRealtimeAnnotation from '../simple-realtime-annotation'
+import LinkButton from '../../user/link-button'
 
 const { getLegModeLabel, getTimeZoneOffset, isTransit } = coreUtils.itinerary
 
@@ -74,6 +75,9 @@ export default class LineItinerary extends NarrativeItinerary {
           onClick={onClick}
           timeOptions={timeOptions}
         />
+
+        <span className='pull-right'><LinkButton to='/savetrip'>Save this option</LinkButton></span>
+
         {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}
         {active || expanded
           ? <ItineraryBody

Diff for: lib/components/user/existing-account-display.js

@@ -1,34 +1,43 @@
-import React from 'react'
+import React, { Component } from 'react'
 
+import LinkButton from './link-button'
 import StackedPaneDisplay from './stacked-pane-display'
 
 /**
  * This component handles the existing account display.
  */
-const ExistingAccountDisplay = ({ onCancel, onComplete, panes }) => {
-  const paneSequence = [
-    {
-      pane: panes.terms,
-      props: { disableCheckTerms: true },
-      title: 'Terms'
-    },
-    {
-      pane: panes.notifications,
-      title: 'Notifications'
-    },
-    {
-      pane: panes.locations,
-      title: 'My locations'
-    }
-  ]
+class ExistingAccountDisplay extends Component {
+  render () {
+    const { onCancel, onComplete, panes } = this.props
+    const paneSequence = [
+      {
+        pane: () => <p><LinkButton to='/savedtrips'>Edit my trips</LinkButton></p>,
+        title: 'My trips'
+      },
+      {
+        pane: panes.terms,
+        props: { disableCheckTerms: true },
+        title: 'Terms'
+      },
+      {
+        pane: panes.notifications,
+        title: 'Notifications'
+      },
+      {
+        pane: panes.locations,
+        title: 'My locations'
+      }
+    ]
 
-  return (
-    <StackedPaneDisplay
-      onCancel={onCancel}
-      onComplete={onComplete}
-      paneSequence={paneSequence}
-    />
-  )
+    return (
+      <StackedPaneDisplay
+        onCancel={onCancel}
+        onComplete={onComplete}
+        paneSequence={paneSequence}
+        title='My Account'
+      />
+    )
+  }
 }
 
 export default ExistingAccountDisplay

Diff for: lib/components/user/favorite-locations-pane.js

@@ -1,3 +1,4 @@
+import clone from 'lodash/cloneDeep'
 import memoize from 'lodash.memoize'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -53,11 +54,11 @@ class FavoriteLocationsPane extends Component {
     const value = e.target.value || ''
     if (value.trim().length > 0) {
       const { userData, onUserDataChange } = this.props
-      const { savedLocations } = userData
-
-      // Create a new array for savedLocations.
-      const newLocations = [].concat(savedLocations)
+      // FIXME: remove assigning [] when null.
+      const { savedLocations = [] } = userData
 
+      // Create a copy of savedLocations and add the new location to the copied array.
+      const newLocations = clone(savedLocations)
       newLocations.push({
         address: value.trim(),
         icon: 'map-marker',
@@ -75,7 +76,8 @@ class FavoriteLocationsPane extends Component {
   _handleAddressChange = memoize(
     location => e => {
       const { userData, onUserDataChange } = this.props
-      const { savedLocations } = userData
+      // FIXME: remove assigning [] when null.
+      const { savedLocations = [] } = userData
       const value = e.target.value
       const isValueEmpty = !value || value === ''
       const nonEmptyLocation = isValueEmpty ? null : location
@@ -108,7 +110,8 @@ class FavoriteLocationsPane extends Component {
 
   render () {
     const { userData } = this.props
-    const { savedLocations } = userData
+    // FIXME: remove assigning [] when null.
+    const { savedLocations = [] } = userData
 
     // Build an 'effective' list of locations for display,
     // where at least one 'home' and one 'work', are always present even if blank.

Diff for: lib/components/user/link-button.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+
+import * as uiActions from '../../actions/ui'
+
+/**
+ * This button provides basic redirecting functionality.
+ * FIXME: Replace this component with Link (react-router-dom) or LinkContainer (react-router-bootstrap).
+ */
+class LinkButton extends Component {
+  static propTypes = {
+    /** The destination url when clicking the button. */
+    to: PropTypes.string.isRequired
+  }
+
+  _handleClick = () => {
+    this.props.routeTo(this.props.to)
+  }
+
+  render () {
+    return <Button onClick={this._handleClick}>{this.props.children}</Button>
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {}
+}
+
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LinkButton)

Diff for: lib/components/user/new-account-wizard.js

@@ -46,6 +46,7 @@ const NewAccountWizard = ({ onComplete, panes, userData }) => {
 
   return (
     <SequentialPaneDisplay
+      initialPaneId='terms'
       onComplete={onComplete}
       paneSequence={paneSequence}
     />