refact: do async/await; remove redundant flux

zmts · May 4, 2020 · 2535832 · 2535832
1 parent 2f1bbb6
commit 2535832
Show file tree

Hide file tree

Showing 29 changed files with 225 additions and 285 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,9 +23,5 @@ module.exports = {
   },
   parserOptions: {
     parser: 'babel-eslint'
-  },
-  globals: {
-    __typecheck: true,
-    __type: true
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,9 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# tmp
+_tmp/
+tmp/
+.tmp/
+tmp_files/
diff --git a/README.md b/README.md
@@ -26,7 +26,6 @@ This project based on real world practice and ready to use. Have a fun!
   - [`store`](#store)
   - [`.env.js`](#envjs)
   - [`main.js`](#mainjs)
-  - [`global.helpers.js`](#globalhelpersjs)
 
 ### `src`
 Source =)
@@ -118,7 +117,7 @@ directives: {
   debounce
 }
 ```
-And use it in template.
+And use it in a template.
 ```
 <input type="text" v-model="name" v-debounce="500" @debounce-change="runSomeMethod">
 ```
@@ -152,10 +151,6 @@ npm run build
 
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
-# TODO
-- Add global loading component
-- Add more examples
-
 # Amazing repos where I found some great approaches:
 - https://github.com/sdras/vue-sample-svg-icons
 - https://github.com/MillerRen/vue-boilerplate

diff --git a/src/.env.js b/src/.env.js
@@ -1,4 +1,4 @@
-export const API_PORT = '4000'
+export const API_PORT = '5000'
 export const API_URL = `http://localhost:${API_PORT}`
 export const DOMAIN_TITLE = 'supersite.com'
 
diff --git a/src/lib/assert/AssertionError.js → src/core/assert/AssertionError.js b/src/lib/assert/AssertionError.js → src/core/assert/AssertionError.js
diff --git a/src/lib/assert/index.js → src/core/assert/index.js b/src/lib/assert/index.js → src/core/assert/index.js
diff --git a/src/lib/index.js → src/core/index.js b/src/lib/index.js → src/core/index.js
diff --git a/src/global.helpers.js b/src/global.helpers.js
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
@@ -42,8 +42,8 @@ export default {
     UiHeaderDropdownMenu
   },
   methods: {
-    logout () {
-      AuthService.makeLogout()
+    async logout () {
+      await AuthService.makeLogout()
     }
   }
 }

diff --git a/src/main.js b/src/main.js
@@ -3,7 +3,6 @@ import Vue from 'vue'
 import AppLayout from './layout/index.vue'
 import router from './router'
 import store from './store'
-import setGlobalHelpers from './global.helpers'
 
 import './mixins'
 import './plugins'
@@ -12,7 +11,6 @@ import './thirdParty'
 import './scss/style.scss'
 import './assets/fonts/bebasneue.css'
 
-setGlobalHelpers()
 Vue.config.productionTip = false
 
 new Vue({

diff --git a/src/mixins/prepareFetchParamsMixin.js b/src/mixins/prepareFetchParamsMixin.js
@@ -1,4 +1,4 @@
-import { isValidLimitQuery, isValidPageQuery } from '../router/util'
+import { isValidLimitQuery, isValidPageQuery } from '@/router/util'
 
 /**
  * main fetch params validation

diff --git a/src/mixins/prepareQueryParamsMixin.js b/src/mixins/prepareQueryParamsMixin.js
@@ -1,4 +1,4 @@
-import { isValidLimitQuery, isValidPageQuery } from '../router/util'
+import { isValidLimitQuery, isValidPageQuery } from '@/router/util'
 /**
  * loop over all component props that uses in url
  * return only valid props, then you get only valid params in fetchParams(component computed prop)

diff --git a/src/pages/Login.vue b/src/pages/Login.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { AuthService } from '../services/auth.service'
+import { AuthService } from '@/services/auth.service'
 
 export default {
   name: 'Login',
@@ -34,21 +34,16 @@ export default {
   },
 
   methods: {
-    makeLogin () {
-      AuthService.makeLogin({
-        email: this.email,
-        password: this.password
-      }).then(response => { this.error = '' })
-        .then(() => {
-          this.$store.dispatch('user/getCurrent')
-            .then(() => this.$router.push('profile'))
-            .catch(error => console.log(error))
-        })
-        .catch((error) => {
-          console.log('error', error)
-          this.$store.commit('toast/NEW', { type: 'error', message: error.message })
-          this.error = error.status === 404 ? 'User with same email not found' : error.message
-        })
+    async makeLogin () {
+      try {
+        await AuthService.makeLogin({ email: this.email, password: this.password })
+        this.error = ''
+        await this.$store.dispatch('user/getCurrent')
+        await this.$router.push('profile')
+      } catch (error) {
+        this.$store.commit('toast/NEW', { type: 'error', message: error.message })
+        this.error = error.status === 404 ? 'User with same email not found' : error.message
+      }
     }
   }
 }

diff --git a/src/pages/news/NewsPage.vue b/src/pages/news/NewsPage.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { PostsService } from '@/services/posts.service'
 
 import prepareQueryParamsMixin from '../../mixins/prepareQueryParamsMixin'
 import prepareFetchParamsMixin from '../../mixins/prepareFetchParamsMixin'
@@ -32,8 +32,8 @@ export default {
   },
 
   props: {
-    limit: { type: Number },
-    page: { type: Number }
+    limit: { type: Number, default: 10 },
+    offset: { type: Number, default: 0 }
   },
 
   watch: {
@@ -43,58 +43,61 @@ export default {
       })
       this.fetchData()
     },
-    'pagination.page': function () {
+    'pagination.offset': function () {
       this.$router.replace({
         query: this.useInUrlQueryPropList
       })
       this.fetchData()
-    },
-    limit: {
-      handler: function (newVal) {
-        this.$store.commit('news/SET_PAGINATION', { limit: newVal })
-      },
-      immediate: true
-    },
-    page: {
-      handler: function (newVal) {
-        this.$store.commit('news/SET_PAGINATION', { page: newVal })
-      },
-      immediate: true
     }
   },
 
   data () {
     return {
-      newsText: 'NewsPage Component'
+      newsText: 'NewsPage Component',
+      news: [],
+      error: false,
+      loading: false,
+      pagination: {
+        limit: this.limit,
+        offset: this.offset,
+        total: 0
+      }
     }
   },
 
   methods: {
-    fetchData () {
-      this.$store.dispatch('news/getListPublic', { params: this.fetchParams })
+    async fetchData () {
+      this.loading = true
+
+      try {
+        const { data } = await PostsService.getListPublic(this.fetchParams)
+        this.news = data.content
+        this.pagination.total = data.total
+      } catch (e) {
+        this.$store.commit('toast/NEW', { type: 'error', message: e.message, e })
+        this.error = e.message
+        console.log(e)
+      } finally {
+        this.loading = false
+      }
     }
   },
 
   computed: {
-    ...mapState('news', {
-      news: 'items',
-      pagination: 'pagination',
-      error: 'error',
-      loading: 'loading'
-    }),
-    ...mapGetters('news', [
-      'isEmpty'
-    ]),
+    isEmpty () {
+      return this.news && !this.news.length
+    },
+
     useInUrlQueryPropList () {
       return this.prepareQueryParamsMixin({
         limit: this.pagination.limit,
-        page: this.pagination.page
+        offset: this.pagination.offset
       })
     },
     fetchParams () {
       const pagination = this.prepareFetchParamsMixin({
         limit: this.pagination.limit,
-        page: this.pagination.page
+        offset: this.pagination.offset
       })
 
       return { ...pagination }

diff --git a/src/pages/profile/ProfilePostsPage.vue b/src/pages/profile/ProfilePostsPage.vue
@@ -10,32 +10,91 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { PostsService } from '@/services/posts.service'
+import prepareQueryParamsMixin from '../../mixins/prepareQueryParamsMixin'
+import prepareFetchParamsMixin from '../../mixins/prepareFetchParamsMixin'
 
 export default {
   name: 'ProfilePostsPage',
+
+  props: {
+    limit: { type: Number, default: 10 },
+    offset: { type: Number, default: 0 }
+  },
+
+  mixins: [prepareQueryParamsMixin, prepareFetchParamsMixin],
+
+  watch: {
+    'pagination.limit': function () {
+      this.$router.replace({
+        query: this.useInUrlQueryPropList
+      })
+      this.fetchData()
+    },
+    'pagination.offset': function () {
+      this.$router.replace({
+        query: this.useInUrlQueryPropList
+      })
+      this.fetchData()
+    }
+  },
+
   data () {
     return {
-      //
+      posts: [],
+      error: false,
+      loading: false,
+      pagination: {
+        limit: this.limit,
+        offset: this.offset,
+        total: 0
+      }
     }
   },
 
   methods: {
-    fetchData () {
-      this.$store.dispatch('profilePosts/getCurrentUserPosts')
+    async fetchData () {
+      this.loading = true
+
+      try {
+        const { data } = await PostsService.getPostsByUserId(this.fetchParams)
+        this.posts = data.content
+        this.pagination.total = data.total
+      } catch (e) {
+        this.$store.commit('toast/NEW', { type: 'error', message: e.message, e })
+        this.error = e.message
+        console.log(e)
+      } finally {
+        this.loading = false
+      }
     }
   },
 
   computed: {
-    ...mapState('profilePosts', {
-      posts: 'items',
-      pagination: 'pagination',
-      error: 'error',
-      loading: 'loading'
-    }),
-    ...mapGetters('news', [
-      'isEmpty'
-    ])
+    filter () {
+      return {
+        userId: this.$currentUser.id
+      }
+    },
+    useInUrlQueryPropList () {
+      return this.prepareQueryParamsMixin({
+        limit: this.pagination.limit,
+        offset: this.pagination.offset
+      })
+    },
+    fetchParams () {
+      const filter = this.prepareFetchParamsMixin(this.filter)
+
+      const pagination = this.prepareFetchParamsMixin({
+        limit: this.pagination.limit,
+        offset: this.pagination.offset
+      })
+
+      return { filter, ...pagination }
+    },
+    isEmpty () {
+      return this.posts && !this.posts.length
+    }
   },
 
   mounted () {