fix(RouteViewer): Fetch positions in route and pattern views.

This is done using new component VehiclePositionRetriever.

lib/components/viewers/route-viewer.js

@@ -31,6 +31,7 @@ import PageTitle from '../util/page-title'
 
 import { RouteName, RouteRow } from './RouteRow'
 import RouteDetails from './route-details'
+import VehiclePositionRetriever from './vehicle-position-retriever'
 
 class RouteViewer extends Component {
   static propTypes = {
@@ -186,6 +187,7 @@ class RouteViewer extends Component {
           }}
         >
           <PageTitle title={this.getTitle()} />
+          <VehiclePositionRetriever />
           {/* Header Block */}
           <div
             className="route-viewer-header"
@@ -228,6 +230,7 @@ class RouteViewer extends Component {
 
     return (
       <div className="route-viewer">
+        <VehiclePositionRetriever />
         <PageTitle title={this.getTitle()} />
         {/* Header Block */}
         <div className="route-viewer-header">

lib/components/viewers/vehicle-position-retriever.ts

@@ -0,0 +1,72 @@
+import { connect } from 'react-redux'
+import { useCallback, useEffect, useState } from 'react'
+
+import * as apiActions from '../../actions/api'
+
+interface Props {
+  getVehiclePositionsForRoute: (id: string) => void
+  refreshSeconds: number
+  routeId?: string
+}
+
+/**
+ * Non-visual component that retrieves vehicle positions for the given route.
+ */
+const VehiclePositionRetriever = ({
+  getVehiclePositionsForRoute,
+  refreshSeconds,
+  routeId
+}: Props) => {
+  const [refreshTimer, setRefreshTimer] = useState<NodeJS.Timeout | null>(null)
+
+  const refreshVehiclePositions = useCallback(() => {
+    if (routeId) {
+      getVehiclePositionsForRoute(routeId)
+    }
+  }, [routeId, getVehiclePositionsForRoute])
+
+  useEffect(() => {
+    // Fetch vehicle positions when initially mounting component and a route id is available.
+    if (routeId) {
+      refreshVehiclePositions()
+
+      if (!refreshTimer) {
+        console.log('Set up timer for route ' + routeId || '')
+        // Refresh vehicle positions per interval set in config.
+        setRefreshTimer(
+          setInterval(refreshVehiclePositions, refreshSeconds * 1000)
+        )
+      }
+    }
+
+    return () => {
+      console.log('Veh pos retrieve unmounting for route ' + routeId || '')
+      // Stop refreshing vehicle positions for the specified route when this component unmounts.
+      if (refreshTimer) {
+        clearInterval(refreshTimer)
+        setRefreshTimer(null)
+      }
+    }
+  }, [routeId, refreshVehiclePositions, refreshTimer, refreshSeconds])
+
+  // Component renders nothing.
+  return null
+}
+
+// connect to redux store
+const mapStateToProps = (state: any) => {
+  return {
+    refreshSeconds:
+      state.otp.config.routeViewer?.vehiclePositionRefreshSeconds || 30,
+    routeId: state.otp.ui.viewedRoute?.routeId
+  }
+}
+
+const mapDispatchToProps = {
+  getVehiclePositionsForRoute: apiActions.getVehiclePositionsForRoute
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(VehiclePositionRetriever)