IssueNotesRefactor: Separate mounted blocks to methods.

2 files changed, 46 insertions, 38 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 177904543b6..d6e5a1d3b57 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -253,7 +253,7 @@ class AwardsHandler {
     });
 
     $('.emoji-menu').removeClass('is-visible');
-    $('.js-add-award.is-active').removeClass('is-active');
+    return $('.js-add-award.is-active').removeClass('is-active');
   }
 
   addAwardToEmojiBar(votesBlock, emoji, checkForMutuality) {
diff --git a/app/assets/javascripts/notes/components/issue_notes.vue b/app/assets/javascripts/notes/components/issue_notes.vue
index 4dea00a7dd9..bf801f8879f 100644
--- a/app/assets/javascripts/notes/components/issue_notes.vue
+++ b/app/assets/javascripts/notes/components/issue_notes.vue
@@ -44,6 +44,48 @@ export default {
     componentData(note) {
       return note.individual_note ? note.notes[0] : note;
     },
+    fetchNotes() {
+      const { discussionsPath } = this.$el.parentNode.dataset;
+
+      this.$store.dispatch('fetchNotes', discussionsPath)
+        .then(() => {
+          this.isLoading = false;
+
+          // Scroll to note if we have hash fragment in the page URL
+          Vue.nextTick(() => {
+            this.checkLocationHash();
+          });
+        })
+        .catch(() => {
+          new Flash('Something went wrong while fetching issue comments. Please try again.'); // eslint-disable-line
+        });
+    },
+    initPolling() {
+      const { notesPath, lastFetchedAt } = this.$el.parentNode.dataset;
+      const options = {
+        endpoint: `${notesPath}?full_data=1`,
+        lastFetchedAt,
+      };
+
+      // FIXME: @fatihacet Implement real polling mechanism
+      setInterval(() => {
+        this.$store.dispatch('poll', options)
+          .then((res) => {
+            options.lastFetchedAt = res.last_fetched_at;
+          })
+          .catch(() => {
+            new Flash('Something went wrong while fetching latest comments.'); // eslint-disable-line
+          });
+      }, 15000);
+    },
+    bindEventHubListeners() {
+      eventHub.$on('toggleAward', (data) => {
+        const { awardName, noteId } = data;
+        const endpoint = this.notesById[noteId].toggle_award_path;
+
+        this.$store.dispatch('toggleAward', { endpoint, awardName, noteId });
+      });
+    },
     checkLocationHash() {
       const hash = gl.utils.getLocationHash();
       const $el = $(`#${hash}`);
@@ -59,43 +101,9 @@ export default {
     },
   },
   mounted() {
-    const { discussionsPath, notesPath, lastFetchedAt } = this.$el.parentNode.dataset;
-
-    this.$store.dispatch('fetchNotes', discussionsPath)
-      .then(() => {
-        this.isLoading = false;
-
-        // Scroll to note if we have hash fragment in the page URL
-        Vue.nextTick(() => {
-          this.checkLocationHash();
-        });
-      })
-      .catch(() => {
-        new Flash('Something went wrong while fetching issue comments. Please try again.'); // eslint-disable-line
-      });
-
-    const options = {
-      endpoint: `${notesPath}?full_data=1`,
-      lastFetchedAt,
-    };
-
-    // FIXME: @fatihacet Implement real polling mechanism
-    setInterval(() => {
-      this.$store.dispatch('poll', options)
-        .then((res) => {
-          options.lastFetchedAt = res.last_fetched_at;
-        })
-        .catch(() => {
-          new Flash('Something went wrong while fetching latest comments.'); // eslint-disable-line
-        });
-    }, 6000);
-
-    eventHub.$on('toggleAward', (data) => {
-      const { awardName, noteId } = data;
-      const endpoint = this.notesById[noteId].toggle_award_path;
-
-      this.$store.dispatch('toggleAward', { endpoint, awardName, noteId });
-    });
+    this.fetchNotes();
+    this.initPolling();
+    this.bindEventHubListeners();
   },
 };
 </script>