Find last note created by current user through vue instead of querying the DOM

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

 <script>
   /* global Flash */
 
-  import { mapActions } from 'vuex';
+  import { mapActions, mapGetters } from 'vuex';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
   import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
@@ -30,6 +30,9 @@
       issueNoteSignedOutWidget,
     },
     computed: {
+       ...mapGetters([
+        'getCurrentUserLastNote',
+      ]),
       isLoggedIn() {
         return window.gon.current_user_id;
       },
@@ -126,13 +129,13 @@
       setNoteType(type) {
         this.noteType = type;
       },
-      editMyLastNote() {
+      editCurrentUserLastNote() {
         if (this.note === '') {
-          const myLastNoteId = $('.js-my-note').last().attr('id');
-          debugger;
-          if (myLastNoteId) {
+          const lastNote = this.getCurrentUserLastNote(window.gon.current_user_id);
+          console.log(lastNote)
+          if (lastNote) {
             eventHub.$emit('enterEditMode', {
-              noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
+              noteId: lastNote.id,
             });
           }
         }
@@ -185,7 +188,7 @@
                 ref="textarea"
                 slot="textarea"
                 placeholder="Write a comment or drag your files here..."
-                @keydown.up="editMyLastNote"
+                @keydown.up="editCurrentUserLastNote()"
                 @keydown.meta.enter="handleSave()">
               </textarea>
             </markdown-field>

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

@@ -164,8 +164,9 @@
                   <issue-note-form
                     v-if="isReplying"
                     saveButtonTitle="Comment"
-                    :update-handler="saveReply"
-                    :cancel-handler="cancelReplyForm"
+                    :discussion="note"
+                    @handleFormUpdate="saveReply"
+                    @cancelFormEdition="cancelReplyForm"
                     ref="noteForm"
                     />
                   <issue-note-signed-out-widget v-if="!canReply" />

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

@@ -118,7 +118,8 @@
   <li
     class="note timeline-entry"
     :id="noteAnchorId"
-    :class="classNameBindings">
+    :class="classNameBindings"
+    :note-id="note.id">
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
         <user-avatar-link

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

@@ -19,14 +19,6 @@
         required: false,
         default: false,
       },
-      formUpdateHandler: {
-        type: Function,
-        required: true,
-      },
-      formCancelHandler: {
-        type: Function,
-        required: true,
-      },
     },
     components: {
       issueNoteEditedText,
@@ -93,7 +85,7 @@
       v-if="note.last_edited_by"
       :edited-at="note.last_edited_at"
       :edited-by="note.last_edited_by"
-      actionText="Edited"
+      action-text="Edited"
       />
     <issue-note-awards-list
       v-if="note.award_emoji.length"

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

@@ -18,6 +18,10 @@
         required: false,
         default: 'Save comment',
       },
+      discussion: {
+        type: Array,
+        required: false,
+      }
     },
     data() {
       const { getIssueData, getNotesData } =  this.$store.getters;
@@ -44,9 +48,14 @@
       },
       editMyLastNote() {
         if (this.note === '') {
+          // TODO: HANDLE THIS WITHOUTH JQUERY OR QUERYING THE DOM
+          // FIND the discussion we are in and the last comment on that discussion
           const discussion = $(this.$el).closest('.discussion-notes');
           const myLastNoteId = discussion.find('.js-my-note').last().attr('id');
 
+          debugger;
+          const lastNoteInDiscussion = this.$store.getters.getDiscussionLastNote(this.discussion);
+
           if (myLastNoteId) {
             eventHub.$emit('enterEditMode', {
               noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
@@ -116,7 +125,7 @@
           {{saveButtonTitle}}
         </button>
         <button
-          @click="cancelHandler"
+          @click="cancelHandler()"
           class="btn btn-nr btn-cancel note-edit-cancel"
           type="button">
           Cancel

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

@@ -60,6 +60,7 @@
         setNotesData: 'setNotesData',
         setIssueData: 'setIssueData',
         setUserData: 'setUserData',
+        setLastFetchedAt: 'setLastFetchedAt'
       }),
       getComponentName(note) {
         if (note.isPlaceholderNote) {
@@ -86,7 +87,10 @@
               this.checkLocationHash();
             });
           })
-          .catch(() => Flash('Something went wrong while fetching issue comments. Please try again.'));
+          .catch((error) => {
+            console.log(error)
+            Flash('Something went wrong while fetching issue comments. Please try again.')
+            });
       },
       initPolling() {
         this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
@@ -98,7 +102,10 @@
             .then((res) => {
               this.setLastFetchedAt(res.lastFetchedAt);
             })
-            .catch(() => Flash('Something went wrong while fetching latest comments.'));
+            .catch((error) =>{
+              console.log(error)
+              Flash('Something went wrong while fetching latest comments.')
+            } );
         }, 15000);
       },
       bindEventHubListeners() {

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

@@ -21,3 +21,16 @@ export const notesById = (state) => {
 
   return notesByIdObject;
 };
+
+const reverseNotes = array => array.slice(0).reverse();
+const isLastNote = (note, userId) => !note.system && note.author.id === userId;
+
+export const getCurrentUserLastNote = state => userId => reverseNotes(state.notes)
+  .reduce((acc, note) => {
+    acc.push(reverseNotes(note.notes).find(el => isLastNote(el, userId)));
+    return acc;
+  }, []).filter(el => el !== undefined)[0];
+
+export const getDiscussionLastNote = state => (discussion, userId) => reverseNotes(discussion[0].notes)
+  .find(el => isLastNote(el, userId));
+