From e23cdf95f0e6110fbdd855adc58c3981bca6e4b4 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Thu, 21 Nov 2024 14:37:57 +0200 Subject: [PATCH 1/2] feat: utili func for configuring search targets --- app/component/WithSearchContext.js | 32 ++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/app/component/WithSearchContext.js b/app/component/WithSearchContext.js index 2f4521d874..7ef2c7f8f2 100644 --- 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, From 41f6b7073bcbc35d90c2c22b48df092e3ba5b4e0 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Thu, 21 Nov 2024 14:38:26 +0200 Subject: [PATCH 2/2] fix: use search target configuration utility everywhere --- .../EmbeddedSearch/EmbeddedSearch.js | 20 ++++------ app/component/EmbeddedSearchGenerator.js | 15 +++---- app/component/FavouritesContainer.js | 28 +++++-------- app/component/IndexPage.js | 39 ++++++------------- .../itinerary/OriginDestinationBar.js | 13 +++---- app/component/nearyou/NearYouPage.js | 31 ++++++--------- app/component/nearyou/StopsNearYouSearch.js | 2 +- 7 files changed, 50 insertions(+), 98 deletions(-) diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js index 480d7c8422..b6fbc1acf7 100644 --- 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) => { {i18next.t('search-fields-sr-instructions')} - +
{logo ? ( { 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 && (
{ {searchDestinationDefined && (
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 ( } diff --git a/app/component/IndexPage.js b/app/component/IndexPage.js index b737c62ba7..534ee2c060 100644 --- 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" /> - +
@@ -483,7 +467,6 @@ class IndexPage extends React.Component {
diff --git a/app/component/itinerary/OriginDestinationBar.js b/app/component/itinerary/OriginDestinationBar.js index 0af108f125..4995bec2ff 100644 --- 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} diff --git a/app/component/nearyou/NearYouPage.js b/app/component/nearyou/NearYouPage.js index c2aa0f97ac..a80a836104 100644 --- a/app/component/nearyou/NearYouPage.js +++ b/app/component/nearyou/NearYouPage.js @@ -29,7 +29,10 @@ import { getReadMessageIds, setReadMessageIds, } from '../../store/localStorage'; -import withSearchContext from '../WithSearchContext'; +import { + withSearchContext, + getLocationSearchTargets, +} from '../WithSearchContext'; import { PREFIX_NEARYOU } from '../../util/path'; import StopsNearYouContainer from './StopsNearYouContainer'; import SwipeableTabs from '../SwipeableTabs'; @@ -387,6 +390,7 @@ class NearYouPage extends React.Component { const renderRefetchButton = centerOfMapChanged && !noFavorites; const nearByStopModes = this.modes; const index = nearByStopModes.indexOf(mode); + const { config } = this.context; const tabs = nearByStopModes.map(nearByStopMode => { const renderSearch = nearByStopMode !== 'FERRY' && nearByStopMode !== 'FAVORITE'; @@ -459,7 +463,7 @@ class NearYouPage extends React.Component { variables={this.getQueryVariables(nearByStopMode)} environment={this.props.relayEnvironment} render={({ props }) => { - const { vehicleRental } = this.context.config; + const { vehicleRental } = config; // Use buy instructions if available const cityBikeBuyUrl = vehicleRental.buyUrl; const buyInstructions = cityBikeBuyUrl @@ -471,20 +475,18 @@ class NearYouPage extends React.Component { if (Object.keys(vehicleRental.networks).length === 1) { cityBikeNetworkUrl = getRentalNetworkConfig( getRentalNetworkId(Object.keys(vehicleRental.networks)), - this.context.config, + config, ).url; } const prioritizedStops = - this.context.config.prioritizedStopsNearYou[ - nearByStopMode.toLowerCase() - ]; + config.prioritizedStopsNearYou[nearByStopMode.toLowerCase()]; return (
{renderDisruptionBanner && ( )} {renderSearch && ( @@ -517,7 +519,7 @@ class NearYouPage extends React.Component { role="button" >
@@ -828,18 +830,7 @@ class NearYouPage extends React.Component { modeSet: this.context.config.iconModeSet, getAutoSuggestIcons: this.context.config.getAutoSuggestIcons, }; - const targets = ['Locations', 'Stations', 'Stops']; - if ( - useCitybikes( - this.context.config.vehicleRental?.networks, - this.context.config, - ) - ) { - targets.push('VehicleRentalStations'); - } - if (this.context.config.includeParkAndRideSuggestions && onMap) { - targets.push('ParkingAreas'); - } + const targets = getLocationSearchTargets(this.context.config, false); return (