Sometimes I’m underground and there isn’t an arrivals board in sight, or it’s far down the other end of the platform or whatever the case, and I just can’t see it.
I open HustleTime, and it hiccups – I don’t have a strong connection, and it’s still retrieving data from the HustleTime API.
This is an unavoidable condition of urban subterranean travel: you’ll sometimes have a weak or no signal, and you really can’t do anything about it.
What I’ve decided to do is to indicate to the user that they’re device is still communicating by an animated icon in the top left of the screen.
The idea is simple: While the app is inside the fetch promise of retrieving data, this little alert turns on temporarily, and once it’s done retrieving data, it turns off the alert.
this.setState({searchingIndicator: true})
fetch(<fetch stuff>)
.then(resp => resp.json())
.then(json => this.props.dispatchedFetchStations(json))
.then(resp => this.setState({searchingIndicator: false}))
.
.
.
showAlerts = () => {
if (this.state.searchingIndicator == true){
if (Object.values(this.state.shown).includes(false)) {
return <View style={{position: 'absolute', top: 65, left: 15}}>
<Image source={wifiRed} style={{width: 25, height: 25}} />
<Image source={ignoreAlert} style={{width: 25, height: 25 }} />
</View>
} else {
return <View style={{position: 'absolute', top: 65, left: 15}}>
<Image source={wifiRed} style={{width: 25, height: 25}} />
</View>
}
} else {
if (Object.values(this.state.shown).includes(false)) {
return <View style={{position: 'absolute', top: 65, left: 15}}>
<Image source={ignoreAlert} style={{width: 25, height: 25 }} />
</View>
} else {
null
}
}
}Now I have a way to show various indicators/alerts to the user as needed, and it’s a very simple process.
Look out for this little update in the next HT release.