Add mobile search screen for batch routing

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

@@ -874,7 +874,7 @@ exports[`components > viewers > stop viewer should render countdown times after
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -1636,7 +1636,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -2686,7 +2686,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -4259,7 +4259,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -4511,7 +4511,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -4763,7 +4763,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -5069,7 +5069,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -6634,7 +6634,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={

__tests__/reducers/__snapshots__/create-otp-reducer.js.snap

@@ -52,7 +52,6 @@ Object {
     "wheelchair": false,
   },
   "filter": Object {
-    "filter": "ALL",
     "sort": Object {
       "direction": "ASC",
       "type": null,

__tests__/reducers/create-otp-reducer.js

@@ -6,6 +6,6 @@ describe('lib > reducers > create-otp-reducer', () => {
 
   it('should be able to create the initial state', () => {
     setDefaultTestTime()
-    expect(getInitialState({}, {})).toMatchSnapshot()
+    expect(getInitialState({})).toMatchSnapshot()
   })
 })

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

@@ -22,10 +22,11 @@ const storeMiddleWare = [
  * Get the initial stop of the redux reducer for otp-rr
  */
 export function getMockInitialState () {
-  const mockConfig = {}
-  const mockInitialQuery = {}
+  const mockConfig = {
+    initialQuery: {}
+  }
   return clone({
-    otp: getInitialState(mockConfig, mockInitialQuery),
+    otp: getInitialState(mockConfig),
     router: connectRouter(history)
   })
 }

example.js

@@ -4,35 +4,37 @@ import 'es6-math'
 import {ClassicLegIcon, ClassicModeIcon} from '@opentripplanner/icons'
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
-import React, { Component } from 'react'
+import React from 'react'
 import { render } from 'react-dom'
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
 
-// import Bootstrap Grid components for layout
-import { Grid, Row, Col } from 'react-bootstrap'
-
 // import OTP-RR components
 import {
+  BatchRoutingPanel,
+  BatchSearchScreen,
   CallTakerControls,
   CallTakerPanel,
   CallTakerWindows,
   DefaultItinerary,
   DefaultMainPanel,
-  DesktopNav,
-  BatchRoutingPanel,
-  Map,
-  MobileMain,
+  MobileSearchScreen,
   ResponsiveWebapp,
   createCallTakerReducer,
   createOtpReducer,
-  createUserReducer
+  createUserReducer,
+  otpUtils
 } from './lib'
 // load the OTP configuration
 import otpConfig from './config.yml'
 
+const isBatchRoutingEnabled = otpUtils.itinerary.isBatchRoutingEnabled(
+  otpConfig
+)
+const isCallTakerModuleEnabled = !!otpConfig.datastoreUrl
+
 // Set useCustomIcons to true to override classic icons with the exports from
 // custom-icons.js
 const useCustomIcons = false
@@ -49,18 +51,32 @@ if (useCustomIcons) {
 
 // define some application-wide components that should be used in
 // various places. The following components can be provided here:
+// - defaultMobileTitle (required)
 // - ItineraryBody (required)
 // - ItineraryFooter (optional)
 // - LegIcon (required)
+// - MainControls (optional)
+// - MainPanel (required)
+// - MapWindows (optional)
+// - MobileSearchScreen (required)
 // - ModeIcon (required)
 const components = {
+  defaultMobileTitle: () => <div className='navbar-title'>OpenTripPlanner</div>,
   ItineraryBody: DefaultItinerary,
   LegIcon: MyLegIcon,
+  MainControls: isCallTakerModuleEnabled ? CallTakerControls : null,
+  MainPanel: isCallTakerModuleEnabled
+    ? CallTakerPanel
+    : isBatchRoutingEnabled
+      ? BatchRoutingPanel
+      : DefaultMainPanel,
+  MapWindows: isCallTakerModuleEnabled ? CallTakerWindows : null,
+  MobileSearchScreen: isBatchRoutingEnabled
+    ? BatchSearchScreen
+    : MobileSearchScreen,
   ModeIcon: MyModeIcon
 }
 
-// Get the initial query from config (for demo/testing purposes).
-const {initialQuery} = otpConfig
 const history = createHashHistory()
 const middleware = [
   thunk,
@@ -76,109 +92,41 @@ if (process.env.NODE_ENV === 'development') {
 const store = createStore(
   combineReducers({
     callTaker: createCallTakerReducer(),
-    otp: createOtpReducer(otpConfig, initialQuery),
+    otp: createOtpReducer(otpConfig),
     user: createUserReducer(),
     router: connectRouter(history)
   }),
   compose(applyMiddleware(...middleware))
 )
 
-// define a simple responsive UI using Bootstrap and OTP-RR
-class OtpRRExample extends Component {
-  render () {
-    /** desktop view **/
-    const desktopView = (
-      <div className='otp'>
-        <DesktopNav />
-        <Grid>
-          <Row className='main-row'>
-            <Col sm={6} md={4} className='sidebar'>
-              {/*
-                Note: the main tag provides a way for users of screen readers
-                to skip to the primary page content.
-                TODO: Find a better place.
-              */}
-              <main>
-                {/* TODO: extract the BATCH elements out of CallTakerPanel. */}
-                {otpConfig.datastoreUrl
-                  ? <CallTakerPanel />
-                  : otpConfig.routingTypes.find(t => t.key === 'BATCH')
-                    ? <BatchRoutingPanel />
-                    : <DefaultMainPanel />
-                }
-              </main>
-            </Col>
-            {otpConfig.datastoreUrl ? <CallTakerControls /> : null}
-            <Col sm={6} md={8} className='map-container'>
-              {otpConfig.datastoreUrl ? <CallTakerWindows /> : null}
-              <Map />
-            </Col>
-          </Row>
-        </Grid>
-      </div>
-    )
-
-    /** mobile view **/
-    const mobileView = (
-      // <main> Needed for accessibility checks. TODO: Find a better place.
-      <main>
-        <MobileMain
-          map={<Map />}
-          title={<div className='navbar-title'>OpenTripPlanner</div>}
-        />
-      </main>
-    )
-
-    /**
-     * The main webapp.
-     *
-     * Note: the ResponsiveWebapp creates a React context provider
-     * (./util/contexts#ComponentContext to be specific) to supply custom
-     * components to various other subcomponents throughout otp-react-redux. If
-     * the ResponsiveWebapp is not used and instead some subcomponents that use
-     * the components in the `components` variable are imported and rendered
-     * outside of the ResponsiveWebapp component, then the ComponentContext will
-     * need to wrap that component in order for the subcomponents to be able to
-     * access the component context. For example:
-     *
-     * ```js
-     * import RouteViewer from 'otp-react-redux/build/components/viewers/route-viewer'
-     * import { ComponentContext } from 'otp-react-redux/build/util/contexts'
-     *
-     * const components = {
-     *   ModeIcon: MyCustomModeIconComponent
-     * }
-     * const ContextAwareRouteViewer = () => (
-     *   <ComponentContext.Provider value={components}>
-     *     <RouteViewer />
-     *   <ComponentContext.Provider/>
-     * )
-     * ```
-     */
-    return (
-      <ResponsiveWebapp
-        components={components}
-        desktopView={desktopView}
-        mobileView={mobileView}
-      />
-    )
-  }
-}
-
 // render the app
 render(
   (
     <Provider store={store}>
-      { /**
-     * If not using router history, simply include OtpRRExample here:
-     * e.g.
-     * <OtpRRExample />
-     */
-      }
-      <OtpRRExample />
+      {/**
+       * Note: the ResponsiveWebapp creates a React context provider
+       * (./util/contexts#ComponentContext to be specific) to supply custom
+       * components to various other subcomponents throughout otp-react-redux. If
+       * the ResponsiveWebapp is not used and instead some subcomponents that use
+       * the components in the `components` variable are imported and rendered
+       * outside of the ResponsiveWebapp component, then the ComponentContext will
+       * need to wrap that component in order for the subcomponents to be able to
+       * access the component context. For example:
+       *
+       * ```js
+       * import RouteViewer from 'otp-react-redux/build/components/viewers/route-viewer'
+       * import { ComponentContext } from 'otp-react-redux/build/util/contexts'
+       *
+       * const components = { ModeIcon: MyCustomModeIconComponent }
+       * const ContextAwareRouteViewer = () => (
+       *   <ComponentContext.Provider value={components}>
+       *     <RouteViewer />
+       *   <ComponentContext.Provider/>
+       * )
+       * ```
+       */}
+      <ResponsiveWebapp components={components} />
     </Provider>
-  )
-  ,
-
+  ),
   document.getElementById('root')
 )