Merge pull request #5172 from HSLdevcom/fix-search

Refactor location search target configuration code
HSLdevcom · Nov 21, 2024 · d564555 · d564555
2 parents 33dd350 + 41f6b70
commit d564555
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 102 deletions.
diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -7,7 +7,10 @@ import CtrlPanel from '@digitransit-component/digitransit-component-control-pane
 import i18next from 'i18next';
 import { configShape } from '../../util/shapes';
 import { getRefPoint } from '../../util/apiUtils';
-import withSearchContext from '../WithSearchContext';
+import {
+  withSearchContext,
+  getLocationSearchTargets,
+} from '../WithSearchContext';
 import {
   buildQueryString,
   buildURL,
@@ -21,6 +24,8 @@ import useUTMCampaignParams from './hooks/useUTMCampaignParams';
 
 const LocationSearch = withSearchContext(DTAutosuggestPanel, true);
 
+const sources = ['Favourite', 'History', 'Datasource'];
+
 const translations = {
   fi: {
     'own-position': 'Nykyinen sijaintisi',
@@ -173,13 +178,6 @@ const EmbeddedSearch = (props, context) => {
     titleText = i18next.t('find-route');
   }
 
-  const locationSearchTargets = [
-    'Locations',
-    'CurrentPosition',
-    'FutureRoutes',
-    'Stops',
-  ];
-  const sources = ['Favourite', 'History', 'Datasource'];
   const refPoint = getRefPoint(origin, destination, {});
 
   const onSelectLocation = (item, id) => {
@@ -215,6 +213,7 @@ const EmbeddedSearch = (props, context) => {
     destination,
     lang,
     sources,
+    targets: getLocationSearchTargets(config, false),
     color,
     hoverColor,
     refPoint,
@@ -325,10 +324,7 @@ const EmbeddedSearch = (props, context) => {
           <span className="sr-only">
             {i18next.t('search-fields-sr-instructions')}
           </span>
-          <LocationSearch
-            targets={locationSearchTargets}
-            {...locationSearchProps}
-          />
+          <LocationSearch {...locationSearchProps} />
           <div className="embedded-search-button-container">
             {logo ? (
               <img

diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
@@ -6,19 +6,16 @@ import DTAutosuggest from '@digitransit-component/digitransit-component-autosugg
 import { configShape } from '../util/shapes';
 import EmbeddedSearch from './EmbeddedSearch';
 import { EMBEDDED_SEARCH_PATH } from '../util/path';
-import withSearchContext from './WithSearchContext';
 import { getRefPoint } from '../util/apiUtils';
 import withBreakpoint from '../util/withBreakpoint';
+import {
+  withSearchContext,
+  getLocationSearchTargets,
+} from './WithSearchContext';
 import { isBrowser } from '../util/browser';
 
 const LocationSearch = withSearchContext(DTAutosuggest, true);
 
-const locationSearchTargets = [
-  'Locations',
-  'CurrentPosition',
-  'Stations',
-  'Stops',
-];
 const sources = ['Favourite', 'History', 'Datasource'];
 
 const languages = [
@@ -83,7 +80,7 @@ const EmbeddedSearchGenerator = (props, context) => {
     refPoint,
     lang,
     sources,
-    targets: locationSearchTargets,
+    targets: getLocationSearchTargets(config, false),
     isMobile: breakpoint !== 'large',
     color: colors.primary,
     hoverColor: colors.hover,
@@ -356,7 +353,6 @@ const EmbeddedSearchGenerator = (props, context) => {
             {searchOriginDefined && (
               <div className="location-search-wrapper">
                 <LocationSearch
-                  targets={locationSearchTargets}
                   id="origin"
                   placeholder="search-origin-index"
                   className="origin-search"
@@ -393,7 +389,6 @@ const EmbeddedSearchGenerator = (props, context) => {
             {searchDestinationDefined && (
               <div className="location-search-wrapper">
                 <LocationSearch
-                  targets={locationSearchTargets}
                   id="destination"
                   placeholder="search-destination-index"
                   className="destination-search"

diff --git a/app/component/FavouritesContainer.js b/app/component/FavouritesContainer.js
@@ -9,8 +9,10 @@ import FavouriteModal from '@digitransit-component/digitransit-component-favouri
 import FavouriteEditModal from '@digitransit-component/digitransit-component-favourite-editing-modal';
 import DialogModal from '@digitransit-component/digitransit-component-dialog-modal';
 import { configShape } from '../util/shapes';
-import withSearchContext from './WithSearchContext';
-
+import {
+  withSearchContext,
+  getLocationSearchTargets,
+} from './WithSearchContext';
 import {
   saveFavourite,
   updateFavourites,
@@ -19,7 +21,6 @@ import {
 import FavouriteStore from '../store/FavouriteStore';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import { LightenDarkenColor } from '../util/colorUtils';
-import { useCitybikes } from '../util/modeUtils';
 
 const AutoSuggestWithSearchContext = withSearchContext(AutoSuggest);
 
@@ -325,22 +326,11 @@ class FavouritesContainer extends React.Component {
     const isLoading =
       this.props.favouriteStatus === FavouriteStore.STATUS_FETCHING_OR_UPDATING;
     const { requireLoggedIn, isLoggedIn } = this.props;
-    const targets = ['Locations', 'Stations', 'CurrentPosition', 'MapPosition'];
-    const { fontWeights } = this.context.config;
+    const { config } = this.context;
+    const { fontWeights } = config;
     const favouritePlaces = this.props.favourites.filter(
       item => item.type === 'place',
     );
-    if (
-      useCitybikes(
-        this.context.config.vehicleRental?.networks,
-        this.context.config,
-      )
-    ) {
-      targets.push('VehicleRentalStations');
-    }
-    if (this.context.config.includeParkAndRideSuggestions) {
-      targets.push('ParkingAreas');
-    }
     return (
       <React.Fragment>
         <FavouriteBar
@@ -385,22 +375,22 @@ class FavouritesContainer extends React.Component {
             <AutoSuggestWithSearchContext
               appElement="#app"
               sources={['History', 'Datasource']}
-              targets={targets}
+              targets={getLocationSearchTargets(config, true)}
               id="favourite"
               icon="search"
               placeholder="search-address-or-place"
               value={
                 (this.state.favourite && this.state.favourite.address) || ''
               }
               selectHandler={this.setLocationProperties}
-              getAutoSuggestIcons={this.context.config.getAutoSuggestIcons}
+              getAutoSuggestIcons={config.getAutoSuggestIcons}
               lang={this.props.lang}
               isMobile={this.props.isMobile}
               color={this.props.color}
               hoverColor={this.props.hoverColor}
               fontWeights={fontWeights}
               required
-              modeSet={this.context.config.iconModeSet}
+              modeSet={config.iconModeSet}
               favouriteContext
             />
           }

diff --git a/app/component/IndexPage.js b/app/component/IndexPage.js
@@ -13,7 +13,10 @@ import inside from 'point-in-polygon';
 import { configShape, locationShape } from '../util/shapes';
 import storeOrigin from '../action/originActions';
 import storeDestination from '../action/destinationActions';
-import withSearchContext from './WithSearchContext';
+import {
+  withSearchContext,
+  getLocationSearchTargets,
+} from './WithSearchContext';
 import {
   getPathWithEndpointObjects,
   getStopRoutePath,
@@ -300,35 +303,18 @@ class IndexPage extends React.Component {
     const destination = this.pendingDestination || this.props.destination;
     const sources = ['Favourite', 'History', 'Datasource'];
     const stopAndRouteSearchTargets = ['Stations', 'Stops', 'Routes'];
-    let locationSearchTargets = [
-      'Locations',
-      'CurrentPosition',
-      'FutureRoutes',
-    ];
-
-    if (config.locationSearchTargetsFromOTP) {
-      // configurable setup
-      locationSearchTargets = [
-        ...locationSearchTargets,
-        ...config.locationSearchTargetsFromOTP,
-      ];
-    } else {
-      // default setup
-      locationSearchTargets.push('Stations');
-      locationSearchTargets.push('Stops');
+    const targets = getLocationSearchTargets(config, breakpoint !== 'large');
+
+    targets.push('FutureRoutes');
+
+    if (!config.targetsFromOTP) {
       if (useCitybikes(config.vehicleRental?.networks, config)) {
         stopAndRouteSearchTargets.push('VehicleRentalStations');
-        locationSearchTargets.push('VehicleRentalStations');
       }
       if (config.includeParkAndRideSuggestions) {
         stopAndRouteSearchTargets.push('ParkingAreas');
-        locationSearchTargets.push('ParkingAreas');
       }
     }
-    const locationSearchTargetsMobile = [
-      ...locationSearchTargets,
-      'MapPosition',
-    ];
 
     const showSpinner =
       (origin.type === 'CurrentLocation' && !origin.address) ||
@@ -340,6 +326,7 @@ class IndexPage extends React.Component {
       destination,
       lang,
       sources,
+      targets,
       color,
       hoverColor,
       accessiblePrimaryColor,
@@ -426,10 +413,7 @@ class IndexPage extends React.Component {
                       defaultMessage="The search is triggered automatically when origin and destination are set. Changing any search parameters triggers a new search"
                     />
                   </span>
-                  <LocationSearch
-                    targets={locationSearchTargets}
-                    {...locationSearchProps}
-                  />
+                  <LocationSearch {...locationSearchProps} />
                   <div className="datetimepicker-container">
                     <DatetimepickerContainer realtime color={color} />
                   </div>
@@ -483,7 +467,6 @@ class IndexPage extends React.Component {
                   <LocationSearch
                     disableAutoFocus
                     isMobile
-                    targets={locationSearchTargetsMobile}
                     {...locationSearchProps}
                   />
                   <div className="datetimepicker-container">

diff --git a/app/component/WithSearchContext.js b/app/component/WithSearchContext.js
@@ -6,6 +6,7 @@ import suggestionToLocation from '@digitransit-search-util/digitransit-search-ut
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import { configShape, locationStateShape } from '../util/shapes';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
+import { useCitybikes } from '../util/modeUtils';
 import {
   PREFIX_ITINERARY_SUMMARY,
   PREFIX_STOPS,
@@ -25,10 +26,33 @@ const PATH_OPTS = {
   itinerarySummaryPrefix: PREFIX_ITINERARY_SUMMARY,
 };
 
-export default function withSearchContext(
-  WrappedComponent,
-  embeddedSearch = false,
-) {
+export function getLocationSearchTargets(config, isMobile) {
+  let locationSearchTargets = ['Locations', 'CurrentPosition'];
+
+  if (config.locationSearchTargetsFromOTP) {
+    // configurable setup
+    locationSearchTargets = [
+      ...locationSearchTargets,
+      ...config.locationSearchTargetsFromOTP,
+    ];
+  } else {
+    // default setup
+    locationSearchTargets.push('Stations');
+    locationSearchTargets.push('Stops');
+    if (useCitybikes(config.vehicleRental?.networks, config)) {
+      locationSearchTargets.push('VehicleRentalStations');
+    }
+    if (config.includeParkAndRideSuggestions) {
+      locationSearchTargets.push('ParkingAreas');
+    }
+  }
+  if (isMobile) {
+    locationSearchTargets.push('MapPosition');
+  }
+  return locationSearchTargets;
+}
+
+export function withSearchContext(WrappedComponent, embeddedSearch = false) {
   class ComponentWithSearchContext extends React.Component {
     static contextTypes = {
       config: configShape.isRequired,

diff --git a/app/component/itinerary/OriginDestinationBar.js b/app/component/itinerary/OriginDestinationBar.js
@@ -11,7 +11,10 @@ import {
   locationShape,
 } from '../../util/shapes';
 import { addAnalyticsEvent } from '../../util/analyticsUtils';
-import withSearchContext from '../WithSearchContext';
+import {
+  withSearchContext,
+  getLocationSearchTargets,
+} from '../WithSearchContext';
 import {
   setIntermediatePlaces,
   updateItinerarySearch,
@@ -21,7 +24,6 @@ import { getIntermediatePlaces, locationToOTP } from '../../util/otpStrings';
 import { setViaPoints } from '../../action/ViaPointActions';
 import { LightenDarkenColor } from '../../util/colorUtils';
 import { getRefPoint } from '../../util/apiUtils';
-import { useCitybikes } from '../../util/modeUtils';
 
 const DTAutosuggestPanelWithSearchContext =
   withSearchContext(DTAutosuggestPanel);
@@ -129,11 +131,6 @@ class OriginDestinationBar extends React.Component {
       props.destination,
       props.locationState,
     );
-    const desktopTargets = ['Locations', 'CurrentPosition', 'Stops'];
-    if (useCitybikes(config.vehicleRental?.networks, config)) {
-      desktopTargets.push('VehicleRentalStations');
-    }
-    const mobileTargets = [...desktopTargets, 'MapPosition'];
     const filter = config.stopSearchFilter
       ? results => results.filter(config.stopSearchFilter)
       : undefined;
@@ -162,7 +159,7 @@ class OriginDestinationBar extends React.Component {
             'Datasource',
             props.showFavourites ? 'Favourite' : '',
           ]}
-          targets={props.isMobile ? mobileTargets : desktopTargets}
+          targets={getLocationSearchTargets(config, false)}
           lang={props.language}
           disableAutoFocus={props.isMobile}
           isMobile={props.isMobile}