Merge pull request #29 from yuzawa-san/stale-indicator

fetch indicator on app focus

src/components/SystemView.js

@@ -49,6 +49,7 @@ class SystemView extends React.Component {
 
 	componentWillUnmount() {
 		clearInterval(this.timerID);
+		window.removeEventListener('focus', this.handleFocus);
 	}
 
 	componentDidMount(){
@@ -95,19 +96,30 @@ class SystemView extends React.Component {
 				// fetch system's station statuses
 				this.reload();
 				// and do that periodically
-				this.timerID = setInterval(() => {
-					if ((Date.now() - this.lastReloaded) > RELOAD_INTERVAL_MS) {
-						this.reload();
-					}
-				},	RELOAD_CHECK_MS);
+				this.timerID = setInterval(this.reload,	RELOAD_CHECK_MS);
+				window.addEventListener('focus', this.handleFocus);
 			})
 			.catch((error) =>{
 				alert(error);
 			});
 	}
-
+
+	handleFocus = () => {
+		this.lastReloaded = 0;
+		this.reload();
+	}
+
 	reload = () => {
-		this.lastReloaded = Date.now();
+		const now = Date.now();
+		if ((now - this.lastReloaded) < RELOAD_INTERVAL_MS) {
+			return;
+		}
+		if (!this.lastReloaded) {
+			this.setState({
+				loading: true
+			});
+		}
+		this.lastReloaded = now;
 		return fetch("/systems/"+this.state.id+"/status")
 			.then((response) => response.json())
 			.then((responseJson) => {
@@ -130,8 +142,8 @@ class SystemView extends React.Component {
 				this.setState({
 					bikes,
 					statuses,
-					loaded: true
-				})
+					loading: false
+				});
 			})
 			.catch((error) =>{
 				alert(error);
@@ -181,7 +193,7 @@ class SystemView extends React.Component {
 
 	render() {
 		const { classes,  currentSystem, onSetCenter, currentPosition, viewport } = this.props;
-		const { displayMode, url, stations, bikes, statuses, favorites, idToStations, destination, labelsToStations, loaded } = this.state;
+		const { displayMode, url, stations, bikes, statuses, favorites, idToStations, destination, labelsToStations, loading } = this.state;
 		let attribution = null;
 		let content = null;
 
@@ -215,15 +227,17 @@ class SystemView extends React.Component {
 		const markers = effective.map((station) => {
 			return (<StationMarker key={station.id} station={station} mainColor="red" hue={43} onSetLabel={this.setLabel} onSetFavorite={this.setFavorite}/>);
 		});
-		if (loaded) {
+		if (currentSystem) {
 			attribution = `<a href="${url}" target="blank">${currentSystem.name}</a>`;
-			if(displayMode==="trip"){
+		}
+		if (loading) {
+			content = (<ProgressView/>);
+		} else {
+			if (displayMode==="trip") {
 				content = (<StationTripList stations={effective} onSetCenter={onSetCenter} onSetDestination={this.setDestination} destination={destination}/>);
-			}else{
+			} else {
 				content = (<StationList stations={effective} onSetCenter={onSetCenter}/>);
 			}
-		} else {
-			content = (<ProgressView/>);
 		}
 		return (
 			<SplitView