@@ -49,6 +49,7 @@ class SystemView extends React.Component {
49
49
50
50
componentWillUnmount ( ) {
51
51
clearInterval ( this . timerID ) ;
52
+ window . removeEventListener ( 'focus' , this . handleFocus ) ;
52
53
}
53
54
54
55
componentDidMount ( ) {
@@ -95,19 +96,30 @@ class SystemView extends React.Component {
95
96
// fetch system's station statuses
96
97
this . reload ( ) ;
97
98
// and do that periodically
98
- this . timerID = setInterval ( ( ) => {
99
- if ( ( Date . now ( ) - this . lastReloaded ) > RELOAD_INTERVAL_MS ) {
100
- this . reload ( ) ;
101
- }
102
- } , RELOAD_CHECK_MS ) ;
99
+ this . timerID = setInterval ( this . reload , RELOAD_CHECK_MS ) ;
100
+ window . addEventListener ( 'focus' , this . handleFocus ) ;
103
101
} )
104
102
. catch ( ( error ) => {
105
103
alert ( error ) ;
106
104
} ) ;
107
105
}
108
-
106
+
107
+ handleFocus = ( ) => {
108
+ this . lastReloaded = 0 ;
109
+ this . reload ( ) ;
110
+ }
111
+
109
112
reload = ( ) => {
110
- this . lastReloaded = Date . now ( ) ;
113
+ const now = Date . now ( ) ;
114
+ if ( ( now - this . lastReloaded ) < RELOAD_INTERVAL_MS ) {
115
+ return ;
116
+ }
117
+ if ( ! this . lastReloaded ) {
118
+ this . setState ( {
119
+ loading : true
120
+ } ) ;
121
+ }
122
+ this . lastReloaded = now ;
111
123
return fetch ( "/systems/" + this . state . id + "/status" )
112
124
. then ( ( response ) => response . json ( ) )
113
125
. then ( ( responseJson ) => {
@@ -130,8 +142,8 @@ class SystemView extends React.Component {
130
142
this . setState ( {
131
143
bikes,
132
144
statuses,
133
- loaded : true
134
- } )
145
+ loading : false
146
+ } ) ;
135
147
} )
136
148
. catch ( ( error ) => {
137
149
alert ( error ) ;
@@ -181,7 +193,7 @@ class SystemView extends React.Component {
181
193
182
194
render ( ) {
183
195
const { classes, currentSystem, onSetCenter, currentPosition, viewport } = this . props ;
184
- const { displayMode, url, stations, bikes, statuses, favorites, idToStations, destination, labelsToStations, loaded } = this . state ;
196
+ const { displayMode, url, stations, bikes, statuses, favorites, idToStations, destination, labelsToStations, loading } = this . state ;
185
197
let attribution = null ;
186
198
let content = null ;
187
199
@@ -215,15 +227,17 @@ class SystemView extends React.Component {
215
227
const markers = effective . map ( ( station ) => {
216
228
return ( < StationMarker key = { station . id } station = { station } mainColor = "red" hue = { 43 } onSetLabel = { this . setLabel } onSetFavorite = { this . setFavorite } /> ) ;
217
229
} ) ;
218
- if ( loaded ) {
230
+ if ( currentSystem ) {
219
231
attribution = `<a href="${ url } " target="blank">${ currentSystem . name } </a>` ;
220
- if ( displayMode === "trip" ) {
232
+ }
233
+ if ( loading ) {
234
+ content = ( < ProgressView /> ) ;
235
+ } else {
236
+ if ( displayMode === "trip" ) {
221
237
content = ( < StationTripList stations = { effective } onSetCenter = { onSetCenter } onSetDestination = { this . setDestination } destination = { destination } /> ) ;
222
- } else {
238
+ } else {
223
239
content = ( < StationList stations = { effective } onSetCenter = { onSetCenter } /> ) ;
224
240
}
225
- } else {
226
- content = ( < ProgressView /> ) ;
227
241
}
228
242
return (
229
243
< SplitView
0 commit comments