Go ahead with refactoring of DeleteModal in Comments and Posts

webapp/components/PostCard/index.vue

@@ -1,4 +1,7 @@
 <template>
+  <ds-flex-item
+    :width="width"
+  >
     <ds-card
       :header="post.title"
       :image="post.image"
@@ -71,6 +74,7 @@
         </div>
       </template>
     </ds-card>
+  </ds-flex-item>
 </template>
 
 <script>
@@ -91,6 +95,10 @@ export default {
     post: {
       type: Object,
       required: true
+    },
+    width: {
+      type: Object,
+      required: true
     }
   },
   computed: {

webapp/mixins/Post.js

@@ -16,7 +16,7 @@ export default {
           variables: { id: this.post.id }
         })
         this.$toast.success(this.$t(`delete.contribution.success`))
-        // this.$emit('deletePost')
+        this.$emit('delete')
       } catch (err) {
         this.$toast.error(err.message)
       }

webapp/pages/index.vue

@@ -5,13 +5,13 @@
       :width="{ base: '100%' }"
       gutter="base"
     >
-      <ds-flex-item
-        v-for="post in uniq(Post)"
+      <hc-post-card
+        v-for="(post, index) in uniq(Post)"
         :key="post.id"
+        :post="post"
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-      >
-        <hc-post-card :post="post" />
-      </ds-flex-item>
+        @delete="deletePost(index, post.id)"
+      />
     </ds-flex>
     <no-ssr>
       <ds-button
@@ -85,6 +85,14 @@ export default {
         },
         fetchPolicy: 'cache-and-network'
       })
+    },
+    deletePost(_index, postId) {
+      console.log('Pages/index.vue: Post item deleted !!!')
+      this.Post = this.Post.filter((post) => {
+        return post.id !== postId
+      })
+      // Ideal sulution:
+      // this.Post.splice(index, 1)
     }
   },
   apollo: {

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

@@ -35,13 +35,13 @@
         v-if="post.relatedContributions && post.relatedContributions.length"
         gutter="small"
       >
-        <ds-flex-item
-          v-for="relatedPost in post.relatedContributions"
+        <hc-post-card
+          v-for="(relatedPost, index) in post.relatedContributions"
           :key="relatedPost.id"
           :width="{ base: '100%', lg: 1 }"
-        >
-          <hc-post-card :post="relatedPost" />
-        </ds-flex-item>
+          :post="relatedPost"
+          @delete="deletePost(index)"
+        />
       </ds-flex>
       <hc-empty
         v-else
@@ -73,6 +73,12 @@ export default {
       return this.Post ? this.Post[0] || {} : {}
     }
   },
+  methods: {
+    deletePost(index) {
+      console.log('Post/more-info.vue: Post item deleted !!!')
+      this.post.relatedContributions.splice(index, 1)
+    }
+  },
   apollo: {
     Post: {
       query() {

webapp/pages/profile/_id/_slug.vue

@@ -290,13 +290,13 @@
             />
           </ds-flex-item>
           <template v-if="activePosts.length">
-            <ds-flex-item
-              v-for="post in activePosts"
+            <hc-post-card
+              v-for="(post, index) in activePosts"
               :key="post.id"
+              :post="post"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
-            >
-              <hc-post-card :post="post" />
-            </ds-flex-item>
+              @delete="deletePost(index)"
+            />
           </template>
           <template v-else>
             <ds-flex-item :width="{ base: '100%' }">
@@ -404,6 +404,9 @@ export default {
         throw new Error('User not found!')
       }
     }
+    // activePosts(activePosts) {
+    //   this.activePosts = activePosts || []
+    // }
   },
   methods: {
     uniq(items, field = 'id') {
@@ -434,6 +437,10 @@ export default {
         },
         fetchPolicy: 'cache-and-network'
       })
+    },
+    deletePost(index) {
+      this.user.contributions.splice(index, 1)
+      // this.$router.history.push('/')
     }
   },
   apollo: {