mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 17:56:06 +08:00
b030eee5c5
Summary: This notification was randomly appearing and not going away on its own. This was due to some weird logic in the react component. This diff refactors things to make them a little more consistent. Test Plan: Run locally, disconnecting and reconnecting to make sure we properly show and hide the notification. Reviewers: evan, spang, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3881
128 lines
3.5 KiB
JavaScript
128 lines
3.5 KiB
JavaScript
import {NylasSyncStatusStore, React, Actions} from 'nylas-exports';
|
|
import {Notification} from 'nylas-component-kit';
|
|
|
|
const DISCONNECT_DEBOUNCE_INTERVAL = 15000;
|
|
const CHECK_STATUS_INTERVAL = 3000
|
|
|
|
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() {
|
|
this.unlisten();
|
|
window.removeEventListener('browser-window-focus', this.onWindowFocusChanged);
|
|
window.removeEventListener('browser-window-blur', this.onWindowFocusChanged);
|
|
}
|
|
|
|
onConnectedStatusChanged = () => {
|
|
const nextState = this.getStateFromStores();
|
|
if (this.state.connected) {
|
|
if (!nextState.connected && !this._setOfflineTimeout) {
|
|
this._setOfflineTimeout = setTimeout(this._didBecomeDisconnected, DISCONNECT_DEBOUNCE_INTERVAL);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (nextState.connected) {
|
|
this._didBecomeConnected();
|
|
}
|
|
}
|
|
|
|
onTryAgain = () => {
|
|
clearTimeout(this._setRetryingTimeout)
|
|
this.setState({retrying: true})
|
|
this._setRetryingTimeout = setTimeout(() => this.setState({retrying: false}), 2000)
|
|
Actions.retryDeltaConnection();
|
|
}
|
|
|
|
onWindowFocusChanged = () => {
|
|
const nextState = this.getStateFromStores();
|
|
// If we notice we've reconnected we want to immediately remove the notification.
|
|
if (nextState.connected && !this.state.connected) {
|
|
this._didBecomeConnected();
|
|
return;
|
|
}
|
|
this.ensureCountdownInterval();
|
|
}
|
|
|
|
getStateFromStores() {
|
|
return {connected: NylasSyncStatusStore.connected()};
|
|
}
|
|
|
|
_clearOfflineTimeout = () => {
|
|
if (this._setOfflineTimeout) {
|
|
clearTimeout(this._setOfflineTimeout);
|
|
this._setOfflineTimeout = null;
|
|
}
|
|
}
|
|
|
|
_clearUpdateInterval = () => {
|
|
if (this._updateInterval) {
|
|
clearInterval(this._updateInterval);
|
|
this._updateInterval = null;
|
|
}
|
|
}
|
|
|
|
_didBecomeConnected = () => {
|
|
this._clearOfflineTimeout();
|
|
this._clearUpdateInterval();
|
|
this.setState({connected: true});
|
|
}
|
|
|
|
_didBecomeDisconnected = () => {
|
|
this._clearOfflineTimeout();
|
|
// We will call ensureCountdownInterval() in componentDidUpdate when this
|
|
// setState is complete.
|
|
this.setState({connected: false});
|
|
}
|
|
|
|
ensureCountdownInterval = () => {
|
|
this._clearUpdateInterval();
|
|
|
|
// 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}]}
|
|
/>
|
|
)
|
|
}
|
|
}
|