AB#74 refactor near you view

app/component/DepartureRow.js

@@ -50,7 +50,7 @@ export default function DepartureRow(
   let backgroundShape;
   let sr;
   if (
-    route?.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
+    route.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
       ?.length > 0
   ) {
     const alert = getMostSevereAlert(route);
@@ -72,7 +72,7 @@ export default function DepartureRow(
   const headsign =
     departure.headsign ||
     trip.tripHeadsign ||
-    getHeadsignFromRouteLongName(trip.route);
+    getHeadsignFromRouteLongName(route);
   let shownTime;
   if (timeDiffInMinutes <= 0) {
     shownTime = intl.formatMessage({
@@ -90,7 +90,7 @@ export default function DepartureRow(
       { minutes: timeDiffInMinutes },
     );
   }
-  const { shortName } = trip.route;
+  const { shortName } = route;
   const lowerCaseShortName = shortName?.toLowerCase();
   const nameOrIcon =
     shortName?.length > 6 || !shortName?.length ? (
@@ -163,7 +163,7 @@ export default function DepartureRow(
         className={cx('route-number-container', {
           long: shortName && shortName.length <= 6 && shortName.length >= 5,
         })}
-        style={{ backgroundColor: `#${trip.route.color}` }}
+        style={{ backgroundColor: `#${route.color}` }}
       >
         <div aria-hidden="true" className="route-number">
           {nameOrIcon}
@@ -185,7 +185,7 @@ export default function DepartureRow(
       </td>
       <td className={cx('route-headsign', departure.bottomRow ? 'bottom' : '')}>
         <div className="headsign">
-          {headsign} {departure.bottomRow && departure.bottomRow}
+          {headsign} {departure.bottomRow}
         </div>
       </td>
       <td className="time-cell">

app/component/IndexPage.js

@@ -229,49 +229,53 @@ class IndexPage extends React.Component {
     const { intl, config } = this.context;
     const { colors, fontWeights } = config;
     const { lang } = this.props;
-    const transportModes = getTransportModes(config);
     const nearYouModes = getNearYouModes(config);
-
-    // Styles are defined by which button type is configured (narrow/wide)
-    const narrowButtons = config.narrowNearYouButtons;
-    const modeTitles = filterObject(
-      transportModes,
-      'availableForSelection',
-      true,
-    );
     // If nearYouModes is configured, display those. Otherwise, display all configured transport modes
-    const modes =
-      nearYouModes?.length > 0 ? nearYouModes : Object.keys(modeTitles);
+    const modeArray =
+      nearYouModes.length > 0
+        ? nearYouModes
+        : Object.keys(
+            filterObject(
+              getTransportModes(config),
+              'availableForSelection',
+              true,
+            ),
+          );
 
     const alertsContext = {
       currentTime: this.props.currentTime,
       getModesWithAlerts,
       feedIds: config.feedIds,
     };
 
+    const directionProps = config.narrowNearYouButtons
+      ? { modeSet: config.iconModeSet }
+      : {
+          buttonStyle: config.nearYouButton,
+          modeSet: config.nearYouModeSet,
+          horizontal: false,
+        };
+
     return config.showNearYouButtons ? (
       <CtrlPanel.NearStopsAndRoutes
-        modeArray={modes}
+        modeArray={modeArray}
         urlPrefix={`/${PREFIX_NEARYOU}`}
         language={lang}
-        showTitle
+        title={config.nearYouTitle}
         alertsContext={alertsContext}
         origin={this.props.origin}
         omitLanguageUrl
         onClick={this.clickStopNearIcon}
-        buttonStyle={narrowButtons ? undefined : config.nearYouButton}
-        title={narrowButtons ? undefined : config.nearYouTitle}
-        modes={narrowButtons ? undefined : modeTitles}
-        modeSet={config.nearbyModeSet || config.iconModeSet}
         modeIconColors={colors.iconColors}
         fontWeights={fontWeights}
+        {...directionProps}
       />
     ) : (
       <div className="stops-near-you-text">
         <h2>
           {intl.formatMessage({
-            id: 'stop-near-you-title',
-            defaultMessage: 'Stops and lines near you',
+            id: 'near-you-search',
+            defaultMessage: 'Search stops and routes',
           })}
         </h2>
       </div>
@@ -288,12 +292,15 @@ class IndexPage extends React.Component {
     const { breakpoint, lang } = this.props;
     const origin = this.pendingOrigin || this.props.origin;
     const destination = this.pendingDestination || this.props.destination;
+    const locationSources = ['History', 'Datasource'];
     const sources = ['Favourite', 'History', 'Datasource'];
     const stopAndRouteSearchTargets = ['Stations', 'Stops', 'Routes'];
     const targets = getLocationSearchTargets(config, breakpoint !== 'large');
 
     targets.push('FutureRoutes');
-
+    if (this.context.getStore('FavouriteStore').getLocationCount()) {
+      locationSources.push('Favourite');
+    }
     if (!config.targetsFromOTP) {
       if (useCitybikes(config.vehicleRental?.networks, config)) {
         stopAndRouteSearchTargets.push('VehicleRentalStations');
@@ -312,7 +319,7 @@ class IndexPage extends React.Component {
       origin,
       destination,
       lang,
-      sources,
+      locationSources,
       targets,
       color,
       hoverColor,

app/component/itinerary/OriginDestinationBar.js

@@ -186,7 +186,7 @@ const connectedComponent = connectToStores(
   ['PreferencesStore', 'FavouriteStore', 'ViaPointStore', 'PositionStore'],
   ({ getStore }) => ({
     language: getStore('PreferencesStore').getLanguage(),
-    showFavourites: getStore('FavouriteStore').getStatus() === 'has-data',
+    showFavourites: getStore('FavouriteStore').getLocationCount() > 0,
     viaPoints: getStore('ViaPointStore').getViaPoints(),
     locationState: getStore('PositionStore').getLocationState(),
   }),