async await fetch 사용법

pages/instructor/blog/_id/edit.vue

@@ -9,7 +9,7 @@
         <div class="full-page-takeover-header-button">
           <!-- TODO: Check blog validity before publishing -->
           <Modal
-            @submitted="publishBlog"
+            @submitted="updateBlogStatus($event, 'published')"
             @opened="checkBlogValidity"
             openTitle="Publish"
             openBtnClass="button is-success is-medium is-inverted is-outlined"
@@ -38,6 +38,7 @@
       <template v-else #actionMenu>
         <div class="full-page-takeover-header-button">
           <Modal
+            @submitted="updateBlogStatus($event, 'active')"
             openTitle="Unpublish"
             openBtnClass="button is-success is-medium is-inverted is-outlined"
             title="Unpublish Blog">
@@ -111,12 +112,15 @@ export default {
         this.$toasted.error('Blog cannot be saved!', {duration: 2000})
       }
     },
-    async publishBlog({closeModal}) {
+    async updateBlogStatus({closeModal}, status) {
       const blogContent = this.editor.getContent()
-      blogContent.status = 'published'
+      // blogContent.status = 'published'
+      blogContent.status = status
+      const message = status === 'published' ? 'Blog has been published!' : 'Blog has been un-published!'
+
       try {
         await this.$store.dispatch('instructor/blog/updateBlog', {data: blogContent, id: this.blog._id})
-        this.$toasted.success('Blog has been published!', {duration: 3000})
+        this.$toasted.success(message, {duration: 3000})
         closeModal()
       } catch (error) {
         this.$toasted.error('Blog cannot be published!', {duration: 3000})

pages/instructor/blogs/index.vue

@@ -56,7 +56,10 @@
 import Header from '~/components/shared/Header'
 export default {
   layout: 'instructor',
-  components: {Header}
+  components: {Header},
+  async fetch({store}) {
+    await store.dispatch('instructor/blog/fetchUserBlogs')
+  }
 }
 </script>
 

store/instructor/blog.js

@@ -1,4 +1,19 @@
+function separateBlogs(blogs) {
+  const published = []
+  const drafts = []
+
+  blogs.forEach(blog => {
+    blog.status === 'active' ? drafts.push(blog) : published.push(blog)
+  })
+
+  return {published, drafts}
+}
+
 export const state = () => ({
+  items: {
+    drafts: [],
+    published: []
+  },
   item: {},
   isSaving: false
 })
@@ -29,6 +44,18 @@ export const actions = {
     commit('setBlog', blog)
     console.log('courses.js mutations done setBlog')
   },
+  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('')
+    }
+    const { published, drafts } = separateBlogs(blogs)
+    commit('setBlogs', {resource: 'drafts', items: drafts})
+    commit('setBlogs', {resource: 'published', items: published})
+    return { published, drafts }
+  },
   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)
@@ -48,6 +75,9 @@ export const mutations = {
   setBlog(state, blog) {
     state.item = blog
   },
+  setBlogs(state, {resource, items}) {
+    state.items[resource] = items
+  },
   setIsSaving(state, isSaving) {
     state.isSaving = isSaving
   }