Merge pull request #2475 from HSLdevcom/DT-2727

DT-2727
HSLdevcom · Sep 11, 2018 · 8f664a4 · 8f664a4
2 parents 85228f8 + f534254
commit 8f664a4
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 43 deletions.
diff --git a/app/component/DepartureListContainer.js b/app/component/DepartureListContainer.js
@@ -21,8 +21,8 @@ const asDepartures = stoptimes =>
     : stoptimes.map(stoptime => {
         const isArrival = stoptime.pickupType === 'NONE';
         /* OTP returns either scheduled time or realtime prediction in
-       * 'realtimeDeparture' and 'realtimeArrival' fields.
-       * EXCEPT when state is CANCELLED, then it returns -1 for realtime  */
+           * 'realtimeDeparture' and 'realtimeArrival' fields.
+           * EXCEPT when state is CANCELLED, then it returns -1 for realtime  */
         const canceled = stoptime.realtimeState === 'CANCELED';
         const arrivalTime =
           stoptime.serviceDay +

diff --git a/app/component/StopPageContentContainer.js b/app/component/StopPageContentContainer.js
@@ -3,6 +3,7 @@ import React from 'react';
 import Relay from 'react-relay/classic';
 import some from 'lodash/some';
 import mapProps from 'recompose/mapProps';
+import connectToStores from 'fluxible-addons-react/connectToStores';
 
 import StopPageTabContainer from './StopPageTabContainer';
 import DepartureListHeader from './DepartureListHeader';
@@ -23,9 +24,11 @@ class StopPageContentOptions extends React.Component {
       variables: PropTypes.shape({
         date: PropTypes.string.isRequired,
       }).isRequired,
+      setVariables: PropTypes.func.isRequired,
     }).isRequired,
     initialDate: PropTypes.string.isRequired,
     setDate: PropTypes.func.isRequired,
+    currentTime: PropTypes.number.isRequired,
   };
 
   static defaultProps = {
@@ -39,6 +42,13 @@ class StopPageContentOptions extends React.Component {
     };
   }
 
+  componentWillReceiveProps({ relay, currentTime }) {
+    const currUnix = this.props.currentTime;
+    if (currUnix !== currentTime) {
+      relay.setVariables({ startTime: currUnix });
+    }
+  }
+
   onDateChange = ({ target }) => {
     this.props.setDate(target.value);
   };
@@ -102,6 +112,7 @@ const StopPageContent = withBreakpoint(
         relay={props.relay}
         initialDate={props.initialDate}
         setDate={props.setDate}
+        currentTime={props.currentTime}
       />
     ),
 );
@@ -119,9 +130,15 @@ StopPageContentOrEmpty.propTypes = {
   }).isRequired,
 };
 
