Go ahead with refactoring of DeleteModal in Comments and Posts

webapp/components/PostCard/index.vue

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