AB#74 near you view refactoring for v3

app/component/AlertBanner.js

@@ -17,7 +17,8 @@ const AlertBanner = ({ alerts, linkAddress }, { config }) => {
     alert.alertSeverityLevel !== 'INFO'
       ? 'icon_caution_white_exclamation'
       : 'icon_info';
-  const iconColor = alert.alertSeverityLevel !== 'INFO' ? '#DC0451' : '#888';
+  const iconColor =
+    alert.alertSeverityLevel !== 'INFO' ? config.colors.caution : '#888';
   return (
     <Link
       className={`alert-banner-link ${alert.alertSeverityLevel.toLowerCase()}`}

app/component/DepartureRow.js

@@ -17,8 +17,8 @@ import { routePagePath, PREFIX_STOPS } from '../util/path';
 import { configShape, departureShape } from '../util/shapes';
 import { epochToTime } from '../util/timeUtils';
 import Icon from './Icon';
-import PlatformNumber from './PlatformNumber';
 import IconBackground from './icon/IconBackground';
+import PlatformNumber from './PlatformNumber';
 
 const getMostSevereAlert = route => {
   const alerts = [...getAlertsForObject(route)];
@@ -51,7 +51,7 @@ export default function DepartureRow(
   let backgroundClass;
   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);
@@ -65,17 +65,17 @@ export default function DepartureRow(
     if (alert.alertSeverityLevel === 'INFO') {
       icon = 'icon_info';
       iconColor = '#888';
-      background = <IconBackground backgroundShape="circle" />;
+      background = <IconBackground shape="circle" />;
       backgroundClass = 'circle';
     } else {
       icon = 'icon_caution-white-excl-stroke';
-      iconColor = '#DC0451';
+      iconColor = config.colors.caution;
     }
   }
   const headsign =
     departure.headsign ||
     trip.tripHeadsign ||
-    getHeadsignFromRouteLongName(trip.route);
+    getHeadsignFromRouteLongName(route);
   let shownTime;
   if (timeDiffInMinutes <= 0) {
     shownTime = intl.formatMessage({
@@ -93,7 +93,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 ? (
@@ -166,7 +166,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}
@@ -188,7 +188,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/FavouritesContainer.js

@@ -20,7 +20,6 @@ import {
 } from '../action/FavouriteActions';
 import FavouriteStore from '../store/FavouriteStore';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
-import { LightenDarkenColor } from '../util/colorUtils';
 
 const AutoSuggestWithSearchContext = withSearchContext(AutoSuggest);
 
@@ -54,8 +53,6 @@ class FavouritesContainer extends React.Component {
     favouriteModalAction: PropTypes.string,
     requireLoggedIn: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
-    color: PropTypes.string,
-    hoverColor: PropTypes.string,
   };
 
   static defaultProps = {
@@ -65,8 +62,6 @@ class FavouritesContainer extends React.Component {
     requireLoggedIn: false,
     isLoggedIn: false,
     favouriteModalAction: undefined,
-    color: undefined,
-    hoverColor: undefined,
     lang: undefined,
   };
 
@@ -250,8 +245,7 @@ class FavouritesContainer extends React.Component {
             loginModalOpen: false,
           });
         }}
-        color={this.props.color}
-        hoverColor={this.props.hoverColor}
+        colors={this.context.config.colors}
       />
     );
   };
@@ -358,7 +352,7 @@ class FavouritesContainer extends React.Component {
           }
           lang={this.props.lang}
           isLoading={isLoading}
-          color={this.props.color}
+          colors={config.colors}
           fontWeights={fontWeights}
         />
         <FavouriteModal
@@ -371,6 +365,7 @@ class FavouritesContainer extends React.Component {
           lang={this.props.lang}
           isMobile={this.props.isMobile}
           fontWeights={fontWeights}
+          colors={config.colors}
           autosuggestComponent={
             <AutoSuggestWithSearchContext
               appElement="#app"
@@ -386,16 +381,13 @@ class FavouritesContainer extends React.Component {
               getAutoSuggestIcons={config.getAutoSuggestIcons}
               lang={this.props.lang}
               isMobile={this.props.isMobile}
-              color={this.props.color}
-              hoverColor={this.props.hoverColor}
               fontWeights={fontWeights}
               required
+              colors={config.colors}
               modeSet={config.iconModeSet}
               favouriteContext
             />
           }
-          color={this.props.color}
-          hoverColor={this.props.hoverColor}
         />
         <FavouriteEditModal
           appElement="#app"
@@ -409,8 +401,7 @@ class FavouritesContainer extends React.Component {
           lang={this.props.lang}
           isMobile={this.props.isMobile}
           isLoading={isLoading}
-          color={this.props.color}
-          hoverColor={this.props.hoverColor}
+          colors={config.colors}
           fontWeights={fontWeights}
         />
         {this.renderLoginModal()}
@@ -434,10 +425,6 @@ const connectedComponent = connectToStores(
     isLoggedIn:
       context.config.allowLogin &&
       context.getStore('UserStore').getUser().sub !== undefined,
-    color: context.config.colors.primary,
-    hoverColor:
-      context.config.colors.hover ||
-      LightenDarkenColor(context.config.colors.primary, -20),
   }),
 );
 

app/component/IconWithIcon.js

@@ -49,9 +49,7 @@ const IconWithIcon = (
         <Icon
           img={subIcon}
           omitViewBox={omitViewBox}
-          background={
-            subIconShape && <IconBackground backgroundShape={subIconShape} />
-          }
+          background={subIconShape && <IconBackground shape={subIconShape} />}
         />
       </span>
     )}

app/component/IndexPage.js

@@ -34,7 +34,6 @@ import { addAnalyticsEvent } from '../util/analyticsUtils';
 import withBreakpoint from '../util/withBreakpoint';
 import Geomover from './Geomover';
 import scrollTop from '../util/scroll';
-import { LightenDarkenColor } from '../util/colorUtils';
 import { getRefPoint } from '../util/apiUtils';
 import { filterObject } from '../util/filterUtils';
 import {
@@ -229,49 +228,52 @@ 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
+      ? {}
+      : { horizontal: false };
+
     return config.showNearYouButtons ? (
       <CtrlPanel.NearStopsAndRoutes
-        modeArray={modes}
+        appElement="#app"
+        modeArray={modeArray}
+        modeSet={config.iconModeSet}
         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}
+        colors={colors}
         fontWeights={fontWeights}
+        {...directionProps}
+        isMobile={this.props.breakpoint !== 'large'}
       />
     ) : (
       <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>
@@ -282,18 +284,18 @@ class IndexPage extends React.Component {
   render() {
     const { intl, config } = this.context;
     const { trafficNowLink, colors, fontWeights } = config;
-    const color = colors.primary;
-    const hoverColor = colors.hover || LightenDarkenColor(colors.primary, -20);
-    const accessiblePrimaryColor = colors.accessiblePrimary || colors.primary;
     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,11 +314,8 @@ class IndexPage extends React.Component {
       origin,
       destination,
       lang,
-      sources,
+      locationSources,
       targets,
-      color,
-      hoverColor,
-      accessiblePrimaryColor,
       refPoint,
       searchPanelText: intl.formatMessage({
         id: 'where',
@@ -329,7 +328,7 @@ class IndexPage extends React.Component {
       onGeolocationStart: this.onSelectLocation,
       fromMap: this.props.fromMap,
       fontWeights,
-      modeIconColors: colors.iconColors,
+      colors,
       modeSet: config.iconModeSet,
     };
 
@@ -343,13 +342,10 @@ class IndexPage extends React.Component {
       getAutoSuggestIcons: config.getAutoSuggestIcons,
       value: '',
       lang,
-      color,
-      hoverColor,
-      accessiblePrimaryColor,
       sources,
       targets: stopAndRouteSearchTargets,
       fontWeights,
-      modeIconColors: colors.iconColors,
+      colors,
       modeSet: config.iconModeSet,
       geocodingSize: 25,
     };
@@ -375,13 +371,7 @@ class IndexPage extends React.Component {
           <h1 className="sr-only">
             <FormattedMessage id="index.title" default="Journey Planner" />
           </h1>
-          <CtrlPanel
-            instance="hsl"
-            language={lang}
-            origin={origin}
-            position="left"
-            fontWeights={fontWeights}
-          >
+          <CtrlPanel position="left" fontWeights={fontWeights}>
             <span className="sr-only">
               <FormattedMessage
                 id="search-fields.sr-instructions"
@@ -390,7 +380,11 @@ class IndexPage extends React.Component {
             </span>
             <LocationSearch {...locationSearchProps} />
             <div className="datetimepicker-container">
-              <DatetimepickerContainer realtime color={color} lang={lang} />
+              <DatetimepickerContainer
+                realtime
+                color={colors.primary}
+                lang={lang}
+              />
             </div>
             {!config.hideFavourites && (
               <>
@@ -433,19 +427,18 @@ class IndexPage extends React.Component {
             backgroundColor: '#ffffff',
           }}
         >
-          <CtrlPanel
-            instance="hsl"
-            language={lang}
-            position="bottom"
-            fontWeights={fontWeights}
-          >
+          <CtrlPanel position="bottom" fontWeights={fontWeights}>
             <LocationSearch
               disableAutoFocus
               isMobile
               {...locationSearchProps}
             />
             <div className="datetimepicker-container">
-              <DatetimepickerContainer realtime color={color} lang={lang} />
+              <DatetimepickerContainer
+                realtime
+                color={colors.primary}
+                lang={lang}
+              />
             </div>
             <FavouritesContainer
               onClickFavourite={this.clickFavourite}