Filter out empty stops entirely instead of rendering empty list items

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

@@ -9,26 +9,36 @@ import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
 import { AppReduxState } from '../../../util/state-types'
 import { getCurrentServiceWeek } from '../../../util/current-service-week'
-import { SetLocationHandler, ZoomToPlaceHandler } from '../../util/types'
+import {
+  PatternStopTime,
+  SetLocationHandler,
+  ZoomToPlaceHandler
+} from '../../util/types'
+import coreUtils from '@opentripplanner/core-utils'
+
+import { NearbyViewConfig } from '../../../util/config-types'
+
+import FromToPicker from './from-to-picker'
+import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 import Loading from '../../narrative/loading'
 import MobileContainer from '../../mobile/container'
 import MobileNavigationBar from '../../mobile/navigation-bar'
 import PageTitle from '../../util/page-title'
+
+import RentalStation from './rental-station'
+import Stop, { fullTimestamp, patternArrayforStops } from './stop'
+import Vehicle from './vehicle-rent'
+import VehicleParking from './vehicle-parking'
+
 import VehiclePositionRetriever from '../vehicle-position-retriever'
 
 import {
   FloatingLoadingIndicator,
   NearbySidebarContainer,
   Scrollable
 } from './styled'
-import FromToPicker from './from-to-picker'
-import InvisibleA11yLabel from '../../util/invisible-a11y-label'
-import RentalStation from './rental-station'
-import Stop from './stop'
-import Vehicle from './vehicle-rent'
-import VehicleParking from './vehicle-parking'
 
-const AUTO_REFRESH_INTERVAL = 15000
+const AUTO_REFRESH_INTERVAL = 15000000
 
 // TODO: use lonlat package
 type LatLonObj = { lat: number; lon: number }
