2016-12-20 04:39:56 +08:00
|
|
|
import _ from 'underscore';
|
|
|
|
import _str from 'underscore.string';
|
|
|
|
import classNames from 'classnames';
|
2017-01-04 05:24:10 +08:00
|
|
|
import {Actions, AccountStore, NylasSyncStatusStore, React} from 'nylas-exports';
|
2016-12-20 04:39:56 +08:00
|
|
|
|
2017-01-14 03:56:20 +08:00
|
|
|
const MONTH_SHORT_FORMATS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
|
|
|
|
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
|
|
|
2016-12-20 04:39:56 +08:00
|
|
|
export default class InitialSyncActivity extends React.Component {
|
|
|
|
static displayName = 'InitialSyncActivity';
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2016-12-21 20:28:21 +08:00
|
|
|
this.state = {
|
|
|
|
isExpanded: false,
|
|
|
|
syncState: NylasSyncStatusStore.getSyncState(),
|
|
|
|
syncProgress: NylasSyncStatusStore.getSyncProgress(),
|
|
|
|
}
|
2017-01-04 05:24:10 +08:00
|
|
|
this.mounted = false;
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2017-01-04 05:24:10 +08:00
|
|
|
this.mounted = true;
|
|
|
|
this.unsubs = [
|
|
|
|
NylasSyncStatusStore.listen(this.onDataChanged),
|
|
|
|
Actions.expandInitialSyncState.listen(this.showExpandedState),
|
|
|
|
]
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2017-01-04 05:24:10 +08:00
|
|
|
if (this.unsubs) {
|
|
|
|
this.unsubs.forEach((unsub) => unsub())
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
2017-01-04 05:24:10 +08:00
|
|
|
this.mounted = false;
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
onDataChanged = () => {
|
2016-12-21 20:28:21 +08:00
|
|
|
const syncState = NylasSyncStatusStore.getSyncState()
|
|
|
|
const syncProgress = NylasSyncStatusStore.getSyncProgress()
|
|
|
|
this.setState({syncState, syncProgress});
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
|
|
|
|
2017-01-04 05:24:10 +08:00
|
|
|
hideExpandedState = () => {
|
2016-12-21 20:28:21 +08:00
|
|
|
this.setState({isExpanded: false});
|
2016-12-22 04:04:50 +08:00
|
|
|
}
|
|
|
|
|
2017-01-04 05:24:10 +08:00
|
|
|
showExpandedState = () => {
|
|
|
|
if (!this.state.isExpanded) {
|
|
|
|
this.setState({isExpanded: true});
|
|
|
|
} else {
|
|
|
|
this.setState({blink: true});
|
|
|
|
setTimeout(() => {
|
|
|
|
if (this.mounted) {
|
|
|
|
this.setState({blink: false});
|
|
|
|
}
|
|
|
|
}, 1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-22 04:04:50 +08:00
|
|
|
renderExpandedSyncState() {
|
2017-01-04 05:24:10 +08:00
|
|
|
let maxHeight = 0;
|
|
|
|
let accounts = _.map(this.state.syncState, (accountSyncState, accountId) => {
|
2016-12-20 04:39:56 +08:00
|
|
|
const account = _.findWhere(AccountStore.accounts(), {id: accountId});
|
|
|
|
if (!account) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2016-12-21 20:28:21 +08:00
|
|
|
const {folderSyncProgress} = accountSyncState
|
2017-01-14 03:56:20 +08:00
|
|
|
let folderStates = _.map(folderSyncProgress, ({progress, oldestProcessedDate}, name) => {
|
|
|
|
return this.renderFolderProgress(name, progress, oldestProcessedDate)
|
2016-12-20 04:39:56 +08:00
|
|
|
})
|
|
|
|
|
2017-01-04 05:24:10 +08:00
|
|
|
if (folderStates.length === 0) {
|
|
|
|
folderStates = <div><br />Gathering folders...</div>
|
|
|
|
}
|
|
|
|
|
|
|
|
// A row for the account email address plus a row for each folder state,
|
|
|
|
const numRows = 1 + (folderStates.length || 1)
|
|
|
|
maxHeight += 50 * numRows;
|
|
|
|
|
2016-12-20 04:39:56 +08:00
|
|
|
return (
|
2017-01-14 03:56:20 +08:00
|
|
|
<div className="account" key={accountId}>
|
2016-12-20 04:39:56 +08:00
|
|
|
<h2>{account.emailAddress}</h2>
|
|
|
|
{folderStates}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
});
|
|
|
|
|
2017-01-04 05:24:10 +08:00
|
|
|
if (accounts.length === 0) {
|
|
|
|
accounts = <div><br />Looking for accounts...</div>
|
|
|
|
}
|
|
|
|
|
2016-12-20 04:39:56 +08:00
|
|
|
return (
|
2017-01-04 05:24:10 +08:00
|
|
|
<div
|
|
|
|
className="account-detail-area"
|
|
|
|
key="expanded-sync-state"
|
|
|
|
style={{maxHeight: `${maxHeight + 500}px`}}
|
|
|
|
>
|
2017-01-12 06:39:10 +08:00
|
|
|
<a className="close-expanded" onClick={this.hideExpandedState}>
|
|
|
|
<span style={{cursor: "pointer"}}>Hide</span>
|
|
|
|
</a>
|
2016-12-20 04:39:56 +08:00
|
|
|
{accounts}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2017-01-14 03:56:20 +08:00
|
|
|
renderFolderProgress(name, progress, oldestProcessedDate) {
|
2016-12-20 04:39:56 +08:00
|
|
|
let status = 'busy';
|
2017-01-14 03:56:20 +08:00
|
|
|
let progressLabel = 'In Progress'
|
|
|
|
let syncedThrough = 'Syncing this past month';
|
2016-12-20 04:39:56 +08:00
|
|
|
if (progress === 1) {
|
|
|
|
status = 'complete';
|
2017-01-14 03:56:20 +08:00
|
|
|
progressLabel = '';
|
|
|
|
syncedThrough = 'Up to date'
|
|
|
|
} else {
|
|
|
|
let month = oldestProcessedDate.getMonth();
|
|
|
|
let year = oldestProcessedDate.getFullYear();
|
|
|
|
const currentDate = new Date();
|
|
|
|
if (month !== currentDate.getMonth() || year !== currentDate.getFullYear()) {
|
|
|
|
// We're currently syncing in `month`, which mean's we've synced through all
|
|
|
|
// of the month *after* it.
|
|
|
|
month++;
|
|
|
|
if (month === 12) {
|
|
|
|
month = 0;
|
|
|
|
year++;
|
|
|
|
}
|
|
|
|
syncedThrough = `Synced through ${MONTH_SHORT_FORMATS[month]} ${year}`;
|
|
|
|
}
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2017-01-14 03:56:20 +08:00
|
|
|
<div className={`model-progress ${status}`} key={name} title={syncedThrough}>
|
|
|
|
{_str.titleize(name)} <span className="progress-label">{progressLabel}</span>
|
2016-12-20 04:39:56 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-01-04 05:24:10 +08:00
|
|
|
if (!AccountStore.accountsAreSyncing()) {
|
2016-12-20 04:39:56 +08:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2017-01-04 05:24:10 +08:00
|
|
|
const {syncProgress: {progress}} = this.state
|
|
|
|
if (progress === 1) {
|
|
|
|
return false;
|
2016-12-20 04:39:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const classSet = classNames({
|
|
|
|
'item': true,
|
2016-12-21 20:28:21 +08:00
|
|
|
'expanded-sync': this.state.isExpanded,
|
2017-01-04 05:24:10 +08:00
|
|
|
'blink': this.state.blink,
|
2016-12-20 04:39:56 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={classSet}
|
|
|
|
key="initial-sync"
|
2017-01-04 05:24:10 +08:00
|
|
|
onClick={() => (this.setState({isExpanded: !this.state.isExpanded}))}
|
2016-12-20 04:39:56 +08:00
|
|
|
>
|
2017-01-14 05:40:19 +08:00
|
|
|
<div className="inner">Syncing your mailbox</div>
|
2017-01-04 05:24:10 +08:00
|
|
|
{this.state.isExpanded ? this.renderExpandedSyncState() : false}
|
2016-12-20 04:39:56 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|