Reapply "Merge pull request #5464 from HSLdevcom/DT-6325"

This reverts commit a05ce71.

Author: vesameskanen

app/component/DisruptionBanner.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { createFragmentContainer, graphql } from 'react-relay';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import isEmpty from 'lodash/isEmpty';
 import { configShape, alertShape } from '../util/shapes';
@@ -110,37 +109,13 @@ class DisruptionBanner extends React.Component {
 }
 const DisruptionBannerWithBreakpoint = withBreakpoint(DisruptionBanner);
 
-const containerComponent = createFragmentContainer(
-  connectToStores(
-    DisruptionBannerWithBreakpoint,
-    ['TimeStore', 'PreferencesStore'],
-    ({ getStore }) => ({
-      currentTime: getStore('TimeStore').getCurrentTime(),
-      language: getStore('PreferencesStore').getLanguage(),
-    }),
-  ),
-  {
-    alerts: graphql`
-      fragment DisruptionBanner_alerts on Alert @relay(plural: true) {
-        feed
-        id
-        alertSeverityLevel
-        alertHeaderText
-        alertEffect
-        alertCause
-        alertDescriptionText
-        effectiveStartDate
-        effectiveEndDate
-        entities {
-          __typename
-          ... on Route {
-            mode
-            shortName
-          }
-        }
-      }
-    `,
-  },
+const containerComponent = connectToStores(
+  DisruptionBannerWithBreakpoint,
+  ['TimeStore', 'PreferencesStore'],
+  ({ getStore }) => ({
+    currentTime: getStore('TimeStore').getCurrentTime(),
+    language: getStore('PreferencesStore').getLanguage(),
+  }),
 );
 
 export { containerComponent as default, DisruptionBanner as Component };

app/component/map/NearYouMap.js

@@ -117,7 +117,13 @@ const handleBounds = (location, edges) => {
 };
 
 const getLocationMarker = location => {
-  return <LocationMarker position={location} type="from" />;
+  return (
+    <LocationMarker
+      key={`from-${location.lat}:${location.lat}`}
+      position={location}
+      type="from"
+    />
+  );
 };
 
 function NearYouMap(

app/component/nearyou/NearYouPage.js

@@ -22,7 +22,6 @@ import {
   checkPositioningPermission,
   startLocationWatch,
 } from '../../action/PositionActions';
-import DisruptionBanner from '../DisruptionBanner';
 import StopsNearYouSearch from './StopsNearYouSearch';
 import {
   getGeolocationState,
@@ -247,7 +246,6 @@ class NearYouPage extends React.Component {
       filterByModes: modes,
       filterByPlaceTypes: placeTypes,
       omitNonPickups: this.context.config.omitNonPickups,
-      feedIds: this.context.config.feedIds,
       prioritizedStopIds: prioritizedStops,
       filterByNetwork: allowedNetworks,
     };
@@ -438,7 +436,6 @@ class NearYouPage extends React.Component {
                 $maxResults: Int!
                 $maxDistance: Int!
                 $omitNonPickups: Boolean!
-                $feedIds: [String!]
                 $filterByNetwork: [String!]
               ) {
                 stopPatterns: viewer {
@@ -455,9 +452,6 @@ class NearYouPage extends React.Component {
                       filterByNetwork: $filterByNetwork
                     )
                 }
-                alerts: alerts(feeds: $feedIds, severityLevel: [SEVERE]) {
-                  ...DisruptionBanner_alerts
-                }
               }
             `}
             variables={this.getQueryVariables(nearByStopMode)}
@@ -482,13 +476,6 @@ class NearYouPage extends React.Component {
                 config.prioritizedStopsNearYou[nearByStopMode.toLowerCase()];
               return (
                 <div className="stops-near-you-page">
-                  {renderDisruptionBanner && (
-                    <DisruptionBanner
-                      alerts={(props && props.alerts) || []}
-                      mode={nearByStopMode}
-                      trafficNowLink={config.trafficNowLink}
-                    />
-                  )}
                   {renderSearch && (
                     <StopsNearYouSearch
                       mode={nearByStopMode}
@@ -623,6 +610,8 @@ class NearYouPage extends React.Component {
                       stopPatterns={props.stopPatterns}
                       position={this.state.searchPosition}
                       withSeparator={!renderSearch}
+                      nearByStopMode={nearByStopMode}
+                      renderDisruptionBanner={renderDisruptionBanner}
                     />
                   )}
                 </div>

app/component/nearyou/StopsNearYouContainer.js

@@ -15,6 +15,7 @@ import CityBikeStopNearYou from './VehicleRentalStationNearYou';
 import Loading from '../Loading';
 import Icon from '../Icon';
 import { getDefaultNetworks } from '../../util/vehicleRentalUtils';
+import DisruptionBanner from '../DisruptionBanner';
 
 class StopsNearYouContainer extends React.Component {
   static propTypes = {
@@ -33,12 +34,15 @@ class StopsNearYouContainer extends React.Component {
     }).isRequired,
     withSeparator: PropTypes.bool,
     prioritizedStops: PropTypes.arrayOf(PropTypes.string),
+    nearByStopMode: PropTypes.string.isRequired,
+    renderDisruptionBanner: PropTypes.bool,
   };
 
   static defaultProps = {
     stopPatterns: undefined,
     withSeparator: false,
     prioritizedStops: undefined,
+    renderDisruptionBanner: false,
   };
 
   static contextTypes = {
@@ -254,12 +258,23 @@ class StopsNearYouContainer extends React.Component {
       />
     );
     const stops = this.createNearbyStops().filter(e => e);
+    const alerts = stops
+      .flatMap(stop => stop.props.stop?.routes || [])
+      .flatMap(route => route?.alerts || [])
+      .filter(alert => alert.alertSeverityLevel === 'SEVERE');
     const noStopsFound =
       !stops.length &&
       this.state.refetches >= this.state.maxRefetches &&
       !this.state.isLoadingmoreStops;
     return (
       <>
+        {this.props.renderDisruptionBanner && (
+          <DisruptionBanner
+            alerts={alerts || []}
+            mode={this.props.nearByStopMode}
+            trafficNowLink={this.context.config.trafficNowLink}
+          />
+        )}
         {((!this.props.relay.hasMore() &&
           !stops.length &&
           !this.props.prioritizedStops?.length) ||
@@ -389,6 +404,28 @@ const refetchContainer = createPaginationContainer(
                   ) {
                     scheduledArrival
                   }
+                  routes {
+                    ... on Route {
+                      alerts {
+                        feed
+                        id
+                        alertSeverityLevel
+                        alertHeaderText
+                        alertEffect
+                        alertCause
+                        alertDescriptionText
+                        effectiveStartDate
+                        effectiveEndDate
+                        entities {
+                          __typename
+                          ... on Route {
+                            mode
+                            shortName
+                          }
+                        }
+                      }
+                    }
+                  }
                 }
               }
             }