From 10e2b85baaa0be03748304de0cc17f7ea433e8f0 Mon Sep 17 00:00:00 2001 From: Teemu Date: Thu, 6 Sep 2018 17:46:21 +0300 Subject: [PATCH 1/6] Force departure lists to update according to timestore --- app/component/DepartureListContainer.js | 30 ++++++++++++++++++++----- app/component/StopCardContainer.js | 4 ++-- app/component/TripStopListContainer.js | 10 +++++++++ 3 files changed, 36 insertions(+), 8 deletions(-) diff --git a/app/component/DepartureListContainer.js b/app/component/DepartureListContainer.js index 57a4452f88..42792e087b 100644 --- a/app/component/DepartureListContainer.js +++ b/app/component/DepartureListContainer.js @@ -5,6 +5,7 @@ import filter from 'lodash/filter'; import moment from 'moment'; import { Link } from 'react-router'; import cx from 'classnames'; +import connectToStores from 'fluxible-addons-react/connectToStores'; import Departure from './Departure'; import { isBrowser } from '../util/browser'; import { PREFIX_ROUTES } from '../util/path'; @@ -51,7 +52,7 @@ class DepartureListContainer extends Component { static propTypes = { rowClasses: PropTypes.string.isRequired, stoptimes: PropTypes.array.isRequired, - currentTime: PropTypes.number.isRequired, + currentTime: PropTypes.object.isRequired, limit: PropTypes.number, infiniteScroll: PropTypes.bool, showStops: PropTypes.bool, @@ -59,12 +60,24 @@ class DepartureListContainer extends Component { className: PropTypes.string, isTerminal: PropTypes.bool, showPlatformCodes: PropTypes.bool, + relay: PropTypes.shape({ + setVariables: PropTypes.func.isRequired, + }).isRequired, }; static defaultProps = { showPlatformCodes: false, }; + componentWillReceiveProps({ relay, currentTime }) { + const currUnix = this.props.currentTime.unix(); + const nextUnix = currentTime.unix(); + + if (currUnix !== nextUnix) { + relay.setVariables({ startTime: nextUnix }); + } + } + onScroll = () => { if (this.props.infiniteScroll && isBrowser) { return this.scrollHandler; @@ -74,7 +87,7 @@ class DepartureListContainer extends Component { render() { const departureObjs = []; - const { currentTime } = this.props; + const currentTime = this.props.currentTime.unix(); let currentDate = moment .unix(currentTime) .startOf('day') @@ -160,9 +173,13 @@ class DepartureListContainer extends Component { } } -export default Relay.createContainer(DepartureListContainer, { - fragments: { - stoptimes: () => Relay.QL` +export default Relay.createContainer( + connectToStores(DepartureListContainer, ['TimeStore'], ({ getStore }) => ({ + currentTime: getStore('TimeStore').getCurrentTime(), + })), + { + fragments: { + stoptimes: () => Relay.QL` fragment on Stoptime @relay(plural:true) { realtimeState realtimeDeparture @@ -200,5 +217,6 @@ export default Relay.createContainer(DepartureListContainer, { } } `, + }, }, -}); +); diff --git a/app/component/StopCardContainer.js b/app/component/StopCardContainer.js index 6475c605ea..a5e3a6eb26 100644 --- a/app/component/StopCardContainer.js +++ b/app/component/StopCardContainer.js @@ -9,7 +9,7 @@ import StopCard from './StopCard'; const StopCardContainer = connectToStores( StopCard, - ['FavouriteStopsStore'], + ['FavouriteStopsStore', 'TimeStore'], (context, props) => ({ isTerminal: props.isTerminal, children: ( @@ -18,7 +18,7 @@ const StopCardContainer = connectToStores( stoptimes={props.stop.stoptimes} limit={props.limit} isTerminal={props.isTerminal} - currentTime={props.relay.variables.startTime} + currentTime={context.getStore('TimeStore').getCurrentTime()} showPlatformCodes /> ), diff --git a/app/component/TripStopListContainer.js b/app/component/TripStopListContainer.js index 2dbb4dd4b4..40ff189404 100644 --- 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(); From 2a4f3b1d537fcabe6150c20c2ca6205ad1403ccc Mon Sep 17 00:00:00 2001 From: Teemu Date: Mon, 10 Sep 2018 09:18:36 +0300 Subject: [PATCH 2/6] Use unix timestamp, not moment object --- app/component/DepartureListContainer.js | 12 +++++++----- app/component/StopCardContainer.js | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/component/DepartureListContainer.js b/app/component/DepartureListContainer.js index 42792e087b..887b85704a 100644 --- a/app/component/DepartureListContainer.js +++ b/app/component/DepartureListContainer.js @@ -52,7 +52,7 @@ class DepartureListContainer extends Component { static propTypes = { rowClasses: PropTypes.string.isRequired, stoptimes: PropTypes.array.isRequired, - currentTime: PropTypes.object.isRequired, + currentTime: PropTypes.number.isRequired, limit: PropTypes.number, infiniteScroll: PropTypes.bool, showStops: PropTypes.bool, @@ -70,8 +70,8 @@ class DepartureListContainer extends Component { }; componentWillReceiveProps({ relay, currentTime }) { - const currUnix = this.props.currentTime.unix(); - const nextUnix = currentTime.unix(); + const currUnix = this.props.currentTime; + const nextUnix = currentTime; if (currUnix !== nextUnix) { relay.setVariables({ startTime: nextUnix }); @@ -87,7 +87,7 @@ class DepartureListContainer extends Component { render() { const departureObjs = []; - const currentTime = this.props.currentTime.unix(); + const currentTime = this.props.currentTime; let currentDate = moment .unix(currentTime) .startOf('day') @@ -175,7 +175,9 @@ class DepartureListContainer extends Component { export default Relay.createContainer( connectToStores(DepartureListContainer, ['TimeStore'], ({ getStore }) => ({ - currentTime: getStore('TimeStore').getCurrentTime(), + currentTime: getStore('TimeStore') + .getCurrentTime() + .unix(), })), { fragments: { diff --git a/app/component/StopCardContainer.js b/app/component/StopCardContainer.js index a5e3a6eb26..ca9cb3a505 100644 --- a/app/component/StopCardContainer.js +++ b/app/component/StopCardContainer.js @@ -18,7 +18,7 @@ const StopCardContainer = connectToStores( stoptimes={props.stop.stoptimes} limit={props.limit} isTerminal={props.isTerminal} - currentTime={context.getStore('TimeStore').getCurrentTime()} + currentTime={context.getStore('TimeStore').getCurrentTime().unix()} showPlatformCodes /> ), From 8989c316c4e2c8cc4409984c736afb04d9040f66 Mon Sep 17 00:00:00 2001 From: Teemu Date: Mon, 10 Sep 2018 09:19:21 +0300 Subject: [PATCH 3/6] Fix lint --- app/component/DepartureListContainer.js | 2 +- app/component/StopCardContainer.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/component/DepartureListContainer.js b/app/component/DepartureListContainer.js index 887b85704a..fef1a5f8bf 100644 --- a/app/component/DepartureListContainer.js +++ b/app/component/DepartureListContainer.js @@ -87,7 +87,7 @@ class DepartureListContainer extends Component { render() { const departureObjs = []; - const currentTime = this.props.currentTime; + const { currentTime } = this.props; let currentDate = moment .unix(currentTime) .startOf('day') diff --git a/app/component/StopCardContainer.js b/app/component/StopCardContainer.js index ca9cb3a505..b8c93c60f3 100644 --- a/app/component/StopCardContainer.js +++ b/app/component/StopCardContainer.js @@ -18,7 +18,10 @@ const StopCardContainer = connectToStores( stoptimes={props.stop.stoptimes} limit={props.limit} isTerminal={props.isTerminal} - currentTime={context.getStore('TimeStore').getCurrentTime().unix()} + currentTime={context + .getStore('TimeStore') + .getCurrentTime() + .unix()} showPlatformCodes /> ), From bc2b0ed54b6969f8148c2e4ca410a2b4b26069e9 Mon Sep 17 00:00:00 2001 From: Teemu Date: Tue, 11 Sep 2018 12:09:26 +0300 Subject: [PATCH 4/6] Revert changes --- app/component/DepartureListContainer.js | 32 +++++-------------------- 1 file changed, 6 insertions(+), 26 deletions(-) diff --git a/app/component/DepartureListContainer.js b/app/component/DepartureListContainer.js index fef1a5f8bf..3c7b3781df 100644 --- a/app/component/DepartureListContainer.js +++ b/app/component/DepartureListContainer.js @@ -5,7 +5,6 @@ import filter from 'lodash/filter'; import moment from 'moment'; import { Link } from 'react-router'; import cx from 'classnames'; -import connectToStores from 'fluxible-addons-react/connectToStores'; import Departure from './Departure'; import { isBrowser } from '../util/browser'; import { PREFIX_ROUTES } from '../util/path'; @@ -22,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 + @@ -60,24 +59,12 @@ class DepartureListContainer extends Component { className: PropTypes.string, isTerminal: PropTypes.bool, showPlatformCodes: PropTypes.bool, - relay: PropTypes.shape({ - setVariables: PropTypes.func.isRequired, - }).isRequired, }; static defaultProps = { showPlatformCodes: false, }; - componentWillReceiveProps({ relay, currentTime }) { - const currUnix = this.props.currentTime; - const nextUnix = currentTime; - - if (currUnix !== nextUnix) { - relay.setVariables({ startTime: nextUnix }); - } - } - onScroll = () => { if (this.props.infiniteScroll && isBrowser) { return this.scrollHandler; @@ -173,15 +160,9 @@ class DepartureListContainer extends Component { } } -export default Relay.createContainer( - connectToStores(DepartureListContainer, ['TimeStore'], ({ getStore }) => ({ - currentTime: getStore('TimeStore') - .getCurrentTime() - .unix(), - })), - { - fragments: { - stoptimes: () => Relay.QL` +export default Relay.createContainer(DepartureListContainer, { + fragments: { + stoptimes: () => Relay.QL` fragment on Stoptime @relay(plural:true) { realtimeState realtimeDeparture @@ -219,6 +200,5 @@ export default Relay.createContainer( } } `, - }, }, -); +}); From acccb7a419b4a18c51c5f17d668ffd5e10a4dc4c Mon Sep 17 00:00:00 2001 From: Teemu Date: Tue, 11 Sep 2018 12:10:16 +0300 Subject: [PATCH 5/6] Make stop popup & stop page update periodically --- app/component/StopCardContainer.js | 7 +- app/component/StopPageContentContainer.js | 45 +++++++++--- app/component/map/popups/StopMarkerPopup.js | 81 +++++++++++++-------- 3 files changed, 87 insertions(+), 46 deletions(-) diff --git a/app/component/StopCardContainer.js b/app/component/StopCardContainer.js index b8c93c60f3..6475c605ea 100644 --- a/app/component/StopCardContainer.js +++ b/app/component/StopCardContainer.js @@ -9,7 +9,7 @@ import StopCard from './StopCard'; const StopCardContainer = connectToStores( StopCard, - ['FavouriteStopsStore', 'TimeStore'], + ['FavouriteStopsStore'], (context, props) => ({ isTerminal: props.isTerminal, children: ( @@ -18,10 +18,7 @@ const StopCardContainer = connectToStores( stoptimes={props.stop.stoptimes} limit={props.limit} isTerminal={props.isTerminal} - currentTime={context - .getStore('TimeStore') - .getCurrentTime() - .unix()} + currentTime={props.relay.variables.startTime} showPlatformCodes /> ), diff --git a/app/component/StopPageContentContainer.js b/app/component/StopPageContentContainer.js index 0acc6abb8b..f62aee5ecd 100644 --- 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,19 @@ class StopPageContentOptions extends React.Component { }; } + componentWillReceiveProps({ relay, currentTime }) { + console.log( + 'StopPageContentOptions', + 'componentWillReceiveProps', + currentTime, + this.props.currentTime, + ); + const currUnix = this.props.currentTime; + if (currUnix !== currentTime) { + relay.setVariables({ startTime: currUnix }); + } + } + onDateChange = ({ target }) => { this.props.setDate(target.value); }; @@ -51,6 +67,7 @@ class StopPageContentOptions extends React.Component { render() { // Currently shows only next departures, add Timetables + console.log('StopPageContentOptions', 'render', this); return (
@@ -102,6 +119,7 @@ const StopPageContent = withBreakpoint( relay={props.relay} initialDate={props.initialDate} setDate={props.setDate} + currentTime={props.currentTime} /> ), ); @@ -119,9 +137,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 +154,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/map/popups/StopMarkerPopup.js b/app/component/map/popups/StopMarkerPopup.js index 84a5fbef0f..b37ff4c66b 100644 --- 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 ( -
- - -
- ); + return ( +
+ + +
+ ); + } } 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'; From f53425484aab198050cd6c014a0f5aaf7929144d Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Tue, 11 Sep 2018 14:18:58 +0300 Subject: [PATCH 6/6] Remove debug messages --- app/component/StopPageContentContainer.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/app/component/StopPageContentContainer.js b/app/component/StopPageContentContainer.js index f62aee5ecd..eda123a204 100644 --- a/app/component/StopPageContentContainer.js +++ b/app/component/StopPageContentContainer.js @@ -43,12 +43,6 @@ class StopPageContentOptions extends React.Component { } componentWillReceiveProps({ relay, currentTime }) { - console.log( - 'StopPageContentOptions', - 'componentWillReceiveProps', - currentTime, - this.props.currentTime, - ); const currUnix = this.props.currentTime; if (currUnix !== currentTime) { relay.setVariables({ startTime: currUnix }); @@ -67,7 +61,6 @@ class StopPageContentOptions extends React.Component { render() { // Currently shows only next departures, add Timetables - console.log('StopPageContentOptions', 'render', this); return (