Skip to content

Commit 2e84f62

Browse files
authored
Merge pull request #29 from yuzawa-san/stale-indicator
fetch indicator on app focus
2 parents a0ebe8c + e0071ee commit 2e84f62

File tree

1 file changed

+29
-15
lines changed

1 file changed

+29
-15
lines changed

src/components/SystemView.js

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ class SystemView extends React.Component {
4949

5050
componentWillUnmount() {
5151
clearInterval(this.timerID);
52+
window.removeEventListener('focus', this.handleFocus);
5253
}
5354

5455
componentDidMount(){
@@ -95,19 +96,30 @@ class SystemView extends React.Component {
9596
// fetch system's station statuses
9697
this.reload();
9798
// 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);
103101
})
104102
.catch((error) =>{
105103
alert(error);
106104
});
107105
}
108-
106+
107+
handleFocus = () => {
108+
this.lastReloaded = 0;
109+
this.reload();
110+
}
111+
109112
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;
111123
return fetch("/systems/"+this.state.id+"/status")
112124
.then((response) => response.json())
113125
.then((responseJson) => {
@@ -130,8 +142,8 @@ class SystemView extends React.Component {
130142
this.setState({
131143
bikes,
132144
statuses,
133-
loaded: true
134-
})
145+
loading: false
146+
});
135147
})
136148
.catch((error) =>{
137149
alert(error);
@@ -181,7 +193,7 @@ class SystemView extends React.Component {
181193

182194
render() {
183195
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;
185197
let attribution = null;
186198
let content = null;
187199

@@ -215,15 +227,17 @@ class SystemView extends React.Component {
215227
const markers = effective.map((station) => {
216228
return (<StationMarker key={station.id} station={station} mainColor="red" hue={43} onSetLabel={this.setLabel} onSetFavorite={this.setFavorite}/>);
217229
});
218-
if (loaded) {
230+
if (currentSystem) {
219231
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") {
221237
content = (<StationTripList stations={effective} onSetCenter={onSetCenter} onSetDestination={this.setDestination} destination={destination}/>);
222-
}else{
238+
} else {
223239
content = (<StationList stations={effective} onSetCenter={onSetCenter}/>);
224240
}
225-
} else {
226-
content = (<ProgressView/>);
227241
}
228242
return (
229243
<SplitView

0 commit comments

Comments
 (0)