AB#724 Refactor mapLayerStore into react context

app/client/app.js

@@ -3,7 +3,6 @@ import Fluxible from 'fluxible';
 import routes from '../routes/routes';
 import PositionStore from '../store/PositionStore';
 import RealTimeInformationStore from '../store/RealTimeInformationStore';
-import MapLayerStore from '../store/MapLayerStore';
 
 export default config => {
   const app = new Fluxible({
@@ -12,7 +11,6 @@ export default config => {
 
   app.registerStore(PositionStore);
   app.registerStore(RealTimeInformationStore);
-  app.registerStore(MapLayerStore);
 
   app.plug({
     name: 'extra-context-plugin',

app/client/client.jsx

@@ -39,6 +39,7 @@ import favouriteStore from '../data/FavouriteData';
 import searchContext from '../data/SearchContext';
 import { ConfigProvider } from './ConfigContext';
 import { FavouriteProvider } from '../hooks/FavouriteContext';
+import { MapLayerProvider } from '../hooks/MapLayerContext';
 import { MessageProvider } from '../hooks/MessageContext';
 import { TimeProvider } from '../hooks/TimeContext';
 import { ItineraryLocationProvider } from '../hooks/ItineraryLocationContext';
@@ -69,6 +70,7 @@ const AppProviders = props => {
     [RelayEnvironmentProvider, { environment: props.environment }],
     [MessageProvider],
     [FavouriteProvider],
+    [MapLayerProvider],
     [TimeProvider],
     [ItineraryLocationProvider],
   ];

app/component/itinerary/ItineraryPage.jsx

@@ -6,18 +6,19 @@ import PropTypes from 'prop-types';
 import React, {
   cloneElement,
   useEffect,
+  useContext,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { fetchQuery } from 'react-relay';
+import { fetchQuery, ReactRelayContext } from 'react-relay';
 import { useRouter } from 'found';
+import { useBreakpoint } from '../../../utils/client/withBreakpoint';
 import { saveFutureRoute } from '../../../utils/client/storeUtils';
 import { startLocationWatch } from '../../action/PositionActions';
 import { saveSearch } from '../../data/SearchHistory';
 import { TransportMode } from '../../../utils/shared/constants';
-import { mapLayerShape } from '../../store/MapLayerStore';
 import {
   clearLatestNavigatorItinerary,
   getDialogState,
@@ -44,14 +45,16 @@ import {
   planQueryNeeded,
   PLANTYPE,
 } from '../../../utils/client/planParamUtil';
-import { mapLayerOptionsShape, relayShape } from '../../../utils/client/shapes';
 import { epochToTime } from '../../../utils/client/timeUtils';
+import { getMapLayerOptions } from '../../../utils/client/mapLayerUtils';
 import { getAllNetworksOfType } from '../../../utils/shared/vehicleRentalUtils';
 import { isPersonalizationEnabled } from '../../../utils/client/modeUtils';
 import {
   useFavouriteActions,
+  useFavourites,
   usePersonalizationPreferences,
 } from '../../hooks/FavouriteContext';
+import { getFavouriteRouteGtfsIds } from '../../data/FavouriteData';
 import DesktopView from '../DesktopView';
 import Loading from '../Loading';
 import MobileView from '../MobileView';
@@ -92,14 +95,18 @@ import {
   applyFeedback,
 } from './ItineraryPageUtils';
 import ItineraryTabs from './ItineraryTabs';
-import { useItineraryContext } from './context/ItineraryContext';
+import {
+  ItineraryContextProvider,
+  useItineraryContext,
+} from './context/ItineraryContext';
 import { REDUCER_ACTION_TYPES } from './context/useItineraryReducer';
 import NaviContainer from './navigator/NaviContainer';
 import NaviGeolocationInfoModal from './navigator/navigatorgeolocation/NaviGeolocationInfoModal';
 import NavigatorIntroModal from './navigator/navigatorintro/NavigatorIntroModal';
 import { planConnection } from './queries/PlanConnection';
-import { isCallAgencyLeg, hasTaxiLegs } from '../../../utils/client/legUtils';
+import { hasTaxiLegs, isCallAgencyLeg } from '../../../utils/client/legUtils';
 import { useConfigContext } from '../../client/ConfigContext';
+import { useMapLayers } from '../../hooks/MapLayerContext';
 
 const MAX_QUERY_COUNT = 4; // number of attempts to collect enough itineraries
 
@@ -147,8 +154,15 @@ const unset = { plan: {}, loading: LOADSTATE.UNSET };
 
 const noFocus = { center: undefined, zoom: undefined, bounds: undefined };
 
-export default function ItineraryPage(props, context) {
+const DEFAULT_LAYER_OPTIONS = getMapLayerOptions({
+  lockedMapLayers: ['vehicles', 'citybike', 'stop'],
+  selectedMapLayers: ['vehicles'],
+});
+
+function ItineraryPageContent(props, context) {
   const { match: routerMatch, router } = useRouter();
+  const { environment: relayEnvironment } = useContext(ReactRelayContext);
+  const breakpoint = useBreakpoint();
   // found's useRouter() exposes the globally current match. While navigating
   // away to an unrelated, paramless route (e.g. the embedded search generator
   // from MainMenu), the router context can update to the new route's match
@@ -163,6 +177,11 @@ export default function ItineraryPage(props, context) {
   }
   const match = lastValidMatchRef.current;
   const config = useConfigContext();
+  const { mapLayers } = useMapLayers({
+    notThese: ['stop', 'citybike', 'vehicles', 'scooter'],
+  });
+  const favouriteRoutes = getFavouriteRouteGtfsIds(useFavourites());
+  const defaultMapLayerOptions = DEFAULT_LAYER_OPTIONS;
   const headerRef = useRef(null);
   const mwtRef = useRef();
   const mobileRef = useRef();
@@ -236,7 +255,6 @@ export default function ItineraryPage(props, context) {
   const itineraryContext = useItineraryContext();
 
   const { executeAction } = context;
-  const { breakpoint } = props;
   const { params, location } = match;
   const { hash, secondHash } = params;
   const { query } = location;
@@ -384,7 +402,7 @@ export default function ItineraryPage(props, context) {
     for (let i = 0; i < trials; i++) {
       // eslint-disable-next-line no-await-in-loop
       const result = await fetchQuery(
-        props.relayEnvironment,
+        relayEnvironment,
         planConnection,
         planParams,
         {
@@ -1242,7 +1260,7 @@ export default function ItineraryPage(props, context) {
         recommendedItinerary.current = rateItineraries(
           plan.edges,
           weights.current,
-          props.favouriteRoutes,
+          favouriteRoutes,
         );
       }
       setCombinedMainState({ plan, loading: LOADSTATE.DONE });
@@ -1462,16 +1480,16 @@ export default function ItineraryPage(props, context) {
 
     const mapLayerOptions = itineraryContainsDepartureFromVehicleRentalStation
       ? addBikeStationMapForRentalVehicleItineraries(planEdges)
-      : props.mapLayerOptions;
+      : defaultMapLayerOptions;
 
     const flexLeg = planEdges?.[activeIndex]?.node.legs.find(leg =>
       isCallAgencyLeg(leg),
     );
-    const updatedMapLayers = { ...props.mapLayers };
     const flexRouteGtfsId = flexLeg?.route?.gtfsId.split(':')[0];
     const isFlexBus = config.flex.internal.agencies.find(
       agency => agency.split(':')[0] === flexRouteGtfsId,
     );
+    const updatedMapLayers = { ...mapLayers };
     if (isFlexBus && flexRouteGtfsId) {
       updatedMapLayers.areaStop = { routeGtfsId: flexRouteGtfsId };
     }
@@ -1649,7 +1667,7 @@ export default function ItineraryPage(props, context) {
             <NaviContainer
               focusToLeg={focusToLeg}
               focusToPoint={focusToPoint}
-              relayEnvironment={props.relayEnvironment}
+              relayEnvironment={relayEnvironment}
               setNavigation={setNavigation}
               mapRef={mwtRef.current}
               mapLayerRef={mapLayerRef}
@@ -1689,7 +1707,7 @@ export default function ItineraryPage(props, context) {
           bikePublicItineraryCount={bikePublicPlan.bikePublicItineraryCount}
           carPublicItineraryCount={carPublicPlan.carPublicItineraryCount}
           openSettings={showSettingsPanel}
-          relayEnvironment={props.relayEnvironment}
+          relayEnvironment={relayEnvironment}
           startNavigation={navigateHook}
         />
       );
@@ -1823,17 +1841,20 @@ export default function ItineraryPage(props, context) {
   );
 }
 
-ItineraryPage.contextTypes = {
+ItineraryPageContent.contextTypes = {
   executeAction: PropTypes.func.isRequired,
   getStore: PropTypes.func,
 };
 
-ItineraryPage.propTypes = {
+ItineraryPageContent.propTypes = {
   content: PropTypes.node,
   map: PropTypes.shape({ type: PropTypes.func.isRequired }),
-  breakpoint: PropTypes.string.isRequired,
-  relayEnvironment: relayShape.isRequired,
-  mapLayers: mapLayerShape.isRequired,
-  mapLayerOptions: mapLayerOptionsShape.isRequired,
-  favouriteRoutes: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
+
+export default function ItineraryPage(props) {
+  return (
+    <ItineraryContextProvider>
+      <ItineraryPageContent {...props} />
+    </ItineraryContextProvider>
+  );
+}

app/component/map/IndexPageMap.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { connectToStores } from 'fluxible-addons-react';
 import { useMatch } from 'found';
 import MapWithTracking from './MapWithTracking';
 import { sameLocations } from '../../../utils/shared/path';
 import { useConfigContext } from '../../client/ConfigContext';
-// eslint-disable-next-line import/no-named-as-default
-import { mapLayerShape } from '../../store/MapLayerStore';
+import { useMapLayers } from '../../hooks/MapLayerContext';
 import CookieSettingsButton from '../CookieSettingsButton';
 import LocationMarker from './LocationMarker';
 import {
@@ -17,8 +15,9 @@ import {
 let focus = {};
 const mwtProps = {};
 
-function IndexPageMap({ mapLayers }) {
+function IndexPageMap() {
   const config = useConfigContext();
+  const { mapLayers } = useMapLayers();
   const match = useMatch();
   const origin = useOrigin();
   const destination = useDestination();
@@ -96,16 +95,4 @@ function IndexPageMap({ mapLayers }) {
   );
 }
 
-IndexPageMap.propTypes = {
-  mapLayers: mapLayerShape.isRequired,
-};
-
-const IndexPageMapWithStores = connectToStores(
-  IndexPageMap,
-  ['MapLayerStore'],
-  ({ getStore }) => ({
-    mapLayers: getStore('MapLayerStore').getMapLayers(),
-  }),
-);
-
-export { IndexPageMapWithStores as default, IndexPageMap as Component };
+export default IndexPageMap;

app/component/map/Map.jsx

@@ -21,8 +21,8 @@ import { boundWithMinimumArea } from '../../../utils/shared/geo-utils';
 import events from '../../../utils/client/events';
 import { getLayerBaseUrl } from '../../../utils/client/mapLayerUtils';
 import GeoJSON from './GeoJSON';
-import { mapLayerShape } from '../../store/MapLayerStore';
 import { useConfigContext } from '../../client/ConfigContext';
+import { mapLayerShape } from '../../../utils/client/shapes';
 
 const zoomOutText = `<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_minus"/></svg>`;
 const zoomInText = `<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_plus"/></svg>`;