Delete Blog> this.$router this.$toasted findIndex splice 사용법

pages/instructor/blogs/index.vue

@@ -38,7 +38,7 @@
                       Last Edited {{dBlog.updatedAt | formatDate('LLLL')}}
                     </span>
                     <dropdown 
-                      @optionChanged="handleOption($event, dBlog._id)"
+                      @optionChanged="handleOption($event, dBlog)"
                       :items="draftsOptions" />
                     <!-- Dropdown with menu here -->
                   </div>
@@ -61,7 +61,7 @@
                       Last Edited {{pBlog.updatedAt | formatDate('LLLL')}}
                     </span>
                     <dropdown 
-                      @optionChanged="handleOption($event, dBlog._id)"
+                      @optionChanged="handleOption($event, pBlog)"
                       :items="publishedOptions" />
                     <!-- Dropdown with menu here -->
                   </div>
@@ -106,14 +106,23 @@ export default {
     }
   },
   methods: {
-    handleOption(command, blogId) {
+    handleOption(command, blog) {
       // console.log(blogId)
-      debugger
       if (command === commands.EDIT_BLOG) {
-        this.$router.push(`/instructor/blog/${blogId}/edit`)
+        this.$router.push(`/instructor/blog/${blog._id}/edit`)
       }
       if (command === commands.DELETE_BLOG) {
-        alert('Deleting Blog')
+        // alert('Deleting Blog')
+        this.displayDeleteWarning(blog)
+      }
+    },
+    displayDeleteWarning(blog) {
+      const isConfirm = confirm('Are you sure you want to delete blog ?')
+      if (isConfirm) {
+        const result = this.$store.dispatch('instructor/blog/deleteBlog', blog)
+        if(result === true) {
+          this.$toasted.success('Blog was succesfuly deleted!', {duration: 2000})
+        }
       }
     }
   },

store/instructor/blog.js

@@ -46,7 +46,6 @@ export const actions = {
   },
   async fetchUserBlogs({commit, state}) {
     const blogs = await this.$axios.$get('/api/v1/blogs/me')
-    debugger;
     if(blogs.isAxiosError === true){
       console.log(blog.data)
       return Error('')
@@ -56,6 +55,17 @@ export const actions = {
     commit('setBlogs', {resource: 'published', items: published})
     return { published, drafts }
   },
+  async deleteBlog({commit, state}, blog) {
+    const resource = blog.status === 'active' ? 'drafts' : 'published'
+    const result = this.$axios.$delete(`/api/v1/blogs/${blog._id}`)
+    if(result.isAxiosError === true){
+      console.log(result.data)
+      return Error('')
+    }
+    const index = state.items[resource].findIndex((b) => b._id === blog._id )
+    commit('deleteBlog', {resource, index})
+    return true
+  },
   async updateBlog({commit, state}, {data, id}) {
     console.log('instructor/blog.js actions updateBlog call axios.$patch-> Id, data')
     const blog = await this.$axios.$patch(`/api/v1/blogs/${id}`, data)
@@ -78,6 +88,9 @@ export const mutations = {
   setBlogs(state, {resource, items}) {
     state.items[resource] = items
   },
+  deleteBlog(state, {resource, index}) {
+    state.items[resource].splice(index, 1)
+  },
   setIsSaving(state, isSaving) {
     state.isSaving = isSaving
   }