mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 12:40:08 +08:00
113 lines
3.2 KiB
CoffeeScript
113 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 your mailbox…</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>
|
|
)
|
|
|
|
<div className="account-detail-area">
|
|
{accounts}
|
|
<a className="close-expanded" onClick={@_hideExpandedState}>Hide</a>
|
|
</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
|