Refactored handling of DeleteModal in Comments and Posts

webapp/components/Comment.vue

@@ -19,8 +19,8 @@
       <content-menu
         placement="bottom-end"
         resource-type="comment"
-        :deleteCallback="deleteCallback"
         :resource="comment"
+        :callbacks="{ confirmCallback, cancelCallback: null }"
         style="float-right"
         :is-owner="isAuthor(author.id)"
       />
@@ -37,6 +37,7 @@
 </template>
 
 <script>
+import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
@@ -71,8 +72,27 @@ export default {
     isAuthor(id) {
       return this.user.id === id
     },
-    deleteCallback() {
+    async confirmCallback() {
-      console.log('"deleteCallback" was called !!!')
+      console.log('"confirmCallback" was called !!! ', this.comment.id)
+
+      try {
+        // XXX Make custom mutation and tests in the Backend !!!
+        var gqlMutation = gql`
+          mutation($id: ID!) {
+            DeleteComment(id: $id) {
+              id
+            }
+          }
+        `
+        await this.$apollo.mutate({
+          mutation: gqlMutation,
+          variables: { id: this.comment.id }
+        })
+        this.$toast.success(this.$t(`delete.comment.success`))
+        this.$emit('deleteComment')
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
     }
   }
 }

webapp/components/ContentMenu.vue

@@ -60,7 +60,8 @@ export default {
       validator: value => {
         return value.match(/(contribution|comment|organization|user)/)
       }
-    }
+    },
+    callbacks: { type: Object, default: () => {} }
   },
   computed: {
     routes() {
@@ -151,7 +152,8 @@ export default {
         name: dialog,
         data: {
           type: this.resourceType,
-          resource: this.resource
+          resource: this.resource,
+          callbacks: this.callbacks
         }
       })
     }

webapp/components/Modal.vue

@@ -18,7 +18,8 @@
       v-if="open === 'delete'"
       :id="data.resource.id"
       :type="data.type"
-      :deleteCallback="deleteCallback"
+      :confirm-callback="data.callbacks.confirmCallback"
+      :cancel-callback="!!data.callbacks.cancelCallback ? data.callbacks.cancelCallback : null"
       :name="name"
       @close="close"
     />
@@ -38,10 +39,6 @@ export default {
     ReportModal,
     DeleteModal
   },
