feat: fix notes changes auto-saving, rework editNote mutation

Author: vadympop

components/notesLayout/Note.vue

@@ -77,7 +77,8 @@ export default {
     pageId() {
       return this.$route.params.pageID
     },
-    ...mapState('notes', ['currentNotes'])
+    ...mapState('notes', ['currentNotes']),
+    ...mapState('auth', ['currentUser'])
   },
   methods: {
     focus() {
@@ -93,24 +94,24 @@ export default {
       }
     },
     addNote() {
-      this.$store.commit('notes/addNote', this.pageId)
+      this.$store.commit('notes/addNote', { pageId: this.pageId, author: this.currentUser.userId })
       setTimeout(() => {
         this.$parent.$refs[
           this.currentNotes[this.currentNotes.length - 1]?.noteId
         ][0]?.focus()
       }, 100)
     },
     save() {
-      const updatedData = {
-        content: this.updatedContent,
+      this.$store.commit('notes/editNote', {
         page: this.page,
         noteId: this.noteId,
-        styles: this.styles,
         author: this.author,
-        position: this.position,
-        newNote: this.newNote
-      }
-      this.$store.commit('notes/editNote', updatedData)
+        updated: {
+          content: this.updatedContent,
+          styles: this.styles,
+          position: this.position,
+        }
+      })
     }
   }
 }

layouts/default.vue

@@ -7,7 +7,7 @@
       <div class="header">
         <v-toolbar-title class="logo">
           <v-avatar><img src="" alt="" width="32px" /></v-avatar>
-          <span class="logo-text">NotesAPP</span>
+          <nuxt-link to="/" class="logo-text">NotesAPP</nuxt-link>
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <v-toolbar-items class="d-flex align-center">
@@ -79,6 +79,8 @@ export default {
 
 .logo-text {
   margin-left: 5px;
+  color: inherit;
+  text-decoration: none;
 }
 
 .profile-card-nickname {

layouts/notes.vue

@@ -104,7 +104,7 @@ export default {
     )
   },
   methods: {
-    ...mapMutations('notes', ['clearChangedNotes', 'clearRemovedNotes']),
+    ...mapMutations('notes', ['clearChangedNotes', 'clearRemovedNotes', 'removeFromChangedNotes']),
     ...mapActions('notes', ['clearNewNotes']),
     saveAll() {
       this.saveNewNotes()
@@ -156,9 +156,17 @@ export default {
         return
       }
 
-      const changedNotes = this.currentNotes.filter((note) =>
-        this.changedNotes.includes(note.noteId)
-      )
+      let changedNotes = this.currentNotes.filter((note) => this.changedNotes.includes(note.noteId))
+      const newNotesInChangedNotes = changedNotes.filter(note => note.newNote)
+      if(newNotesInChangedNotes.length > 0) {
+        this.saveNewNotes()
+        this.removeFromChangedNotes(...newNotesInChangedNotes.map(note => note.noteId))
+        changedNotes = changedNotes.filter(note => !note.newNote)
+      }
+      if(changedNotes.length <= 0) {
+        return
+      }
+
       console.log('Change notes', changedNotes)
       this.$axios.post(
         'notes/update',

pages/_pageID.vue

@@ -46,6 +46,7 @@ export default {
     },
     ...mapState('notes', ['currentNotes']),
     ...mapState('pages', ['currentPage']),
+    ...mapState('auth', ['currentUser']),
     ...mapGetters('pages', ['rootPages'])
   },
   watch: {
@@ -74,7 +75,7 @@ export default {
     ...mapActions('pages', ['setCurrentPage', 'editPage']),
     ...mapActions('notes', ['getNotes']),
     addNote() {
-      this.$store.commit('notes/addNote', this.pageId)
+      this.$store.commit('notes/addNote', { pageId: this.pageId, author: this.currentUser.userId })
       setTimeout(() => {
         this.$refs[
           this.currentNotes[this.currentNotes.length - 1]?.noteId

store/notes/actions.js

@@ -4,9 +4,10 @@ export default {
       .filter((note) => note.newNote)
       .forEach((note) => {
         commit('editNote', {
-          ...note,
-          newNote: false,
-          preventApiReq: true
+          page: note.page,
+          author: note.author,
+          noteId: note.noteId,
+          updated: { newNote: false }
         })
       })
   },

store/notes/mutations.js

@@ -1,7 +1,7 @@
 import { v4 as uuid4 } from 'uuid'
 
 export default {
-  addNote(state, pageId) {
+  addNote(state, { pageId, author }) {
     const noteId = uuid4()
     state.newNotes.push(noteId)
     state.notes[pageId].push({
@@ -10,7 +10,7 @@ export default {
       position: state.notes[pageId].length,
       content: null,
       styles: { someV: 'someV' },
-      author: 'a',
+      author,
       newNote: true
     })
   },
@@ -23,29 +23,25 @@ export default {
   clearChangedNotes(state) {
     state.changedNotes = []
   },
+  removeFromChangedNotes(state, ...notesIds) {
+    notesIds.forEach(noteId => {
+      state.changedNotes.splice(state.changedNotes.indexOf(noteId), 1)
+    })
+  },
   setCurrentNotes(state, pageId) {
     state.currentNotes = state.notes[pageId] || []
   },
-  editNote(
-    state,
-    { page, noteId, styles, author, content, position, newNote, preventApiReq }
-  ) {
+  editNote(state, { page, noteId, author, updated }) {
+    console.log(page, noteId, author, updated, 'editNote')
     if (state.removedNotes.includes(noteId)) {
       return
     }
 
     const foundNote = state.notes[page].find((note) => note.noteId === noteId)
-    state.notes[page][state.notes[page].indexOf(foundNote)] = {
-      noteId,
-      page,
-      styles,
-      author,
-      content,
-      position,
-      newNote
-    }
+    const foundNoteIndex = state.notes[page].indexOf(foundNote)
+    state.notes[page][foundNoteIndex] = { ...foundNote, ...updated, page, noteId, author }
 
-    if (!state.changedNotes.includes(noteId) && !preventApiReq) {
+    if (!state.changedNotes.includes(noteId)) {
       state.changedNotes.push(noteId)
     }
   },