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

3 files changed, 53 insertions, 38 deletions

diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index d84976ad173..557f0536a91 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -88,26 +88,12 @@
               this.checkLocationHash();
             });
           })
-          .catch((error) => {
-            console.log(error)
-            Flash('Something went wrong while fetching issue comments. Please try again.')
-            });
+          .catch((error) => Flash('Something went wrong while fetching issue comments. Please try again.'));
       },
       initPolling() {
         this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
 
-        // FIXME: @fatihacet Implement real polling mechanism
-        // TODO: FILIPA: DEAL WITH THIS
-        setInterval(() => {
-          this.poll()
-            .then((res) => {
-              this.setLastFetchedAt(res.lastFetchedAt);
-            })
-            .catch((error) =>{
-              console.log(error)
-              Flash('Something went wrong while fetching latest comments.')
-            } );
-        }, 15000);
+        this.poll();
       },
       bindEventHubListeners() {
         this.$el.parentElement.addEventListener('toggleAward', (event) => {
diff --git a/app/assets/javascripts/notes/services/issue_notes_service.js b/app/assets/javascripts/notes/services/issue_notes_service.js
index c80e23f02cb..b51b0cb2013 100644
--- a/app/assets/javascripts/notes/services/issue_notes_service.js
+++ b/app/assets/javascripts/notes/services/issue_notes_service.js
@@ -19,7 +19,8 @@ export default {
   createNewNote(endpoint, data) {
     return Vue.http.post(endpoint, data, { emulateJSON: true });
   },
-  poll(endpoint, lastFetchedAt) {
+  poll(data = {}) {
+    const { endpoint, lastFetchedAt } = data;
     const options = {
       headers: {
         'X-Last-Fetched-At': lastFetchedAt,
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;