-  props: {
-    deleteCallback: { type: Function, required: true },
-    cancelCallback: { type: Function, default: null }
-  },
   computed: {
     ...mapGetters({
       data: 'modal/data',

webapp/components/Modal/DeleteModal.vue

@@ -53,7 +53,7 @@ export default {
   props: {
     name: { type: String, default: '' },
     type: { type: String, required: true },
-    deleteCallback: { type: Function, required: true },
+    confirmCallback: { type: Function, required: true },
     cancelCallback: { type: Function, default: null },
     id: { type: String, required: true }
   },
@@ -78,6 +78,9 @@ export default {
       this.isOpen = false
       setTimeout(() => {
         this.$emit('close')
+        if (!!this.cancelCallback) {
+          this.cancelCallback()
+        }
       }, 1000)
     },
     async confirm() {
@@ -87,34 +90,28 @@ export default {
       try {
         switch (this.type) {
           case 'contribution':
-            gqlMutation = gql`
+            // gqlMutation = gql`
-              mutation($id: ID!) {
+            //   mutation($id: ID!) {
-                DeletePost(id: $id) {
+            //     DeletePost(id: $id) {
-                  id
+            //       id
-                }
+            //     }
-              }
+            //   }
-            `
+            // `
+            // await this.$apollo.mutate({
+            //   mutation: gqlMutation,
+            //   variables: { id: this.id }
+            // })
+            // this.$toast.success(this.$t(`delete.${this.type}.success`))
+            await this.confirmCallback()
             break
           case 'comment':
             // XXX Make custom mutation and tests in the Backend !!!
-            gqlMutation = gql`
+            await this.confirmCallback()
-              mutation($id: ID!) {
-                DeleteComment(id: $id) {
-                  id
-                }
-              }
-            `
             break
         }
-        await this.$apollo.mutate({
-          mutation: gqlMutation,
-          variables: { id: this.id }
-        })
         this.success = true
-        this.$toast.success(this.$t(`delete.${this.type}.success`))
         setTimeout(() => {
           this.isOpen = false
-          // XXX For comment just reload the page !!!
           setTimeout(() => {
             this.success = false
             this.$emit('close')
@@ -122,25 +119,22 @@ export default {
               case 'contribution':
                 if (this.$router.history.current.name === 'post-id-slug') {
                   // redirect to index
-                  this.$router.history.push('/')
+                  // this.$router.history.push('/')
                 } else {
                   // reload the page (when deleting from profile or index)
-                  window.location.assign(window.location.href)
+                  // window.location.assign(window.location.href)
                 }
                 break
-              case 'comment':
-                // reload the page
-                // window.location.assign(window.location.href)
-                console.log('Remove comment emit !!!')
-                // this.$parent.$parent.$emit('deleteComment')
-                this.deleteCallback()
-                break
             }
           }, 500)
         }, 1500)
       } catch (err) {
         this.success = false
-        this.$toast.error(err.message)
+        // switch (this.type) {
+        //   case 'contribution':
+        //     this.$toast.error(err.message)
+        //     break
+        // }
       } finally {
         this.loading = false
       }

webapp/components/PostCard/index.vue

@@ -64,6 +64,7 @@
           <content-menu
             resource-type="contribution"
             :resource="post"
+            :callbacks="{ confirmCallback, cancelCallback: null }"
             :is-owner="isAuthor"
           />
         </no-ssr>
@@ -77,6 +78,7 @@ import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
 import { mapGetters } from 'vuex'
+import Post from '~/mixins/Post'
 
 export default {
   name: 'HcPostCard',
@@ -84,6 +86,7 @@ export default {
     HcUser,
     ContentMenu
   },
+  mixins: [Post],
   props: {
     post: {
       type: Object,

webapp/mixins/Post.js

@@ -0,0 +1,25 @@
+import gql from 'graphql-tag'
+
+export default {
+  methods: {
+    async confirmCallback() {
+      try {
+        var gqlMutation = gql`
+          mutation($id: ID!) {
+            DeletePost(id: $id) {
+              id
+            }
+          }
+        `
+        await this.$apollo.mutate({
+          mutation: gqlMutation,
+          variables: { id: this.post.id }
+        })
+        this.$toast.success(this.$t(`delete.contribution.success`))
+        // this.$emit('deletePost')
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    }
+  }
+}

webapp/pages/post/_id/_slug/index.vue

@@ -18,6 +18,7 @@
           placement="bottom-end"
           resource-type="contribution"
           :resource="post"
+          :callbacks="{ confirmCallback, cancelCallback: null }"
           :is-owner="isAuthor(post.author.id)"
         />
       </no-ssr>
@@ -114,6 +115,7 @@ import HcUser from '~/components/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcCommentForm from '~/components/comments/CommentForm'
 import HcCommentList from '~/components/comments/CommentList'
+import Post from '~/mixins/Post'
 
 export default {
   transition: {
@@ -129,6 +131,7 @@ export default {
     HcCommentForm,
     HcCommentList
   },
+  mixins: [Post],
   head() {
     return {
       title: this.title

webapp/pages/profile/_id/_slug.vue

@@ -25,6 +25,7 @@
               placement="bottom-end"
               resource-type="user"
               :resource="user"
+              :callbacks="{ confirmCallback, cancelCallback: null }"
               :is-owner="myProfile"
               class="user-content-menu"
             />
@@ -327,6 +328,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
+import Post from '~/mixins/Post'
 
 export default {
   components: {
@@ -339,6 +341,7 @@ export default {
     HcEmpty,
     ContentMenu
   },
+  mixins: [Post],
   transition: {
     name: 'slide-up',
     mode: 'out-in'