[ci skip] Use eTag polling with Poll utility to allow stoping polling when visibily changes

1 files changed, 49 insertions, 21 deletions

diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index d7059f462a4..f0d176e858c 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,5 +1,6 @@
 /* global Flash */
-
+import Visibility from 'visibilityjs';
+import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
 import * as utils from './utils';
 import * as constants from '../constants';
@@ -131,31 +132,58 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
     });
 };
 
-export const poll = ({ commit, state, getters }) => service
-  .poll(state.notesData.notesPath, state.lastFetchedAt)
-  .then(res => res.json())
-  .then((res) => {
-    if (res.notes.length) {
-      const { notesById } = getters;
-
-      res.notes.forEach((note) => {
-        if (notesById[note.id]) {
-          commit(types.UPDATE_NOTE, note);
-        } else if (note.type === constants.DISCUSSION_NOTE) {
-          const discussion = utils.findNoteObjectById(state.notes, note.discussion_id);
-
-          if (discussion) {
-            commit(types.ADD_NEW_REPLY_TO_DISCUSSION, note);
-          } else {
-            commit(types.ADD_NEW_NOTE, note);
-          }
+const pollSuccessCallBack = (resp, commit, state, getters) => {
+  if (resp.notes.length) {
+    const { notesById } = getters;
+
+    resp.notes.forEach((note) => {
+      if (notesById[note.id]) {
+        commit(types.UPDATE_NOTE, note);
+      } else if (note.type === constants.DISCUSSION_NOTE) {
+        const discussion = utils.findNoteObjectById(state.notes, note.discussion_id);
+
+        if (discussion) {
+          commit(types.ADD_NEW_REPLY_TO_DISCUSSION, note);
         } else {
           commit(types.ADD_NEW_NOTE, note);
         }
-      });
+      } else {
+        commit(types.ADD_NEW_NOTE, note);
+      }
+    });
+  }
+
+  commit(types.SET_LAST_FETCHED_AT, resp.lastFetchedAt);
+
+  return resp;
+};
+
+export const poll = ({ commit, state, getters }) => {
+  const requestData = { endpoint: state.notesData.notesPath, lastFetchedAt: state.lastFetchedAt };
+
+  const eTagPoll = new Poll({
+    resource: service,
+    method: 'poll',
+    data: requestData,
+    successCallback: resp => resp.json()
+      .then(data => pollSuccessCallBack(data, commit, state, getters)),
+    errorCallback: () => Flash('Something went wrong while fetching latest comments.'),
+  });
+
+  if (!Visibility.hidden()) {
+    eTagPoll.makeRequest();
+  } else {
+    this.service.poll(requestData);
+  }
+
+  Visibility.change(() => {
+    if (!Visibility.hidden()) {
+      eTagPoll.restart();
+    } else {
+      eTagPoll.stop();
     }
-    return res;
   });
+};
 
 export const toggleAward = ({ commit, getters, dispatch }, data) => {
   const { endpoint, awardName, noteId, skipMutalityCheck } = data;