mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 13:44:41 +08:00
30c58e90a6
Summary: Add concept of "final" to Query, clean up internals Tiny bug fixes RxJs Observables! WIP Test Plan: Run tests Reviewers: evan, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D2319
127 lines
3.5 KiB
CoffeeScript
127 lines
3.5 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
classNames = require 'classnames'
|
|
NotificationStore = require './notifications-store'
|
|
InitialSyncActivity = require './initial-sync-activity'
|
|
{Actions,
|
|
TaskQueue,
|
|
AccountStore,
|
|
NylasSyncStatusStore,
|
|
TaskQueueStatusStore} = require 'nylas-exports'
|
|
ActivitySidebarLongPollStore = require './activity-sidebar-long-poll-store'
|
|
{TimeoutTransitionGroup, RetinaImg} = require 'nylas-component-kit'
|
|
|
|
class ActivitySidebar extends React.Component
|
|
@displayName: 'ActivitySidebar'
|
|
|
|
@containerRequired: false
|
|
@containerStyles:
|
|
minWidth: 165
|
|
maxWidth: 400
|
|
|
|
constructor: (@props) ->
|
|
@state = @_getStateFromStores()
|
|
|
|
componentDidMount: =>
|
|
@_unlisteners = []
|
|
@_unlisteners.push TaskQueueStatusStore.listen @_onDataChanged
|
|
@_unlisteners.push NotificationStore.listen @_onDataChanged
|
|
@_unlisteners.push NylasSyncStatusStore.listen @_onDataChanged
|
|
@_unlisteners.push ActivitySidebarLongPollStore.listen @_onDeltaReceived
|
|
|
|
componentWillUnmount: =>
|
|
unlisten() for unlisten in @_unlisteners
|
|
|
|
render: =>
|
|
items = [@_renderNotificationActivityItems(), @_renderTaskActivityItems()]
|
|
|
|
if @state.isInitialSyncComplete
|
|
if @state.receivingDelta
|
|
items.push @_renderDeltaSyncActivityItem()
|
|
else
|
|
items.push <InitialSyncActivity key="initial-sync" />
|
|
|
|
|
|
names = classNames
|
|
"sidebar-activity": true
|
|
"sidebar-activity-error": error?
|
|
|
|
wrapperClass = "sidebar-activity-transition-wrapper "
|
|
|
|
if items.length is 0
|
|
wrapperClass += "sidebar-activity-empty"
|
|
else
|
|
inside = <TimeoutTransitionGroup
|
|
className={names}
|
|
leaveTimeout={625}
|
|
enterTimeout={125}
|
|
transitionName="activity-opacity">
|
|
{items}
|
|
</TimeoutTransitionGroup>
|
|
|
|
<TimeoutTransitionGroup
|
|
className={wrapperClass}
|
|
leaveTimeout={625}
|
|
enterTimeout={125}
|
|
transitionName="activity-opacity">
|
|
{inside}
|
|
</TimeoutTransitionGroup>
|
|
|
|
_renderTaskActivityItems: =>
|
|
summary = {}
|
|
|
|
@state.tasks.map (task) ->
|
|
label = task.label?()
|
|
return unless label
|
|
summary[label] ?= 0
|
|
summary[label] += task.numberOfImpactedItems()
|
|
|
|
_.pairs(summary).map ([label, count]) ->
|
|
<div className="item" key={label}>
|
|
<div className="inner">
|
|
{label} <span className="count">({count})</span>
|
|
</div>
|
|
</div>
|
|
|
|
_renderDeltaSyncActivityItem: =>
|
|
<div className="item" key="delta-sync-item">
|
|
<div style={padding: "9px 9px 0 12px", float: "left"}>
|
|
<RetinaImg name="sending-spinner.gif" width={18} mode={RetinaImg.Mode.ContentPreserve} />
|
|
</div>
|
|
<div className="inner">
|
|
Syncing your mailbox…
|
|
</div>
|
|
</div>
|
|
|
|
_renderNotificationActivityItems: =>
|
|
@state.notifications.map (notification) ->
|
|
<div className="item" key={notification.id}>
|
|
<div className="inner">
|
|
{notification.message}
|
|
</div>
|
|
</div>
|
|
|
|
_onDataChanged: =>
|
|
@setState(@_getStateFromStores())
|
|
|
|
_getStateFromStores: =>
|
|
notifications: NotificationStore.notifications()
|
|
tasks: TaskQueueStatusStore.queue()
|
|
isInitialSyncComplete: NylasSyncStatusStore.isComplete()
|
|
|
|
_onDeltaReceived: (countDeltas) =>
|
|
tooSmallForNotification = countDeltas <= 10
|
|
return if tooSmallForNotification
|
|
|
|
if @_timeoutId
|
|
clearTimeout @_timeoutId
|
|
|
|
@_timeoutId = setTimeout(( =>
|
|
delete @_timeoutId
|
|
@setState receivingDelta: false
|
|
), 30000)
|
|
|
|
@setState receivingDelta: true
|
|
|
|
|
|
module.exports = ActivitySidebar
|