Refactor create and update comment to emit events

webapp/components/Comment.vue

@@ -34,6 +34,7 @@
           :post="post"
           :comment="comment"
           @showEditCommentMenu="editCommentMenu"
+          @updateComment="updateComment"
         />
       </div>
       <div v-show="!openEditCommentMenu">
@@ -131,9 +132,11 @@ export default {
       return this.user.id === id
     },
     editCommentMenu(showMenu) {
-      console.log('editCommentMenu, showMenu: ', showMenu)
       this.openEditCommentMenu = showMenu
     },
+    async updateComment(comment) {
+      this.$emit('updateComment', comment)
+    },
     async deleteCommentCallback() {
       try {
         const {

webapp/components/CommentForm/CommentForm.vue

@@ -32,7 +32,6 @@
 import HcEditor from '~/components/Editor/Editor'
 import { COMMENT_MIN_LENGTH } from '../../constants/comment'
 import { minimisedUserQuery } from '~/graphql/User'
-import PostQuery from '~/graphql/PostQuery'
 import CommentMutations from '~/graphql/CommentMutations'
 
 export default {
@@ -94,21 +93,13 @@ export default {
             postId: this.post.id,
             content: this.form.content,
           },
-          update: async (store, { data: { CreateComment } }) => {
-            const data = await store.readQuery({
-              query: PostQuery(this.$i18n),
-              variables: { id: this.post.id },
-            })
-            data.Post[0].comments.push(CreateComment)
-            await store.writeQuery({ query: PostQuery(this.$i18n), data })
-          },
         }
       } else {
         mutateParams = {
           mutation: CommentMutations(this.$i18n).UpdateComment,
           variables: {
-            content: this.form.content,
             id: this.comment.id,
+            content: this.form.content,
           },
         }
       }
@@ -120,10 +111,18 @@ export default {
         .then(res => {
           this.loading = false
           if (!this.update) {
+            const {
+              data: { CreateComment },
+            } = res
+            this.$emit('createComment', CreateComment)
             this.clear()
             this.$toast.success(this.$t('post.comment.submitted'))
             this.disabled = false
           } else {
+            const {
+              data: { UpdateComment },
+            } = res
+            this.$emit('updateComment', UpdateComment)
             this.$toast.success(this.$t('post.comment.updated'))
             this.disabled = false
             this.closeEditWindow()

webapp/components/CommentList/CommentList.vue

@@ -22,7 +22,8 @@
         :key="comment.id"
         :comment="comment"
         :post="post"
-        @deleteComment="deleteComment"
+        @deleteComment="updateCommentList"
+        @updateComment="updateCommentList"
       />
     </div>
     <hc-empty v-else name="empty" icon="messages" />
@@ -41,9 +42,9 @@ export default {
     post: { type: Object, default: () => {} },
   },
   methods: {
-    deleteComment(deleted) {
+    updateCommentList(updatedComment) {
       this.post.comments = this.post.comments.map(comment => {
-        return comment.id === deleted.id ? deleted : comment
+        return comment.id === updatedComment.id ? updatedComment : comment
       })
     },
   },

webapp/pages/post/_id/_slug/index.vue

@@ -68,7 +68,7 @@
       <ds-section slot="footer">
         <hc-comment-list :post="post" />
         <ds-space margin-bottom="large" />
-        <hc-comment-form :post="post" />
+        <hc-comment-form :post="post" @createComment="createComment" />
       </ds-section>
     </ds-card>
   </transition>
@@ -151,6 +151,9 @@ export default {
         this.$toast.error(err.message)
       }
     },
+    async createComment(comment) {
+      this.post.comments.push(comment)
+    },
   },
   apollo: {
     Post: {