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

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) => {

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,

app/assets/javascripts/notes/stores/actions.js

 /* 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,14 +132,11 @@ 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 pollSuccessCallBack = (resp, commit, state, getters) => {
+  if (resp.notes.length) {
     const { notesById } = getters;
 
-      res.notes.forEach((note) => {
+    resp.notes.forEach((note) => {
       if (notesById[note.id]) {
         commit(types.UPDATE_NOTE, note);
       } else if (note.type === constants.DISCUSSION_NOTE) {
@@ -154,9 +152,39 @@ export const poll = ({ commit, state, getters }) => service
       }
     });
   }
-    return res;
+
+  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();
+    }
+  });
+};
+
 export const toggleAward = ({ commit, getters, dispatch }, data) => {
   const { endpoint, awardName, noteId, skipMutalityCheck } = data;
   const note = getters.notesById[noteId];