2016-10-04 23:02:11 +08:00
|
|
|
import {NylasSyncStatusStore, React, Actions} from 'nylas-exports';
|
2016-10-07 01:53:22 +08:00
|
|
|
import {Notification} from 'nylas-component-kit';
|
2016-04-05 08:11:09 +08:00
|
|
|
|
2017-01-18 08:27:21 +08:00
|
|
|
|
|
|
|
const CHECK_STATUS_INTERVAL = 5000
|
|
|
|
|
2016-10-04 23:02:11 +08:00
|
|
|
export default class OfflineNotification extends React.Component {
|
|
|
|
static displayName = 'OfflineNotification';
|
2016-04-05 08:11:09 +08:00
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this._updateInterval = null;
|
2017-01-19 08:16:37 +08:00
|
|
|
this._setOfflineTimeout = null;
|
|
|
|
this._setRetryingTimeout = null;
|
2016-04-05 08:11:09 +08:00
|
|
|
this.state = this.getStateFromStores();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2017-01-18 08:27:21 +08:00
|
|
|
this.unlisten = NylasSyncStatusStore.listen(this.onConnectedStatusChanged);
|
2016-04-05 08:11:09 +08:00
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2017-01-18 08:27:21 +08:00
|
|
|
onConnectedStatusChanged = () => {
|
|
|
|
const nextState = this.getStateFromStores();
|
|
|
|
if ((nextState.connected !== this.state.connected)) {
|
2017-01-19 08:16:37 +08:00
|
|
|
clearTimeout(this._setOfflineTimeout)
|
|
|
|
|
2017-01-18 08:27:21 +08:00
|
|
|
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
|
2017-01-19 08:16:37 +08:00
|
|
|
this._setOfflineTimeout = setTimeout(this.onConnectedStatusChanged, 3 * CHECK_STATUS_INTERVAL)
|
2017-01-18 08:27:21 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-04-05 08:11:09 +08:00
|
|
|
onTryAgain = () => {
|
2017-01-19 08:16:37 +08:00
|
|
|
clearTimeout(this._setRetryingTimeout)
|
|
|
|
this.setState({retrying: true})
|
|
|
|
this._setRetryingTimeout = setTimeout(() => this.setState({retrying: false}), 2000)
|
2017-01-12 09:24:30 +08:00
|
|
|
Actions.retryDeltaConnection();
|
2016-04-05 08:11:09 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
onWindowFocusChanged = () => {
|
|
|
|
this.setState(this.getStateFromStores());
|
|
|
|
this.ensureCountdownInterval();
|
|
|
|
}
|
|
|
|
|
|
|
|
getStateFromStores() {
|
fix(sync-status): Change old per model status, in favor of per folder
Summary:
Addresses T7275
Previously, we kept track of the sync status of each API model, and the progress
we'd made syncing all available models (e.g. all threads, messages, events, etc)
Given K2's set up, we are now keeping track of sync status per folder, i.e. what
percent of the folder's messages we've synced. This status is now reported from K2
to N1 via folder object deltas, and this commit rewrites the
NylasSyncStatusStore (in ES6) to reflect that.
The new Store keeps the sync state per account, which is the merged state of
per folder sync state, and delta connections state.
We also got rid of `CategoryStore.whenCategoriesReady` in favor of
`whenCategoryListSynced`, which is derived from the fact hat as long as we've
started syncing one folder, we've already synced the entire list of of folders/labels.
There are a couple of TODOs to be addressed in upcoming diffs:
- T7329 Restore the sidebar component to show sync progress, which was previously removed
- T7330 Figure out how to report sync progress per label, specifically, we are interested in knowing how much of the inbox we've synced, which is a label in Gmail. (This might be a non-issue if we sync the inbox very fast, first)
Depends on D3514
Test Plan: Manual
Reviewers: mark, evan
Reviewed By: evan
Differential Revision: https://phab.nylas.com/D3515
2016-12-16 03:07:11 +08:00
|
|
|
return {connected: NylasSyncStatusStore.connected()};
|
2016-04-05 08:11:09 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
ensureCountdownInterval = () => {
|
2017-01-19 08:16:37 +08:00
|
|
|
clearInterval(this._updateInterval);
|
|
|
|
|
|
|
|
// only attempt to retry if the window is in the foreground to avoid
|
|
|
|
// the battery hit.
|
2016-04-05 08:11:09 +08:00
|
|
|
if (!this.state.connected && !document.body.classList.contains('is-blurred')) {
|
|
|
|
this._updateInterval = setInterval(() => {
|
2017-01-17 04:12:11 +08:00
|
|
|
Actions.retryDeltaConnection();
|
2017-01-18 08:27:21 +08:00
|
|
|
}, CHECK_STATUS_INTERVAL);
|
2016-04-05 08:11:09 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-01-19 08:16:37 +08:00
|
|
|
const {connected, retrying} = this.state;
|
2016-04-05 08:11:09 +08:00
|
|
|
if (connected) {
|
2016-10-04 23:02:11 +08:00
|
|
|
return <span />
|
2016-04-05 08:11:09 +08:00
|
|
|
}
|
2017-01-19 08:16:37 +08:00
|
|
|
const tryLabel = retrying ? 'Retrying...' : 'Try now';
|
2016-04-05 08:11:09 +08:00
|
|
|
|
|
|
|
return (
|
2016-10-04 23:02:11 +08:00
|
|
|
<Notification
|
2017-01-12 09:24:30 +08:00
|
|
|
className="offline"
|
2017-01-12 09:41:07 +08:00
|
|
|
title="Nylas Mail is offline"
|
2016-10-04 23:02:11 +08:00
|
|
|
priority="5"
|
|
|
|
icon="volstead-offline.png"
|
2017-01-19 08:16:37 +08:00
|
|
|
actions={[{label: tryLabel, id: 'try_now', fn: this.onTryAgain}]}
|
2016-10-04 23:02:11 +08:00
|
|
|
/>
|
|
|
|
)
|
2016-04-05 08:11:09 +08:00
|
|
|
}
|
|
|
|
}
|