Merge branch 'nearby-view' of github.com:opentripplanner/otp-react-re…

…dux into nearby-view

i18n/en-US.yml

@@ -769,6 +769,7 @@ components:
     resendVerification: Resend verification email
   ViewSwitcher:
     switcher: Switcher
+    nearby: Nearby
   WelcomeScreen:
     prompt: Where do you want to go?
 config:

lib/actions/ui.js

@@ -37,7 +37,7 @@ const setPanel = createAction('SET_MAIN_PANEL_CONTENT')
 export const setMobileScreen = createAction('SET_MOBILE_SCREEN')
 export const clearPanel = createAction('CLEAR_MAIN_PANEL')
 const viewStop = createAction('SET_VIEWED_STOP')
-const viewNearby = createAction('SET_NEARBY_COORDS')
+export const viewNearby = createAction('SET_NEARBY_COORDS')
 export const setHoveredStop = createAction('SET_HOVERED_STOP')
 const viewTrip = createAction('SET_VIEWED_TRIP')
 const viewRoute = createAction('SET_VIEWED_ROUTE')

lib/components/app/app-menu.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { Envelope } from '@styled-icons/fa-regular/Envelope'
 import { ExternalLinkSquareAlt } from '@styled-icons/fa-solid/ExternalLinkSquareAlt'
 import { FormattedMessage, injectIntl } from 'react-intl'
-import { GlobeAmericas, MapMarked } from '@styled-icons/fa-solid'
+import { GlobeAmericas, MapMarked, MapPin } from '@styled-icons/fa-solid'
 import { GraduationCap } from '@styled-icons/fa-solid/GraduationCap'
 import { History } from '@styled-icons/fa-solid/History'
 import { Undo } from '@styled-icons/fa-solid/Undo'
@@ -82,6 +82,11 @@ class AppMenu extends Component<
     this._togglePane()
   }
 
+  _showNearby = () => {
+    this.props.setMainPanelContent(MainPanelContent.NEARBY_VIEW)
+    this._togglePane()
+  }
+
   _startOver = () => {
     const { location, reactRouterConfig } = this.props
     const { search } = location
@@ -245,6 +250,14 @@ class AppMenu extends Component<
               onClick={this._showRouteViewer}
               text={<FormattedMessage id="components.RouteViewer.shortTitle" />}
             />
+            {/* This item is duplicated by the view-switcher, but only shown on mobile
+            when the view switcher isn't shown (using css) */}
+            <AppMenuItem
+              className="app-menu-route-viewer-link"
+              icon={<MapPin />}
+              onClick={this._showNearby}
+              text={<FormattedMessage id="components.ViewSwitcher.nearby" />}
+            />
             <AppMenuItem
               icon={<Undo />}
               onClick={this._startOver}

lib/components/app/view-switcher.tsx

@@ -27,6 +27,9 @@ const ViewSwitcher = ({
   const _showRouteViewer = () => {
     setMainPanelContent(MainPanelContent.ROUTE_VIEWER)
   }
+  const _showNearby = () => {
+    setMainPanelContent(MainPanelContent.NEARBY_VIEW)
+  }
 
   const _showTripPlanner = () => {
     // setMainPanelContent(null) already includes navigation to '/'.
@@ -35,6 +38,7 @@ const ViewSwitcher = ({
 
   const tripPlannerActive = activePanel === null && !accountsActive
   const routeViewerActive = activePanel === MainPanelContent.ROUTE_VIEWER
+  const nearbyActive = activePanel === MainPanelContent.NEARBY_VIEW
 
   return (
     <div
@@ -71,6 +75,14 @@ const ViewSwitcher = ({
       >
         <FormattedMessage id="components.RouteViewer.shortTitle" />
       </Button>
+      <Button
+        aria-controls="view-switcher"
+        bsStyle="link"
+        className={`${nearbyActive ? 'active' : ''}`}
+        onClick={_showNearby}
+      >
+        <FormattedMessage id="components.ViewSwitcher.nearby" />
+      </Button>
     </div>
   )
 }

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

@@ -1,20 +1,20 @@
 import { connect } from 'react-redux'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import { MapRef, useMap } from 'react-map-gl'
-
-import MobileNavigationBar from '../../mobile/navigation-bar'
 import React, { useEffect, useRef, useState } from 'react'
 
 import * as apiActions from '../../../actions/api'
 import * as uiActions from '../../../actions/ui'
+import { getCurrentPosition } from '../../../actions/location'
+import Loading from '../../narrative/loading'
+import MobileContainer from '../../mobile/container'
+import MobileNavigationBar from '../../mobile/navigation-bar'
 
 import {
   FloatingLoadingIndicator,
   NearbySidebarContainer,
   Scrollable
 } from './styled'
-import Loading from '../../narrative/loading'
-import MobileContainer from '../../mobile/container'
 import RentalStation from './rental-station'
 import Stop from './stop'
 import Vehicle from './vehicle-rent'
@@ -26,11 +26,17 @@ type LatLonObj = { lat: number; lon: number }
 
 type Props = {
   fetchNearby: (latLon: LatLonObj, map?: MapRef) => void
+  getCurrentPosition?: (
+    intl: IntlShape,
+    setAsType?: boolean,
+    onSuccess?: (position: GeolocationPosition) => void
+  ) => void
   hideBackButton?: boolean
   mobile?: boolean
   nearby: any
   nearbyViewCoords?: LatLonObj
   setMainPanelContent: (content: number) => void
+  viewNearby?: (pos: LatLonObj) => void
 }
 
 const getNearbyItem = (place: any) => {
@@ -58,8 +64,15 @@ const getNearbyItemList = (nearby: any) => {
 }
 
 function NearbyView(props: Props): JSX.Element {
-  const { fetchNearby, mobile, nearby, nearbyViewCoords, setMainPanelContent } =
-    props
+  const {
+    fetchNearby,
+    getCurrentPosition: getPosition,
+    mobile,
+    nearby,
+    nearbyViewCoords,
+    setMainPanelContent,
+    viewNearby
+  } = props
   const map = useMap().current
   const intl = useIntl()
   const [loading, setLoading] = useState(true)
@@ -76,6 +89,12 @@ function NearbyView(props: Props): JSX.Element {
       return function cleanup() {
         clearInterval(interval)
       }
+    } else {
+      if (getPosition && viewNearby) {
+        getPosition(intl, false, (pos) => {
+          viewNearby({ lat: pos.coords.latitude, lon: pos.coords.longitude })
+        })
+      }
     }
   }, [nearbyViewCoords])
 
@@ -131,7 +150,9 @@ const mapStateToProps = (state: any) => {
 
 const mapDispatchToProps = {
   fetchNearby: apiActions.fetchNearby,
-  setMainPanelContent: uiActions.setMainPanelContent
+  getCurrentPosition,
+  setMainPanelContent: uiActions.setMainPanelContent,
+  viewNearby: uiActions.viewNearby
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(NearbyView)