Replace deleteComment with a more KISS solution

backend/src/schema/resolvers/users.js

@@ -179,6 +179,7 @@ export default {
       hasOne: {
         invitedBy: '<-[:INVITED]-(related:User)',
         disabledBy: '<-[:DISABLED]-(related:User)',
+        location: '-[:IS_IN]->(related:Location)',
       },
       hasMany: {
         followedBy: '<-[:FOLLOWS]-(related:User)',

webapp/components/Comment.vue

@@ -68,7 +68,6 @@ 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() {
@@ -143,26 +142,14 @@ export default {
     },
     async deleteCommentCallback() {
       try {
-        await this.$apollo.mutate({
+        const {
+          data: { DeleteComment },
+        } = await this.$apollo.mutate({
           mutation: CommentMutations(this.$i18n).DeleteComment,
           variables: { id: this.comment.id },
-          update: async store => {
-            const data = await 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)
-            }
-            await store.writeQuery({ query: PostQuery(this.$i18n), data })
-          },
         })
         this.$toast.success(this.$t(`delete.comment.success`))
-        this.$emit('deleteComment')
+        this.$emit('deleteComment', DeleteComment)
       } catch (err) {
         this.$toast.error(err.message)
       }

webapp/components/CommentList/CommentList.vue

@@ -18,11 +18,11 @@
     <ds-space margin-bottom="large" />
     <div v-if="post.comments && post.comments.length" id="comments" class="comments">
       <comment
-        v-for="(comment, index) in post.comments"
+        v-for="comment in post.comments"
         :key="comment.id"
         :comment="comment"
         :post="post"
-        @deleteComment="post.comments.splice(index, 1)"
+        @deleteComment="deleteComment"
       />
     </div>
     <hc-empty v-else name="empty" icon="messages" />
@@ -40,5 +40,12 @@ export default {
   props: {
     post: { type: Object, default: () => {} },
   },
+  methods: {
+    deleteComment(deleted) {
+      this.post.comments = this.post.comments.map(comment => {
+        return comment.id === deleted.id ? deleted : comment
+      })
+    },
+  },
 }
 </script>

webapp/components/PostCard/index.vue

@@ -118,9 +118,11 @@ export default {
   methods: {
     async deletePostCallback() {
       try {
-        await this.$apollo.mutate(deletePostMutation(this.post.id))
+        const {
+          data: { DeletePost },
+        } = await this.$apollo.mutate(deletePostMutation(this.post.id))
         this.$toast.success(this.$t('delete.contribution.success'))
-        this.$emit('removePostFromList')
+        this.$emit('removePostFromList', DeletePost)
       } catch (err) {
         this.$toast.error(err.message)
       }

webapp/graphql/CommentMutations.js

@@ -1,6 +1,7 @@
 import gql from 'graphql-tag'
 
 export default i18n => {
+  const lang = i18n.locale().toUpperCase()
   return {
     CreateComment: gql`
       mutation($postId: ID!, $content: String!) {
@@ -55,6 +56,31 @@ export default i18n => {
       mutation($id: ID!) {
         DeleteComment(id: $id) {
           id
+          contentExcerpt
+          content
+          createdAt
+          disabled
+          deleted
+          author {
+            id
+            slug
+            name
+            avatar
+            disabled
+            deleted
+            shoutedCount
+            contributionsCount
+            commentedCount
+            followedByCount
+            followedByCurrentUser
+            location {
+              name: name${lang}
+            }
+            badges {
+              id
+              icon
+            }
+          }
         }
       }
     `,

webapp/graphql/PostQuery.js

@@ -128,3 +128,51 @@ export const PostsEmotionsByCurrentUser = () => {
     }
   `
 }
+
+export const relatedContributions = i18n => {
+  const lang = i18n.locale().toUpperCase()
+  return gql`query Post($slug: String!) {
+    Post(slug: $slug) {
+      id
+      title
+      tags {
+        id
+      }
+      categories {
+        id
+        name
+        icon
+      }
+      relatedContributions(first: 2) {
+        id
+        title
+        slug
+        contentExcerpt
+        shoutedCount
+        categories {
+          id
+          name
+          icon
+        }
+        author {
+          id
+          name
+          slug
+          avatar
+          contributionsCount
+          followedByCount
+          followedByCurrentUser
+          commentedCount
+          location {
+            name: name${lang}
+          }
+          badges {
+            id
+            icon
+          }
+        }
+      }
+      shoutedCount
+    }
+  }`
+}

webapp/pages/index.vue

@@ -20,7 +20,7 @@
           <hc-post-card
             :post="post"
             :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-            @removePostFromList="deletePost(index, post.id)"
+            @removePostFromList="deletePost"
           />
         </masonry-grid-item>
       </template>
@@ -164,9 +164,9 @@ export default {
     showMoreContributions() {
       this.offset += this.pageSize
     },
-    deletePost(_index, postId) {
+    deletePost(deletedPost) {
       this.posts = this.posts.filter(post => {
-        return post.id !== postId
+        return post.id !== deletedPost.id
       })
     },
   },

webapp/pages/post/_id/_slug/more-info.vue

@@ -36,11 +36,11 @@
     <ds-section style="margin: 0 -1.5rem; padding: 1.5rem;">
       <ds-flex v-if="post.relatedContributions && post.relatedContributions.length" gutter="small">
         <hc-post-card
-          v-for="(relatedPost, index) in post.relatedContributions"
+          v-for="relatedPost in post.relatedContributions"
           :key="relatedPost.id"
           :post="relatedPost"
           :width="{ base: '100%', lg: 1 }"
-          @removePostFromList="post.relatedContributions.splice(index, 1)"
+          @removePostFromList="removePostFromList"
         />
       </ds-flex>
       <hc-empty v-else margin="large" icon="file" message="No related Posts" />
@@ -50,9 +50,9 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import HcPostCard from '~/components/PostCard'
 import HcEmpty from '~/components/Empty.vue'
+import { relatedContributions } from '~/graphql/PostQuery'
 
 export default {
   transition: {
@@ -68,57 +68,17 @@ export default {
       return this.Post ? this.Post[0] || {} : {}
     },
   },
+  methods: {
+    removePostFromList(deletedPost) {
+      this.post.relatedContributions = this.post.relatedContributions.filter(contribution => {
+        return contribution.id !== deletedPost.id
+      })
+    },
+  },
   apollo: {
     Post: {
       query() {
-        return gql`
-          query Post($slug: String!) {
-            Post(slug: $slug) {
-              id
-              title
-              tags {
-                id
-                name
-              }
-              categories {
-                id
-                name
-                icon
-              }
-              relatedContributions(first: 2) {
-                id
-                title
-                slug
-                contentExcerpt
-                shoutedCount
-                commentedCount
-                categories {
-                  id
-                  name
-                  icon
-                }
-                author {
-                  id
-                  name
-                  slug
-                  avatar
-                  contributionsCount
-                  followedByCount
-                  followedByCurrentUser
-                  commentedCount
-                  location {
-                    name: name${this.$i18n.locale().toUpperCase()}
-                  }
-                  badges {
-                    id
-                    icon
-                  }
-                }
-              }
-              shoutedCount
-            }
-          }
-        `
+        return relatedContributions(this.$i18n)
       },
       variables() {
         return {

webapp/pages/profile/_id/_slug.vue

@@ -220,11 +220,11 @@
           </ds-grid-item>
 
           <template v-if="posts.length">
-            <masonry-grid-item v-for="(post, index) in posts" :key="post.id">
+            <masonry-grid-item v-for="post in posts" :key="post.id">
               <hc-post-card
                 :post="post"
                 :width="{ base: '100%', md: '100%', xl: '50%' }"
-                @removePostFromList="removePostFromList(index)"
+                @removePostFromList="removePostFromList"
               />
             </masonry-grid-item>
           </template>
@@ -345,8 +345,10 @@ export default {
     },
   },
   methods: {
-    removePostFromList(index) {
-      this.posts.splice(index, 1)
+    removePostFromList(deletedPost) {
+      this.posts = this.posts.filter(post => {
+        return post.id !== deletedPost.id
+      })
     },
     handleTab(tab) {
       this.tabActive = tab