Go ahead with refactoring of DeleteModal in Comments and Posts

webapp/components/PostCard/index.vue

@@ -1,76 +1,80 @@
 <template>
-  <ds-card
-    :header="post.title"
-    :image="post.image"
-    :class="{'post-card': true, 'disabled-content': post.disabled}"
+  <ds-flex-item
+    :width="width"
   >
-    <nuxt-link
-      class="post-link"
-      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+    <ds-card
+      :header="post.title"
+      :image="post.image"
+      :class="{'post-card': true, 'disabled-content': post.disabled}"
     >
-      {{ post.title }}
-    </nuxt-link>
-    <!-- eslint-disable vue/no-v-html -->
-    <!-- TODO: replace editor content with tiptap render view -->
-    <ds-space margin-bottom="large">
-      <div
-        class="hc-editor-content"
-        v-html="excerpt"
-      />
-    </ds-space>
-    <!-- eslint-enable vue/no-v-html -->
-    <ds-space>
-      <ds-text
-        v-if="post.createdAt"
-        align="right"
-        size="small"
-        color="soft"
+      <nuxt-link
+        class="post-link"
+        :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
       >
-        {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-      </ds-text>
-    </ds-space>
-    <ds-space
-      margin="small"
-      style="position: absolute; bottom: 44px;"
-    >
-      <!-- TODO: find better solution for rendering errors -->
-      <no-ssr>
-        <hc-user
-          :user="post.author"
-          :trunc="35"
+        {{ post.title }}
+      </nuxt-link>
+      <!-- eslint-disable vue/no-v-html -->
+      <!-- TODO: replace editor content with tiptap render view -->
+      <ds-space margin-bottom="large">
+        <div
+          class="hc-editor-content"
+          v-html="excerpt"
         />
-      </no-ssr>
-    </ds-space>
-    <template slot="footer">
-      <div style="display: inline-block; opacity: .5;">
-        <ds-icon
-          v-for="category in post.categories"
-          :key="category.id"
-          v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
-          :name="category.icon"
-        />&nbsp;
-      </div>
-      <div style="display: inline-block; float: right">
-        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-          <ds-icon name="bullhorn" />
-          <small>{{ post.shoutedCount }}</small>
-        </span>
-        &nbsp;
-        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-          <ds-icon name="comments" />
-          <small>{{ post.commentsCount }}</small>
-        </span>
+      </ds-space>
+      <!-- eslint-enable vue/no-v-html -->
+      <ds-space>
+        <ds-text
+          v-if="post.createdAt"
+          align="right"
+          size="small"
+          color="soft"
+        >
+          {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
+        </ds-text>
+      </ds-space>
+      <ds-space
+        margin="small"
+        style="position: absolute; bottom: 44px;"
+      >
+        <!-- TODO: find better solution for rendering errors -->
         <no-ssr>
-          <content-menu
-            resource-type="contribution"
-            :resource="post"
-            :callbacks="{ confirmCallback, cancelCallback: null }"
-            :is-owner="isAuthor"
+          <hc-user
+            :user="post.author"
+            :trunc="35"
           />
         </no-ssr>
-      </div>
-    </template>
-  </ds-card>
+      </ds-space>
+      <template slot="footer">
+        <div style="display: inline-block; opacity: .5;">
+          <ds-icon
+            v-for="category in post.categories"
+            :key="category.id"
+            v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
+            :name="category.icon"
+          />&nbsp;
+        </div>
+        <div style="display: inline-block; float: right">
+          <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
+            <ds-icon name="bullhorn" />
+            <small>{{ post.shoutedCount }}</small>
+          </span>
+          &nbsp;
+          <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
+            <ds-icon name="comments" />
+            <small>{{ post.commentsCount }}</small>
+          </span>
+          <no-ssr>
+            <content-menu
+              resource-type="contribution"
+              :resource="post"
+              :callbacks="{ confirmCallback, cancelCallback: null }"
+              :is-owner="isAuthor"
+            />
+          </no-ssr>
+        </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: {