Merge pull request #167 from opentripplanner/add-trip-rq-history

Log trip requests

Author: binh-dam-ibigroup

Diff for: example-config.yml

@@ -16,14 +16,30 @@ api:
 #     name: Oregon Zoo, Portland, OR
 
 ### The persistence setting is used to enable the storage of places (home, work),
-### recent searches/places, user overrides, and favorite stops. Currently the
-### only strategy is localStorage (which is used by default). It also must be
-### enabled to show the stored locations (see above).
-### TODO: add another server-based strategy
+### recent searches/places, user overrides, and favorite stops.
+### Pick the strategy that best suits your needs.
+###
+### If you do not require remote storage of preferences,
+### then use the localStorage strategy outlined below (which is used by default).
+### The localStorage strategy will use the browser application storage.
+### It must be enabled to show the stored locations (see above).
 persistence:
   enabled: true
   strategy: localStorage
 
+### If using the OTP Middleware to store user profiles
+### with Auth0 as the authentication mechanism,
+### then use the otp_middleware strategy below instead: 
+# persistence:
+#  enabled: true
+#  strategy: otp_middleware
+#  auth0:
+#    domain: your-auth0-domain
+#    clientId: your-auth0-client-id
+#  otp_middleware:
+#    apiBaseUrl: https://otp-middleware.example.com
+#    apiKey: your-middleware-api-key
+
 map:
   initLat: 45.52
   initLon: -122.682

Diff for: example.js

@@ -11,23 +11,18 @@ import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
 
-// Auth0
-import { Auth0Provider } from 'use-auth0-hooks'
-import { accountLinks, getAuth0Callbacks, getAuth0Config } from './lib/util/auth'
-import { AUTH0_SCOPE, URL_ROOT } from './lib/util/constants'
-
 // import Bootstrap Grid components for layout
-import { Nav, Navbar, Grid, Row, Col } from 'react-bootstrap'
+import { Grid, Row, Col } from 'react-bootstrap'
 
 // import OTP-RR components
 import {
-  AppMenu,
   DefaultMainPanel,
+  DesktopNav,
   Map,
   MobileMain,
-  NavLoginButtonAuth0,
   ResponsiveWebapp,
-  createOtpReducer
+  createOtpReducer,
+  createUserReducer
 } from './lib'
 // load the OTP configuration
 import otpConfig from './config.yml'