@@ -50,8 +60,10 @@ type Props = {
   location: string
   mobile?: boolean
   nearby: any
+  nearbyViewConfig?: NearbyViewConfig
   nearbyViewCoords?: LatLonObj
   radius?: number
+  routeSortComparator: (a: PatternStopTime, b: PatternStopTime) => number
   setHighlightedLocation: (location: Location | null) => void
   setLocation: SetLocationHandler
   setMainPanelContent: (content: number) => void
@@ -118,8 +130,10 @@ function NearbyView({
   location,
   mobile,
   nearby,
+  nearbyViewConfig,
   nearbyViewCoords,
   radius,
+  routeSortComparator,
   setHighlightedLocation,
   setMainPanelContent,
   setViewedNearbyCoords,
@@ -224,9 +238,19 @@ function NearbyView({
         .flat(Infinity)
     )
   )
+
+  // If configured, filter out stops that don't have any patterns
+  const filteredNearby = nearby?.filter((n: any) => {
+    if (n.place.__typename === 'Stop' && nearbyViewConfig?.hideEmptyStops) {
+      const patternArray = patternArrayforStops(n.place, routeSortComparator)
+      if (patternArray?.length === 0) return false
+    }
+    return true
+  })
+
   const nearbyItemList =
-    nearby?.map &&
-    nearby?.map((n: any) => (
+    filteredNearby?.map &&
+    filteredNearby?.map((n: any) => (
       <li
         className={
           (n.place.gtfsId ?? n.place.id) === entityId ? 'highlighted' : ''
@@ -300,7 +324,7 @@ function NearbyView({
           !staleData &&
           (nearby.error ? (
             intl.formatMessage({ id: 'components.NearbyView.error' })
-          ) : nearby.length > 0 ? (
+          ) : filteredNearby?.length > 0 ? (
             nearbyItemList
           ) : (
             <FormattedMessage id="components.NearbyView.nothingNearby" />
@@ -313,7 +337,8 @@ function NearbyView({
 
 const mapStateToProps = (state: AppReduxState) => {
   const { config, location, transitIndex, ui } = state.otp
-  const { map, routeViewer } = config
+  const { map, nearbyView: nearbyViewConfig, routeViewer } = config
+  const transitOperators = config?.transitOperators || []
   const { nearbyViewCoords } = ui
   const { nearby } = transitIndex
   const { entityId } = state.router.location.query
@@ -326,6 +351,20 @@ const mapStateToProps = (state: AppReduxState) => {
       ? getCurrentServiceWeek()
       : undefined
 
+  // TODO: Refine so we don't have this same thing in stops.tsx
+  // Default sort: departure time
+  let routeSortComparator = (a: PatternStopTime, b: PatternStopTime) =>
+    fullTimestamp(a.stoptimes?.[0]) - fullTimestamp(b.stoptimes?.[0])
+
+  if (nearbyViewConfig?.useRouteViewSort) {
+    routeSortComparator = (a: PatternStopTime, b: PatternStopTime) =>
+      coreUtils.route.makeRouteComparator(transitOperators)(
+        // @ts-expect-error core-utils types are wrong!
+        a.pattern.route,
+        b.pattern.route
+      )
+  }
+
   return {
     currentPosition,
     currentServiceWeek,
@@ -335,8 +374,10 @@ const mapStateToProps = (state: AppReduxState) => {
     homeTimezone: config.homeTimezone,
     location: state.router.location.hash,
     nearby: nearby?.data,
+    nearbyViewConfig,
     nearbyViewCoords,
-    radius: config.nearbyView?.radius
+    radius: config.nearbyView?.radius,
+    routeSortComparator
   }
 }
 

lib/components/viewers/nearby/stop.tsx

@@ -16,7 +16,7 @@ import StopCardHeader from './stop-card-header'
 
 const { getUserTimezone } = coreUtils.time
 
-const fullTimestamp = (stoptime: StopTime) =>
+export const fullTimestamp = (stoptime: StopTime) =>
   (stoptime.serviceDay || 0) + (stoptime.realtimeDeparture || 0)
 
 type Props = {
@@ -27,14 +27,11 @@ type Props = {
   stopData: StopData & { nearbyRoutes?: string[] }
 }
 
-const Stop = ({
-  fromToSlot,
-  homeTimezone,
-  nearbyViewConfig,
-  routeSortComparator,
-  stopData
-}: Props): JSX.Element => {
-  const patternRows = (stopData.stoptimesForPatterns || [])
+export const patternArrayforStops = (
+  stopData: StopData & { nearbyRoutes?: string[] },
+  routeSortComparator: (a: PatternStopTime, b: PatternStopTime) => number
+): Array<PatternStopTime> | undefined => {
+  return stopData?.stoptimesForPatterns
     ?.reduce<PatternStopTime[]>((acc, cur) => {
       const currentHeadsign = extractHeadsignFromPattern(cur.pattern)
       const dupe = acc.findIndex((p) => {
@@ -65,39 +62,47 @@ const Stop = ({
       return acc
     }, [])
     .sort(routeSortComparator)
-    .map((st: any, index: number) => {
-      const sortedStopTimes = st.stoptimes.sort(
-        (a: StopTime, b: StopTime) => fullTimestamp(a) - fullTimestamp(b)
-      )
-      if (
-        // NearbyRoutes if present is populated with a list of routes that appear
-        // in the current service period.
-        stopData.nearbyRoutes &&
-        !stopData.nearbyRoutes.includes(st?.pattern?.route?.gtfsId)
-      ) {
-        return <></>
-      }
-      return (
-        <PatternRow
-          alwaysShowLongName={nearbyViewConfig?.alwaysShowLongName}
-          homeTimezone={homeTimezone}
-          key={index}
-          pattern={st.pattern}
-          roundedTop={false}
-          route={st.pattern.route}
-          stopTimes={sortedStopTimes}
-        />
-      )
-    })
+}
+
+const Stop = ({
+  fromToSlot,
+  homeTimezone,
+  nearbyViewConfig,
+  routeSortComparator,
+  stopData
+}: Props): JSX.Element => {
+  const patternArray = patternArrayforStops(stopData, routeSortComparator)
+  const patternRows = patternArray?.map((st: any, index: number) => {
+    const sortedStopTimes = st.stoptimes.sort(
+      (a: StopTime, b: StopTime) => fullTimestamp(a) - fullTimestamp(b)
+    )
+    if (
+      // NearbyRoutes if present is populated with a list of routes that appear
+      // in the current service period.
+      stopData.nearbyRoutes &&
+      !stopData.nearbyRoutes.includes(st?.pattern?.route?.gtfsId)
+    ) {
+      return <></>
+    }
+    return (
+      <PatternRow
+        alwaysShowLongName={nearbyViewConfig?.alwaysShowLongName}
+        homeTimezone={homeTimezone}
+        key={index}
+        pattern={st.pattern}
+        roundedTop={false}
+        route={st.pattern.route}
+        stopTimes={sortedStopTimes}
+      />
+    )
+  })
   const inHomeTimezone = homeTimezone && homeTimezone === getUserTimezone()
   const timezoneWarning = !inHomeTimezone && (
     <StyledAlert>
       <TimezoneWarning homeTimezone={homeTimezone} />
     </StyledAlert>
   )
 
-  if (nearbyViewConfig?.hideEmptyStops && patternRows.length === 0) return <></>
-
   return (
     <Card>
       <StopCardHeader