Add optimistic update for the new note wizard

client/src/components/content-blocks/ContentComponent.vue

@@ -124,9 +124,11 @@
             });
           },
           optimisticResponse: {
-            note: null,
-            uuid: uuid,
-            __typename: 'ContentBlockBookmarkNode'
+            __typename: 'Mutation',
+            updateContentBookmark: {
+              __typename: 'UpdateContentBookmarkPayload',
+              success: true
+            }
           }
         });
       },

client/src/components/notes/NewNoteWizard.vue

@@ -6,7 +6,7 @@
   import NoteForm from '@/components/notes/NoteForm';
 
   import ADD_NOTE_MUTATION from '@/graphql/gql/mutations/addNote.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+  import CONTENT_BLOCK_QUERY from '@/graphql/gql/contentBlockQuery.gql';
 
   import {mapGetters} from 'vuex';
 
@@ -27,23 +27,60 @@
 
     methods: {
       addNote(note) {
+        const content = this.currentContent;
+        const contentBlock = this.currentContentBlock;
+        const text = note.text;
+
         this.$apollo.mutate({
           mutation: ADD_NOTE_MUTATION,
           variables: {
             input: {
               note: {
-                content: this.currentContent,
-                contentBlock: this.currentContentBlock,
-                text: note.text
+                content,
+                contentBlock,
+                text
               }
             }
           },
-          refetchQueries: [{
-            query: MODULE_DETAILS_QUERY,
-            variables: {
-              slug: this.$route.params.slug
+          update: (store, {data: {addNote: {note}}}) => {
+            const query = CONTENT_BLOCK_QUERY;
+            const variables = {id: contentBlock};
+            const data = store.readQuery({
+              query,
+              variables
+            });
+
+            const bookmarks = data.contentBlock.bookmarks;
+
+            let index = bookmarks.findIndex(element => {
+              return element.uuid === content;
+            });
+
+            if (index > -1) {
+              let el = bookmarks[index];
+              el.note = note;
+              bookmarks.splice(index, 1, el);
             }
-          }]
+
+            data.contentBlock.bookmarks = bookmarks;
+
+            store.writeQuery({
+              data,
+              query,
+              variables
+            });
+          },
+          optimisticResponse: {
+            __typename: 'Mutation',
+            addNote: {
+              __typename: 'AddNotePayload',
+              note: {
+                __typename: 'NoteNode',
+                id: -1,
+                text: text
+              }
+            }
+          }
         }).then(() => {
           this.$store.dispatch('hideModal');
         });

client/src/components/notes/NoteForm.vue

@@ -7,7 +7,7 @@
     <div slot="footer">
       <a class="button button--primary" data-cy="modal-save-button"
          @click="$emit('save', localNote)">Speichern</a>
-      <a class="button" @click="$emit('hide')">Löschen</a>
+      <a class="button" @click="$emit('hide')">Abbrechen</a>
     </div>
 
   </modal>