From ba1e62da214f11e6cb9750f0e69efec4c74a98b6 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 26 Aug 2019 18:54:21 +0200
Subject: [PATCH 1/2] Update the apollo cache

---
 webapp/components/Comment.vue      | 44 ++++++++++++++++++------------
 webapp/graphql/CommentMutations.js |  7 +++++
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 6d3b05eff..9b3f2861b 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -62,12 +62,13 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import { mapGetters, mapMutations } from 'vuex'
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcEditCommentForm from '~/components/EditCommentForm/EditCommentForm'
+import CommentMutations from '~/graphql/CommentMutations'
+import PostQuery from '~/graphql/PostQuery'
 
 export default {
   data: function() {
@@ -140,24 +141,33 @@ export default {
       this.openEditCommentMenu = showMenu
       this.setEditPending(showMenu)
     },
-    async deleteCommentCallback() {
-      try {
-        var gqlMutation = gql`
-          mutation($id: ID!) {
-            DeleteComment(id: $id) {
-              id
-            }
-          }
-        `
-        await this.$apollo.mutate({
-          mutation: gqlMutation,
+    deleteCommentCallback() {
+      this.$apollo
+        .mutate({
+          mutation: CommentMutations(this.$i18n).DeleteComment,
           variables: { id: this.comment.id },
+          update: store => {
+            const data = store.readQuery({
+              query: PostQuery(this.$i18n),
+              variables: { id: this.post.id },
+            })
+
+            const index = data.Post[0].comments.findIndex(
+              deletedComment => deletedComment.id === this.comment.id,
+            )
+            if (index !== -1) {
+              data.Post[0].comments.splice(index, 1)
+            }
+            store.writeQuery({ query: PostQuery(this.$i18n), data })
+          },
+        })
+        .then(res => {
+          this.$toast.success(this.$t(`delete.comment.success`))
+          this.$emit('deleteComment')
+        })
+        .catch(err => {
+          this.$toast.error(err.message)
         })
-        this.$toast.success(this.$t(`delete.comment.success`))
-        this.$emit('deleteComment')
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
     },
   },
 }
diff --git a/webapp/graphql/CommentMutations.js b/webapp/graphql/CommentMutations.js
index bf4fc33ea..b772923d4 100644
--- a/webapp/graphql/CommentMutations.js
+++ b/webapp/graphql/CommentMutations.js
@@ -51,5 +51,12 @@ export default i18n => {
         }
       }
     `,
+    DeleteComment: gql`
+      mutation($id: ID!) {
+        DeleteComment(id: $id) {
+          id
+        }
+      }
+    `,
   }
 }

From 470da183811dc37b2bf821538c4dd004bf552c19 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 27 Aug 2019 09:55:05 +0200
Subject: [PATCH 2/2] Revert to using async/await, follow @appinteractive PR
 suggestions

---
 webapp/components/Comment.vue                 | 24 +++++++++----------
 webapp/components/CommentForm/CommentForm.vue |  6 ++---
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 9b3f2861b..3d0fe21c6 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -141,13 +141,13 @@ export default {
       this.openEditCommentMenu = showMenu
       this.setEditPending(showMenu)
     },
-    deleteCommentCallback() {
-      this.$apollo
-        .mutate({
+    async deleteCommentCallback() {
+      try {
+        await this.$apollo.mutate({
           mutation: CommentMutations(this.$i18n).DeleteComment,
           variables: { id: this.comment.id },
-          update: store => {
-            const data = store.readQuery({
+          update: async store => {
+            const data = await store.readQuery({
               query: PostQuery(this.$i18n),
               variables: { id: this.post.id },
             })
@@ -158,16 +158,14 @@ export default {
             if (index !== -1) {
               data.Post[0].comments.splice(index, 1)
             }
-            store.writeQuery({ query: PostQuery(this.$i18n), data })
+            await store.writeQuery({ query: PostQuery(this.$i18n), data })
           },
         })
-        .then(res => {
-          this.$toast.success(this.$t(`delete.comment.success`))
-          this.$emit('deleteComment')
-        })
-        .catch(err => {
-          this.$toast.error(err.message)
-        })
+        this.$toast.success(this.$t(`delete.comment.success`))
+        this.$emit('deleteComment')
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
     },
   },
 }
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 14b28b91b..8439165d4 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -80,13 +80,13 @@ export default {
             postId: this.post.id,
             content: this.form.content,
           },
-          update: (store, { data: { CreateComment } }) => {
-            const data = store.readQuery({
+          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)
-            store.writeQuery({ query: PostQuery(this.$i18n), data })
+            await store.writeQuery({ query: PostQuery(this.$i18n), data })
           },
         })
         .then(res => {