IssueNotesRefactor: Implement emoji actions from emoji list.

app/assets/javascripts/notes/components/issue_note.vue

@@ -82,7 +82,7 @@ export default {
       this.$store.dispatch('updateNote', data)
         .then(() => {
           this.isEditing = false;
-          $(this.$refs['noteBody'].$el).renderGFM();
+          $(this.$refs.noteBody.$el).renderGFM();
         })
         .catch(() => {
           new Flash('Something went wrong while editing your comment. Please try again.'); // eslint-disable-line

app/assets/javascripts/notes/components/issue_note_actions.vue

 <script>
-import Vue from 'vue';
 import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
 import emojiSmile from 'icons/_emoji_smile.svg';
 import emojiSmiley from 'icons/_emoji_smiley.svg';

app/assets/javascripts/notes/components/issue_note_awards_list.vue

 <script>
+/* global Flash */
+
 import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
 import emojiSmile from 'icons/_emoji_smile.svg';
 import emojiSmiley from 'icons/_emoji_smiley.svg';
@@ -10,10 +12,18 @@ export default {
       type: Array,
       required: true,
     },
+    toggleAwardPath: {
+      type: String,
+      required: true,
+    },
     noteAuthorId: {
       type: Number,
       required: true,
     },
+    noteId: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     const userId = window.gon.current_user_id;
@@ -129,6 +139,22 @@ export default {
 
       return title;
     },
+    handleAward(awardName, isAwarded) {
+      const data = {
+        endpoint: this.toggleAwardPath,
+        action: isAwarded ? 'remove' : 'add',
+        noteId: this.noteId,
+        awardName,
+      };
+
+      this.$store.dispatch('toggleAward', data)
+        .then(() => {
+          $(this.$el).find('.award-control').tooltip('fixTitle');
+        })
+        .catch(() => {
+          new Flash('Something went wrong on our end.'); // eslint-disable-line
+        });
+    },
   },
 };
 </script>
@@ -138,9 +164,10 @@ export default {
     <div class="awards js-awards-block">
       <button
         v-for="(awardList, awardName) in groupedAwards"
-        class="btn award-control has-tooltip"
         :class="getAwardClassBindings(awardList, awardName)"
         :title="awardTitle(awardList)"
+        @click="handleAward(awardName, amIAwarded(awardList))"
+        class="btn award-control has-tooltip"
         data-placement="bottom"
         type="button">
         <span v-html="getAwardHTML(awardName)"></span>

app/assets/javascripts/notes/components/issue_note_body.vue

@@ -64,7 +64,9 @@ export default {
       actionText="Edited" />
     <issue-note-awards-list
       v-if="note.award_emoji.length"
+      :noteId="note.id"
+      :noteAuthorId="note.author.id"
       :awards="note.award_emoji"
-      :noteAuthorId="note.author.id" />
+      :toggleAwardPath="note.toggle_award_path" />
   </div>
 </template>

app/assets/javascripts/notes/components/issue_note_header.vue

@@ -41,7 +41,7 @@ export default {
   data() {
     return {
       isExpanded: true,
-    }
+    };
   },
   computed: {
     toggleChevronClass() {

app/assets/javascripts/notes/components/issue_notes.vue

@@ -3,7 +3,6 @@
 
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { mapGetters } from 'vuex';
 import storeOptions from '../stores/issue_notes_store';
 import IssueNote from './issue_note.vue';
 import IssueDiscussion from './issue_discussion.vue';
@@ -28,9 +27,9 @@ export default {
     IssueCommentForm,
   },
   computed: {
-    ...mapGetters([
+    ...Vuex.mapGetters([
       'notes',
-    ])
+    ]),
   },
   methods: {
     component(note) {

app/assets/javascripts/notes/services/issue_notes_service.js

@@ -28,4 +28,7 @@ export default {
 
     return Vue.http.get(endpoint, options);
   },
+  toggleAward(endpoint, data) {
+    return Vue.http.post(endpoint, data, { emulateJSON: true });
+  },
 };

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

@@ -84,6 +84,29 @@ const mutations = {
 
     storeState.notes.push(noteData);
   },
+  toggleAward(storeState, data) {
+    const { awardName, note, action } = data;
+    const { id, name, username } = window.gl.currentUserData;
+
+    if (action === 'add') {
+      note.award_emoji.push({
+        name: awardName,
+        user: { id, name, username },
+      });
+    } else if (action === 'remove') {
+      let index = -1;
+
+      note.award_emoji.forEach((a, i) => {
+        if (a.name === awardName && a.user.id === id) {
+          index = i;
+        }
+      });
+
+      if (index > -1) {
+        note.award_emoji.splice(index, 1);
+      }
+    }
+  },
 };
 
 const actions = {
@@ -124,6 +147,7 @@ const actions = {
   },
   createNewNote(context, data) {
     const { endpoint, noteData } = data;
+
     return service
       .createNewNote(endpoint, noteData)
       .then(res => res.json())
@@ -164,6 +188,17 @@ const actions = {
         return res;
       });
   },
+  toggleAward(context, data) {
+    const { endpoint, awardName, action, noteId } = data;
+    const note = context.getters.notesById[noteId];
+
+    return service
+      .toggleAward(endpoint, { name: awardName })
+      .then(res => res.json())
+      .then(() => {
+        context.commit('toggleAward', { awardName, note, action });
+      });
+  },
 };
 
 export default {