@@ -74,42 +69,19 @@ if (process.env.NODE_ENV === 'development') {
 const store = createStore(
   combineReducers({
     otp: createOtpReducer(otpConfig),
+    user: createUserReducer(),
     router: connectRouter(history)
   }),
   compose(applyMiddleware(...middleware))
 )
 
-// Auth0 config and callbacks.
-const auth0Config = getAuth0Config(otpConfig)
-const auth0Callbacks = getAuth0Callbacks(store)
-
 // define a simple responsive UI using Bootstrap and OTP-RR
 class OtpRRExample extends Component {
   render () {
     /** desktop view **/
     const desktopView = (
       <div className='otp'>
-        <Navbar fluid inverse>
-          <Navbar.Header>
-            <Navbar.Brand>
-              <div style={{ float: 'left', color: 'white', fontSize: 28 }}>
-                <AppMenu />
-              </div>
-              <div className='navbar-title' style={{ marginLeft: 50 }}>OpenTripPlanner</div>
-            </Navbar.Brand>
-          </Navbar.Header>
-          
-          {auth0Config && (
-            <Navbar.Collapse>
-              <Nav pullRight>
-                <NavLoginButtonAuth0
-                  id='login-control'
-                  links={accountLinks}
-                />
-              </Nav>
-            </Navbar.Collapse>
-          )}
-        </Navbar>
+        <DesktopNav />
         <Grid>
           <Row className='main-row'>
             <Col sm={6} md={4} className='sidebar'>
@@ -144,32 +116,20 @@ class OtpRRExample extends Component {
   }
 }
 
-const innerProvider = (
-  <Provider store={store}>
-    { /**
+// render the app
+render(
+  (
+    <Provider store={store}>
+      { /**
      * If not using router history, simply include OtpRRExample here:
      * e.g.
      * <OtpRRExample />
      */
-    }
-    <OtpRRExample />
-  </Provider>
-)
-
-// render the app
-render(auth0Config
-  ? (<Auth0Provider
-    audience={auth0Config.audience}
-    scope={AUTH0_SCOPE}
-    domain={auth0Config.domain}
-    clientId={auth0Config.clientId}
-    redirectUri={URL_ROOT}
-    {...auth0Callbacks}
-  >
-    {innerProvider}
-  </Auth0Provider>)
-  : innerProvider
-,
+      }
+      <OtpRRExample />
+    </Provider>
+  )
+  ,
 
-document.getElementById('root')
+  document.getElementById('root')
 )

Diff for: lib/actions/api.js

@@ -10,6 +10,8 @@ import qs from 'qs'
 
 import { rememberPlace } from './map'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
+import { getSecureFetchOptions } from '../util/middleware'
+
 if (typeof (fetch) === 'undefined') require('isomorphic-fetch')
 
 const { hasCar } = coreUtils.itinerary
@@ -81,7 +83,9 @@ function getActiveItinerary (otpState) {
  */
 export function routingQuery (searchId = null) {
   return async function (dispatch, getState) {
-    const otpState = getState().otp
+    const state = getState()
+    const otpState = state.otp
+
     const isNewSearch = !searchId
     if (isNewSearch) searchId = randId()
     const routingType = otpState.currentQuery.routingType
@@ -95,7 +99,7 @@ export function routingQuery (searchId = null) {
 
     // fetch a realtime route
     const query = constructRoutingQuery(otpState)
-    fetch(query)
+    fetch(query, getOtpFetchOptions(state))
       .then(getJsonAndCheckResponse)
       .then(json => {
         dispatch(routingResponse({ response: json, searchId }))
@@ -126,8 +130,29 @@ export function routingQuery (searchId = null) {
     if (isNewSearch || params.ui_activeSearch !== searchId) {
       dispatch(updateOtpUrlParams(otpState, searchId))
     }
-    // also fetch a non-realtime route
-    fetch(constructRoutingQuery(otpState, true))
+
+    // Also fetch a non-realtime route.
+    //
+    // FIXME: The statement below may no longer apply with future work
+    // involving realtime info embedded in the OTP response.
+    // (That action records an entry again in the middleware.)
+    // For users who opted in to store trip request history,
+    // to avoid recording the same trip request twice in the middleware,
+    // only add the user Authorization token to the request
+    // when querying the non-realtime route.
+    //
+    // The advantage of using non-realtime route is that the middleware will be able to
+    // record and provide the theoretical itinerary summary without having to query OTP again.
+    // FIXME: Interestingly, and this could be from a side effect elsewhere,
+    // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
+    // (state.user stays unpopulated until after this function is called).
+    //
+    const { user } = state
+    const storeTripHistory = user &&
+      user.loggedInUser &&
+      user.loggedInUser.storeTripHistory
+
+    fetch(constructRoutingQuery(otpState, true), getOtpFetchOptions(state, storeTripHistory))
       .then(getJsonAndCheckResponse)
       .then(json => {
         // FIXME: This is only performed when ignoring realtimeupdates currently, just
@@ -150,6 +175,39 @@ function getJsonAndCheckResponse (res) {
   return res.json()
 }
 
+/**
+ * This method determines the fetch options (including API key and Authorization headers) for the OTP API.
+ * - If the OTP server is not the middleware server (standalone OTP server),
+ *   an empty object is returned.
+ * - If the OTP server is the same as the middleware server,
+ *   then an object is returned with the following:
+ *   - A middleware API key, if it has been set in the configuration (it is most likely required),
+ *   - An Auth0 accessToken, when includeToken is true and a user is logged in (userState.loggedInUser is not null).
+ * This method assumes JSON request bodies.)
+ */
+function getOtpFetchOptions (state, includeToken = false) {
+  let apiBaseUrl, apiKey, token
+
+  const { api, persistence } = state.otp.config
+  if (persistence && persistence.otp_middleware) {
+    ({ apiBaseUrl, apiKey } = persistence.otp_middleware)
+  }
+
+  const isOtpServerSameAsMiddleware = apiBaseUrl === api.host
+  if (isOtpServerSameAsMiddleware) {
+    if (includeToken && state.user) {
+      const { accessToken, loggedInUser } = state.user
+      if (accessToken && loggedInUser) {
+        token = accessToken
+      }
+    }
+
+    return getSecureFetchOptions(token, apiKey)
+  } else {
+    return {}
+  }
+}
+
 function constructRoutingQuery (otpState, ignoreRealtimeUpdates) {
   const { config, currentQuery } = otpState
   const routingType = currentQuery.routingType

Diff for: lib/actions/auth.js

@@ -0,0 +1,59 @@
+import { push } from 'connected-react-router'
+
+import { setPathBeforeSignIn } from '../actions/user'
+
+/**
+ * This function is called by the Auth0Provider component, with the described parameter(s),
+ * when a new access token could not be retrieved.
+ * @param {Error} err
+ * @param {AccessTokenRequestOptions} options
+ */
+export function showAccessTokenError (err, options) {
+  return function (dispatch, getState) {
+    // TODO: improve this.
+    console.error('Failed to retrieve access token: ', err)
+  }
+}
+
+/**
+ * This function is called by the Auth0Provider component, with the described parameter(s),
+ * when signing-in fails for some reason.
+ * @param {Error} err
+ */
+export function showLoginError (err) {
+  return function (dispatch, getState) {
+    // TODO: improve this.
+    if (err) dispatch(push('/oops'))
+  }
+}
+
+/**
+ * This function is called by the Auth0Provider component, with the described parameter(s),
+ * after the user signs in.
+ * @param {Object} appState The state that was stored when calling useAuth().login().
+ */
+export function processSignIn (appState) {
+  return function (dispatch, getState) {
+    if (appState && appState.urlHash) {
+      // At this stage after login, Auth0 has already redirected to /signedin (Auth0-whitelisted)
+      // which shows the AfterLoginScreen.
+      //
+      // Here, we save the URL hash prior to login (contains a combination of itinerary search, stop/trip view, etc.),
+      // so that the AfterLoginScreen can redirect back there when logged-in user info is fetched.
+      // (For routing, it is easier to deal with the path without the hash sign.)
+      const hashIndex = appState.urlHash.indexOf('#')
+      const urlHashWithoutHash = hashIndex >= 0
+        ? appState.urlHash.substr(hashIndex + 1)
+        : '/'
+      dispatch(setPathBeforeSignIn(urlHashWithoutHash))
+    } else if (appState && appState.returnTo) {
+      // TODO: Handle other after-login situations.
+      // Note that when redirecting from a login-protected (e.g. account) page while logged out,
+      //     then returnTo is set by Auth0 to this object format:
+      //     {
+      //       pathname: "/"
+      //       query: { ... }
+      //     }
+    }
+  }
+}

Diff for: lib/actions/ui.js

@@ -11,13 +11,15 @@ import { setActiveItinerary } from './narrative'
 import { getUiUrlParams } from '../util/state'
 
 /**
- * Wrapper function for history#push that preserves the current search or, if
+ * Wrapper function for history#push (or, if specified, replace, etc.)
+ * that preserves the current search or, if
  * replaceSearch is provided (including an empty string), replaces the search
  * when routing to a new URL path.
  * @param  {[type]} url           path to route to
  * @param  {string} replaceSearch optional search string to replace current one
+ * @param  {func}   routingMethod the connected-react-router method to execute (defaults to push).
  */
-export function routeTo (url, replaceSearch) {
+export function routeTo (url, replaceSearch, routingMethod = push) {
   return function (dispatch, getState) {
     // Get search to preserve when routing to new path.
     const { router } = getState()
@@ -28,7 +30,7 @@ export function routeTo (url, replaceSearch) {
     } else {
       path = `${path}${search}`
     }
-    dispatch(push(path))
+    dispatch(routingMethod(path))
   }
 }