[ci skip] Fix emoji being posted twice originating an error

5 files changed, 23 insertions, 42 deletions

diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 36e5609ab0c..8b1f9dbca01 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -119,6 +119,7 @@
     class="note timeline-entry"
     :id="noteAnchorId"
     :class="classNameBindings"
+    :data-award-url="note.toggle_award_path"
     :note-id="note.id">
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
index 1c4bd6f3560..2dd27d65096 100644
--- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
@@ -52,7 +52,12 @@
       // We need to do this otherwise we will render the same emoji over and over again.
       groupedAwards() {
         const awards = this.awards.reduce((acc, award) => {
-          Object.assign(acc, {[award.name]: [award]});
+          if (acc.hasOwnProperty(award.name)) {
+            acc[award.name].push(award);
+          } else {
+            Object.assign(acc, {[award.name]: [award]});
+          }
+
           return acc;
         }, {});
 
@@ -67,6 +72,7 @@
           orderedAwards.thumbsdown = thumbsdown;
           delete awards.thumbsdown;
         }
+
         return  Object.assign({}, orderedAwards, awards);
       },
       isAuthoredByMe() {
@@ -75,7 +81,7 @@
     },
     methods: {
       ...mapActions([
-        'toggleAward',
+        'toggleAwardRequest',
       ]),
       getAwardHTML(name) {
         return Emoji.glEmojiTag(name);
@@ -147,7 +153,7 @@
           awardName: awardName === "100" ? 100: awardName,
         };
 
-        this.toggleAward(data)
+        this.toggleAwardRequest(data)
           .catch(() => Flash('Something went wrong on our end.'));
       },
     },
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index ccda0992f2b..734970d3bfc 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -99,10 +99,8 @@
       bindEventHubListeners() {
         this.$el.parentElement.addEventListener('toggleAward', (event) => {
           const { awardName, noteId } = event.detail;
-          const endpoint = this.notesById[noteId].toggle_award_path;
+          this.actionToggleAward({ awardName, noteId })
 
-          this.actionToggleAward({ endpoint, awardName, noteId })
-            .catch((error) => Flash('Something went wrong on our end.'));
         });
 
         // JQuery is needed here because it is a custom event being dispatched with jQuery.
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 6d60c46d49b..0c9eb046298 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -174,7 +174,7 @@ export const poll = ({ commit, state, getters }) => {
   if (!Visibility.hidden()) {
     eTagPoll.makeRequest();
   } else {
-    this.service.poll(requestData);
+    service.poll(requestData);
   }
 
   Visibility.change(() => {
@@ -186,38 +186,17 @@ export const poll = ({ commit, state, getters }) => {
   });
 };
 
-export const toggleAward = ({ commit, getters, dispatch }, data) => {
-  const { endpoint, awardName, noteId, skipMutalityCheck } = data;
-  const note = getters.notesById[noteId];
+export const toggleAward = ({ commit, state, getters, dispatch }, { awardName, noteId }) => {
+  commit(types.TOGGLE_AWARD, { awardName, note: getters.notesById[noteId] });
+};
 
+export const toggleAwardRequest = ({ commit, getters, dispatch }, data) => {
+  const { endpoint, awardName } = data;
   return service
     .toggleAward(endpoint, { name: awardName })
     .then(res => res.json())
     .then(() => {
-      commit(types.TOGGLE_AWARD, { awardName, note });
-
-      if (!skipMutalityCheck &&
-        (awardName === constants.EMOJI_THUMBSUP || awardName === constants.EMOJI_THUMBSDOWN)) {
-        const counterAward = awardName === constants.EMOJI_THUMBSUP ?
-          constants.EMOJI_THUMBSDOWN :
-          constants.EMOJI_THUMBSUP;
-
-        const targetNote = getters.notesById[noteId];
-        let noteHasAwardByCurrentUser = false;
-
-        targetNote.award_emoji.forEach((a) => {
-          if (a.name === counterAward && a.user.id === window.gon.current_user_id) {
-            noteHasAwardByCurrentUser = true;
-          }
-        });
-
-        if (noteHasAwardByCurrentUser) {
-          Object.assign(data, { awardName: counterAward });
-          Object.assign(data, { skipMutalityCheck: true });
-
-          dispatch(types.TOGGLE_AWARD, data);
-        }
-      }
+      dispatch('toggleAward', data);
     });
 };
 
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 15179a22b83..f77f19c9b3c 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -102,16 +102,13 @@ export default {
   [types.TOGGLE_AWARD](state, data) {
     const { awardName, note } = data;
     const { id, name, username } = state.userData;
-    let index = -1;
 
-    note.award_emoji.forEach((a, i) => {
-      if (a.name === awardName && a.user.id === id) {
-        index = i;
-      }
-    });
+    const hasEmojiAwardedByCurrentUser = note.award_emoji
+      .filter(emoji => emoji.name === data.awardName && emoji.user.id === id);
 
-    if (index > -1) { // If current user has awarded this emoji, remove it.
-      note.award_emoji.splice(index, 1);
+    if (hasEmojiAwardedByCurrentUser.length) {
+      // If current user has awarded this emoji, remove it.
+      note.award_emoji.splice(note.award_emoji.indexOf(hasEmojiAwardedByCurrentUser[0]), 1);
     } else {
       note.award_emoji.push({
         name: awardName,