Merge branch 'nearby-view' into graphql-mock-server

i18n/en-US.yml

@@ -359,6 +359,7 @@ components:
     companyBicycle: "{company} Bike"
     companyScooter: "{company} Scooter"
     error: An error occurred loading nearby amenities.
+    header: Nearby View
     nothingNearby: There are no places nearby.
     spacesAvailable: "{spacesAvailable} empty spaces available"
   NewAccountWizard:

lib/components/mobile/main.js

@@ -15,6 +15,7 @@ import MobileRouteViewer from './route-viewer'
 import MobileStopViewer from './stop-viewer'
 import MobileTripViewer from './trip-viewer'
 import MobileWelcomeScreen from './welcome-screen'
+import NearbyView from '../viewers/nearby/nearby-view'
 
 class MobileMain extends Component {
   static propTypes = {
@@ -62,14 +63,15 @@ class MobileMain extends Component {
       return <MobilePatternViewer />
     }
 
+    if (uiState.mainPanelContent === MainPanelContent.NEARBY_VIEW) {
+      return <NearbyView mobile />
+    }
+
     // check for viewed stop
     if (uiState.viewedStop) return <MobileStopViewer />
 
     // check for viewed trip
-    if (
-      uiState.viewedTrip ||
-      uiState.mainPanelContent === MainPanelContent.TRIP_VIEWER
-    )
+    if (uiState.mainPanelContent === MainPanelContent.TRIP_VIEWER)
       return <MobileTripViewer />
 
     switch (uiState.mobileScreen) {

lib/components/viewers/nearby/nearby-view.tsx

@@ -1,16 +1,21 @@
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { MapRef, useMap } from 'react-map-gl'
-import React, { useEffect, useRef, useState } from 'react'
+
+import MobileNavigationBar from '../../mobile/navigation-bar'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import * as apiActions from '../../../actions/api'
+import * as uiActions from '../../../actions/ui'
 
 import {
   FloatingLoadingIndicator,
   NearbySidebarContainer,
   Scrollable
 } from './styled'
+import { MainPanelContent } from '../../../actions/ui-constants'
 import Loading from '../../narrative/loading'
+import MobileContainer from '../../mobile/container'
 import RentalStation from './rental-station'
 import Stop from './stop'
 import Vehicle from './vehicle-rent'
@@ -21,8 +26,10 @@ type LatLonObj = { lat: number; lon: number }
 type Props = {
   fetchNearby: (latLon: LatLonObj, map?: MapRef) => void
   hideBackButton?: boolean
+  mobile?: boolean
   nearby: any
   nearbyViewCoords?: LatLonObj
+  setMainPanelContent: (content: number) => void
 }
 
 const getNearbyItem = (place: any) => {
@@ -47,7 +54,8 @@ const getNearbyItemList = (nearby: any) => {
 }
 
 function NearbyView(props: Props): JSX.Element {
-  const { fetchNearby, nearby, nearbyViewCoords } = props
+  const { fetchNearby, mobile, nearby, nearbyViewCoords, setMainPanelContent } =
+    props
   const map = useMap().current
   const intl = useIntl()
   const [loading, setLoading] = useState(true)
@@ -71,11 +79,18 @@ function NearbyView(props: Props): JSX.Element {
     setLoading(false)
   }, [nearby])
 
-  // TODO: when coordinates are set, put a marker on the map and zoom there
+  const MainContainer = mobile ? MobileContainer : Scrollable
 
   return (
-    <Scrollable className="nearby-view base-color-bg">
-      <NearbySidebarContainer className="base-color-bg">
+    <MainContainer className="nearby-view base-color-bg">
+      <MobileNavigationBar
+        headerText={intl.formatMessage({ id: 'components.NearbyView.header' })}
+        onBackClicked={useCallback(() => setMainPanelContent(0), [])}
+      />
+      <NearbySidebarContainer
+        className="base-color-bg"
+        style={{ marginTop: mobile ? '50px' : 0 }}
+      >
         <div ref={firstItemRef} />
         {loading && (
           <FloatingLoadingIndicator>
@@ -91,7 +106,7 @@ function NearbyView(props: Props): JSX.Element {
             <FormattedMessage id="components.NearbyView.nothingNearby" />
           ))}
       </NearbySidebarContainer>
-    </Scrollable>
+    </MainContainer>
   )
 }
 
@@ -107,7 +122,8 @@ const mapStateToProps = (state: any) => {
 }
 
 const mapDispatchToProps = {
-  fetchNearby: apiActions.fetchNearby
+  fetchNearby: apiActions.fetchNearby,
+  setMainPanelContent: uiActions.setMainPanelContent
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(NearbyView)

package.json

@@ -46,7 +46,7 @@
     "@opentripplanner/geocoder": "^1.4.2",
     "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "^2.0.6",
-    "@opentripplanner/itinerary-body": "5.1.0-alpha.3",
+    "@opentripplanner/itinerary-body": "5.2.0-alpha.1",
     "@opentripplanner/location-field": "^2.0.12",
     "@opentripplanner/location-icon": "^1.4.1",
     "@opentripplanner/map-popup": "2.0.7-alpha.1",
@@ -55,7 +55,7 @@
     "@opentripplanner/printable-itinerary": "2.0.10-alpha.4",
     "@opentripplanner/route-viewer-overlay": "^2.0.14",
     "@opentripplanner/stop-viewer-overlay": "^2.0.7",
-    "@opentripplanner/stops-overlay": "^5.1.2",
+    "@opentripplanner/stops-overlay": "^5.2.0-alpha.3",
     "@opentripplanner/transit-vehicle-overlay": "^4.0.7",
     "@opentripplanner/transitive-overlay": "^3.0.16",
     "@opentripplanner/trip-details": "^5.0.6",
@@ -176,6 +176,7 @@
     "eslint-plugin-typescript-sort-keys": "^1.8.0",
     "execa": "^5.1.1",
     "express": "^4.17.3",
+    "fastify": "^4.24.3",
     "har-express": "^1.1.0",
     "husky": "^6.0.0",
     "jest-transform-stub": "^2.0.0",