IssueNotesRefactor: Refactor toggle to work with delegated handler.

3 files changed, 16 insertions, 12 deletions

diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index e53e6d04b7e..954a6e3b7ee 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -43,6 +43,13 @@ export default {
       this.signInLink = signInLink.getAttribute('href');
     }
   },
+  methods: {
+    toggleDiscussion() {
+      this.$store.commit('toggleDiscussion', {
+        discussionId: this.note.id,
+      });
+    }
+  },
 };
 </script>
 
@@ -64,7 +71,7 @@ export default {
               :createdAt="discussion.created_at"
               :notePath="discussion.path"
               :includeToggle="true"
-              :discussionId="note.id"
+              :toggleHandler="toggleDiscussion"
               actionText="started a discussion" />
             <issue-note-edited-text
               v-if="note.last_updated_by"
diff --git a/app/assets/javascripts/notes/components/issue_note_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue
index f4136a129b6..bf944732ede 100644
--- a/app/assets/javascripts/notes/components/issue_note_header.vue
+++ b/app/assets/javascripts/notes/components/issue_note_header.vue
@@ -30,21 +30,14 @@ export default {
       required: false,
       default: false,
     },
-    discussionId: {
-      type: String,
+    toggleHandler: {
+      type: Function,
       required: false,
     },
   },
   components: {
     TimeAgoTooltip,
   },
-  methods: {
-    toggle() {
-      this.$store.commit('toggleDiscussion', {
-        discussionId: this.discussionId,
-      });
-    },
-  },
 };
 </script>
 
@@ -78,7 +71,7 @@ export default {
       v-if="includeToggle"
       class="discussion-actions">
       <button
-        @click="toggle"
+        @click="toggleHandler"
         class="note-action-button discussion-toggle-button js-toggle-button"
         type="button">
           <i
diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js
index 0c1c6836325..9fd95d892fa 100644
--- a/app/assets/javascripts/notes/stores/issue_notes_store.js
+++ b/app/assets/javascripts/notes/stores/issue_notes_store.js
@@ -3,6 +3,10 @@
 
 import service from '../services/issue_notes_service';
 
+const findNoteObjectById = (notes, id) => {
+  return notes.filter(n => n.id === id)[0];
+};
+
 const state = {
   notes: [],
 };
@@ -18,7 +22,7 @@ const mutations = {
     storeState.notes = notes;
   },
   toggleDiscussion(storeState, { discussionId }) {
-    const [discussion] = storeState.notes.filter(note => note.id === discussionId);
+    const discussion = findNoteObjectById(storeState.notes, discussionId);
 
     discussion.expanded = !discussion.expanded;
   },