Mailspring/internal_packages/notifications/lib/items/offline-notification.jsx
Juan Tejada 85c9439f8f fix(offline-notif): Add some offline notification improvements
Summary:
- Make the try again button react when clicked
- Don't mark as offline until after we've tried again at least 3 times

Test Plan: manual

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D3738
2017-01-18 22:09:43 -08:00

95 lines
2.7 KiB
JavaScript

import {NylasSyncStatusStore, React, Actions} from 'nylas-exports';
import {Notification} from 'nylas-component-kit';
const CHECK_STATUS_INTERVAL = 5000
export default class OfflineNotification extends React.Component {
static displayName = 'OfflineNotification';
constructor() {
super();
this._updateInterval = null;
this._setOfflineTimeout = null;
this._setRetryingTimeout = null;
this.state = this.getStateFromStores();
}
componentDidMount() {
this.unlisten = NylasSyncStatusStore.listen(this.onConnectedStatusChanged);
window.addEventListener('browser-window-focus', this.onWindowFocusChanged);
window.addEventListener('browser-window-blur', this.onWindowFocusChanged);
this.ensureCountdownInterval();
}
componentDidUpdate() {
this.ensureCountdownInterval();
}
componentWillUnmount() {
window.removeEventListener('browser-window-focus', this.onWindowFocusChanged);
window.removeEventListener('browser-window-blur', this.onWindowFocusChanged);
}
onConnectedStatusChanged = () => {
const nextState = this.getStateFromStores();
if ((nextState.connected !== this.state.connected)) {
clearTimeout(this._setOfflineTimeout)
if (nextState.connected) {
this.setState(nextState);
} else {
// Only set the status to offline if we are still offline after a while
// This prevents the notification from flickering
this._setOfflineTimeout = setTimeout(this.onConnectedStatusChanged, 3 * CHECK_STATUS_INTERVAL)
}
}
}
onTryAgain = () => {
clearTimeout(this._setRetryingTimeout)
this.setState({retrying: true})
this._setRetryingTimeout = setTimeout(() => this.setState({retrying: false}), 2000)
Actions.retryDeltaConnection();
}
onWindowFocusChanged = () => {
this.setState(this.getStateFromStores());
this.ensureCountdownInterval();
}
getStateFromStores() {
return {connected: NylasSyncStatusStore.connected()};
}
ensureCountdownInterval = () => {
clearInterval(this._updateInterval);
// only attempt to retry if the window is in the foreground to avoid
// the battery hit.
if (!this.state.connected && !document.body.classList.contains('is-blurred')) {
this._updateInterval = setInterval(() => {
Actions.retryDeltaConnection();
}, CHECK_STATUS_INTERVAL);
}
}
render() {
const {connected, retrying} = this.state;
if (connected) {
return <span />
}
const tryLabel = retrying ? 'Retrying...' : 'Try now';
return (
<Notification
className="offline"
title="Nylas Mail is offline"
priority="5"
icon="volstead-offline.png"
actions={[{label: tryLabel, id: 'try_now', fn: this.onTryAgain}]}
/>
)
}
}