-export default Relay.createContainer(StopPageContentOrEmpty, {
-  fragments: {
-    stop: ({ date }) => Relay.QL`
+export default Relay.createContainer(
+  connectToStores(StopPageContentOrEmpty, ['TimeStore'], ({ getStore }) => ({
+    currentTime: getStore('TimeStore')
+      .getCurrentTime()
+      .unix(),
+  })),
+  {
+    fragments: {
+      stop: ({ date }) => Relay.QL`
       fragment on Stop {
         url
         stoptimes: stoptimesWithoutPatterns(startTime: $startTime, timeRange: $timeRange, numberOfDepartures: $numberOfDepartures) {
@@ -130,12 +147,13 @@ export default Relay.createContainer(StopPageContentOrEmpty, {
         ${TimetableContainer.getFragment('stop', { date })}
       }
     `,
-  },
+    },
 
-  initialVariables: {
-    startTime: 0,
-    timeRange: 3600 * 12,
-    numberOfDepartures: 100,
-    date: null,
+    initialVariables: {
+      startTime: 0,
+      timeRange: 3600 * 12,
+      numberOfDepartures: 100,
+      date: null,
+    },
   },
-});
+);
diff --git a/app/component/TripStopListContainer.js b/app/component/TripStopListContainer.js
@@ -18,6 +18,9 @@ class TripStopListContainer extends React.PureComponent {
     vehicles: PropTypes.object,
     locationState: PropTypes.object.isRequired,
     currentTime: PropTypes.object.isRequired,
+    relay: PropTypes.shape({
+      forceFetch: PropTypes.func.isRequired,
+    }).isRequired,
     tripStart: PropTypes.string.isRequired,
     breakpoint: PropTypes.string,
   };
@@ -37,6 +40,13 @@ class TripStopListContainer extends React.PureComponent {
     }
   }
 
+  componentWillReceiveProps({ relay, currentTime }) {
+    const currUnix = this.props.currentTime.unix();
+    const nextUnix = currentTime.unix();
+    if (currUnix !== nextUnix) {
+      relay.forceFetch();
+    }
+  }
   componentDidUpdate() {
     if (this.props.breakpoint === 'large' && !this.state.hasScrolled) {
       this.scrollToSelectedTailIcon();

diff --git a/app/component/map/popups/StopMarkerPopup.js b/app/component/map/popups/StopMarkerPopup.js
@@ -2,6 +2,8 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Relay from 'react-relay/classic';
+import connectToStores from 'fluxible-addons-react/connectToStores';
+
 import PopupMock from './PopupMock';
 import MarkerPopupBottom from '../MarkerPopupBottom';
 import StopCardContainer from '../../StopCardContainer';
@@ -13,45 +15,61 @@ const NUMBER_OF_DEPARTURES = 5;
 const STOP_TIME_RANGE = 12 * 60 * 60;
 const TERMINAL_TIME_RANGE = 60 * 60;
 
-function StopMarkerPopup(props) {
-  const stop = props.stop || props.terminal;
-  const terminal = props.terminal !== null;
+class StopMarkerPopup extends React.PureComponent {
+  componentWillReceiveProps({ relay, currentTime }) {
+    const currUnix = this.props.currentTime;
+    if (currUnix !== currentTime) {
+      relay.setVariables({ currentTime: currUnix });
+    }
+  }
+  render() {
+    const stop = this.props.stop || this.props.terminal;
+    const terminal = this.props.terminal !== null;
 
-  return (
-    <div className="card">
-      <StopCardContainer
-        stop={stop}
-        numberOfDepartures={(terminal ? 3 : 1) * NUMBER_OF_DEPARTURES}
-        startTime={props.relay.variables.currentTime}
-        isTerminal={terminal}
-        timeRange={terminal ? TERMINAL_TIME_RANGE : STOP_TIME_RANGE}
-        limit={NUMBER_OF_DEPARTURES}
-        className="padding-small cursor-pointer"
-      />
-      <MarkerPopupBottom
-        location={{
-          address: stop.name,
-          lat: stop.lat,
-          lon: stop.lon,
-        }}
-      />
-    </div>
-  );
+    return (
+      <div className="card">
+        <StopCardContainer
+          stop={stop}
+          numberOfDepartures={(terminal ? 3 : 1) * NUMBER_OF_DEPARTURES}
+          startTime={this.props.relay.variables.currentTime}
+          isTerminal={terminal}
+          timeRange={terminal ? TERMINAL_TIME_RANGE : STOP_TIME_RANGE}
+          limit={NUMBER_OF_DEPARTURES}
+          className="padding-small cursor-pointer"
+        />
+        <MarkerPopupBottom
+          location={{
+            address: stop.name,
+            lat: stop.lat,
+            lon: stop.lon,
+          }}
+        />
+      </div>
+    );
+  }
 }
 
 StopMarkerPopup.propTypes = {
   stop: PropTypes.object,
   terminal: PropTypes.object,
+  currentTime: PropTypes.number.isRequired,
   relay: PropTypes.shape({
     variables: PropTypes.shape({
       currentTime: PropTypes.number.isRequired,
     }).isRequired,
+    setVariables: PropTypes.func.isRequired,
   }).isRequired,
 };
 
-const StopMarkerPopupContainer = Relay.createContainer(StopMarkerPopup, {
-  fragments: {
-    stop: ({ currentTime }) => Relay.QL`
+const StopMarkerPopupContainer = Relay.createContainer(
+  connectToStores(StopMarkerPopup, ['TimeStore'], ({ getStore }) => ({
+    currentTime: getStore('TimeStore')
+      .getCurrentTime()
+      .unix(),
+  })),
+  {
+    fragments: {
+      stop: ({ currentTime }) => Relay.QL`
       fragment on Stop{
         gtfsId
         lat
@@ -64,7 +82,7 @@ const StopMarkerPopupContainer = Relay.createContainer(StopMarkerPopup, {
         })}
       }
     `,
-    terminal: ({ currentTime }) => Relay.QL`
+      terminal: ({ currentTime }) => Relay.QL`
       fragment on Stop{
         gtfsId
         lat
@@ -78,11 +96,12 @@ const StopMarkerPopupContainer = Relay.createContainer(StopMarkerPopup, {
         })}
       }
     `,
+    },
+    initialVariables: {
+      currentTime: 0,
+    },
   },
-  initialVariables: {
-    currentTime: 0,
-  },
-});
+);
 
 StopMarkerPopupContainer.displayName = 'StopMarkerPopup';