Mailspring/internal_packages/notifications/lib/initial-sync-activity.cjsx
Evan Morikawa 17c6fd6e78 feat(sync): expanded details on sync status
Summary: Fixes T3574

Test Plan: manual

Reviewers: dillon, bengotow

Reviewed By: dillon, bengotow

Maniphest Tasks: T3574

Differential Revision: https://phab.nylas.com/D2058
2015-09-24 11:03:11 -07:00

110 lines
3.2 KiB
CoffeeScript

_ = require 'underscore'
_str = require 'underscore.string'
classNames = require 'classnames'
React = require 'react'
{Actions, AccountStore, NylasSyncStatusStore} = require 'nylas-exports'
class InitialSyncActivity extends React.Component
@displayName: 'InitialSyncActivity'
constructor: (@props) ->
@state = @_getStateFromStores()
componentDidMount: =>
@_usub = NylasSyncStatusStore.listen @_onDataChanged
componentWillUnmount: =>
@_usub?()
_onDataChanged: =>
@setState(@_getStateFromStores())
_getStateFromStores: =>
sync: NylasSyncStatusStore.state()
render: =>
count = 0
fetched = 0
totalProgress = 0
incomplete = 0
error = null
for acctId, state of @state.sync
for model, modelState of state
incomplete += 1 unless modelState.complete
error ?= modelState.error
if modelState.count
count += modelState.count / 1
fetched += modelState.fetched / 1
totalProgress = (fetched / count) * 100 if count > 0
classSet = classNames
'item': true
'expanded-sync': @state.expandedSync
if incomplete is 0
return false
else if error
<div className={classSet} key="initial-sync">
<div className="inner">Initial sync encountered an error. Waiting to retry...
<div className="btn btn-emphasis" onClick={@_onTryAgain}>Try Again</div>
</div>
{@_expandedSyncState()}
</div>
else
<div className={classSet} key="initial-sync" onClick={=> @setState expandedSync: !@state.expandedSync}>
{@_renderProgressBar(totalProgress)}
<div className="inner">Syncing mail data&hellip;</div>
{@_expandedSyncState()}
</div>
_expandedSyncState: ->
accounts = []
for acctId, state of @state.sync
account = _.findWhere(AccountStore.items(), id: acctId)
continue unless account
modelStates = _.map state, (modelState, model) =>
@_renderModelProgress(model, modelState, 100)
accounts.push <div className="account inner" key={acctId}>
<h2>{account.emailAddress}</h2>
{modelStates}
</div>
accounts.push <a className="close-expanded" onClick={@_hideExpandedState}>Hide</a>
<div className="account-detail-area">
{accounts}
</div>
_hideExpandedState: (event) =>
event.stopPropagation() # So it doesn't reach the parent's onClick
event.preventDefault()
@setState expandedSync: false
return
_renderModelProgress: (model, modelState) ->
if modelState.error
status = "error"
else if modelState.complete
status = "complete"
else
status = "busy"
percent = (+modelState.fetched / +modelState.count) * 100
<div className="model-progress #{status}" key={model}>
<h3>{_str.titleize(model)}:</h3>
{@_renderProgressBar(percent)}
<div className="amount">{_str.numberFormat(modelState.fetched)} / {_str.numberFormat(modelState.count)}</div>
<div className="error-text">{modelState.error}</div>
</div>
_renderProgressBar: (percent) ->
<div className="progress-track">
<div className="progress" style={width: "#{percent}%"}></div>
</div>
_onTryAgain: =>
Actions.retryInitialSync()
module.exports = InitialSyncActivity