From ff5c88ed69f14d36f3d199744fbb51a02cba9c55 Mon Sep 17 00:00:00 2001
From: dillon <dillon@nylas.com>
Date: Fri, 18 Sep 2015 16:15:15 -0700
Subject: [PATCH] fix(NUX): show when initial sync is taking place

Summary:
fixes T3563

todo
[x] check with @bengotow and @evan -- does this solution make sense to you?
[x] decide on the actual visual cue to the user -- @bengotow you suggested a loader or spinner, but i was thinking that actual copy should be used so it doesn't look like an unhelpful spinner which goes indefinitely. what do you think of the copy here?
[ ] implement spinner similar to sending a draft
[ ] write tests
[ ] verify that we're showing progress in a helpful way

problem
- new users would see nothing in edgehill after they log in, with no indication on why they can't see any of their mail
- in actuality, our backend is actively pulling all their mail to serve it to edgehill
- new users think edgehill is broken because they're unaware of the work that our backend was doing

solution
- when the backend sends deltas to edgehill, we show a message in the activity bar saying that we're trying to get their mail
- we'll show the sync progress

Test Plan: still need to add tests. all previous tests still green.

Reviewers: bengotow, evan

Subscribers: sdw, bengotow, evan

Maniphest Tasks: T3563

Differential Revision: https://phab.nylas.com/D2032
---
 .../activity-sidebar-long-poll-store.coffee   |  8 ++++++
 .../notifications/lib/activity-sidebar.cjsx   | 28 ++++++++++++++++++-
 .../lib/nylas-sync-worker-pool.coffee         |  1 +
 src/flux/actions.coffee                       |  1 +
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 internal_packages/notifications/lib/activity-sidebar-long-poll-store.coffee

diff --git a/internal_packages/notifications/lib/activity-sidebar-long-poll-store.coffee b/internal_packages/notifications/lib/activity-sidebar-long-poll-store.coffee
new file mode 100644
index 000000000..211f36231
--- /dev/null
+++ b/internal_packages/notifications/lib/activity-sidebar-long-poll-store.coffee
@@ -0,0 +1,8 @@
+{Actions} = require 'nylas-exports'
+NylasStore = require 'nylas-store'
+
+class AccountSidebarLongPollStore extends NylasStore
+  constructor: ->
+    @listenTo Actions.longPollReceivedRawDeltasPing, => @trigger()
+
+module.exports = new AccountSidebarLongPollStore()
diff --git a/internal_packages/notifications/lib/activity-sidebar.cjsx b/internal_packages/notifications/lib/activity-sidebar.cjsx
index 80a160118..de884da63 100644
--- a/internal_packages/notifications/lib/activity-sidebar.cjsx
+++ b/internal_packages/notifications/lib/activity-sidebar.cjsx
@@ -8,7 +8,8 @@ NotificationStore = require './notifications-store'
  NylasSyncStatusStore,
  TaskQueueStatusStore,
  NylasAPI} = require 'nylas-exports'
-{TimeoutTransitionGroup} = require 'nylas-component-kit'
+ActivitySidebarLongPollStore = require './activity-sidebar-long-poll-store'
+{TimeoutTransitionGroup, RetinaImg} = require 'nylas-component-kit'
 
 class ActivitySidebar extends React.Component
   @displayName: 'ActivitySidebar'
@@ -26,6 +27,7 @@ class ActivitySidebar extends React.Component
     @_unlisteners.push TaskQueueStatusStore.listen @_onDataChanged
     @_unlisteners.push NylasSyncStatusStore.listen @_onDataChanged
     @_unlisteners.push NotificationStore.listen @_onDataChanged
+    @_unlisteners.push ActivitySidebarLongPollStore.listen @_onDeltaReceived
 
   componentWillUnmount: =>
     unlisten() for unlisten in @_unlisteners
@@ -34,6 +36,9 @@ class ActivitySidebar extends React.Component
   render: =>
     items = [].concat(@_renderSyncActivityItem(), @_renderNotificationActivityItems(), @_renderTaskActivityItems())
 
+    if @state.receivingDelta
+      items.push @_renderDeltaSyncActivityItem()
+
     names = classNames
       "sidebar-activity": true
       "sidebar-activity-error": error?
@@ -108,6 +113,16 @@ class ActivitySidebar extends React.Component
         </div>
       </div>
 
+  _renderDeltaSyncActivityItem: =>
+    <div className="item" key="delta-sync-item">
+      <div style={padding: "14px 7px 0 10px", float: "left"}>
+        <RetinaImg name="sending-spinner.gif" mode={RetinaImg.Mode.ContentPreserve} />
+      </div>
+      <div className="inner">
+        Getting your mail&hellip;this might take a while
+      </div>
+    </div>
+
   _renderNotificationActivityItems: =>
     @state.notifications.map (notification) ->
       <div className="item" key={notification.id}>
@@ -127,5 +142,16 @@ class ActivitySidebar extends React.Component
     tasks: TaskQueueStatusStore.queue()
     sync: NylasSyncStatusStore.state()
 
+  _onDeltaReceived: =>
+    if @_timeoutId
+      clearTimeout @_timeoutId
+
+    @_timeoutId = setTimeout(( =>
+      delete @_timeoutId
+      @setState receivingDelta: false
+    ), 15000)
+
+    @setState receivingDelta: true
+
 
 module.exports = ActivitySidebar
diff --git a/internal_packages/worker-sync/lib/nylas-sync-worker-pool.coffee b/internal_packages/worker-sync/lib/nylas-sync-worker-pool.coffee
index d19074389..6410c5b3a 100644
--- a/internal_packages/worker-sync/lib/nylas-sync-worker-pool.coffee
+++ b/internal_packages/worker-sync/lib/nylas-sync-worker-pool.coffee
@@ -64,6 +64,7 @@ class NylasSyncWorkerPool
 
   _handleDeltas: (deltas) ->
     Actions.longPollReceivedRawDeltas(deltas)
+    Actions.longPollReceivedRawDeltasPing()
 
     # Create a (non-enumerable) reference from the attributes which we carry forward
     # back to their original deltas. This allows us to mark the deltas that the
diff --git a/src/flux/actions.coffee b/src/flux/actions.coffee
index 4cf0c7984..e5716d349 100644
--- a/src/flux/actions.coffee
+++ b/src/flux/actions.coffee
@@ -118,6 +118,7 @@ class Actions
 
   @longPollStateChanged: ActionScopeWorkWindow
   @longPollReceivedRawDeltas: ActionScopeWorkWindow
+  @longPollReceivedRawDeltasPing: ActionScopeGlobal
   @longPollProcessedDeltas: ActionScopeWorkWindow
   @longPollConnected: ActionScopeWorkWindow
   @longPollOffline: ActionScopeWorkWindow