add store actions, update templates

Author: galvez

pages/_feed/_page.vue

@@ -50,10 +50,10 @@ export default {
       return feeds[this.feed].pages
     },
     pageData() {
-      return this.$store.state.feeds[this.feed][this.page]
+      return this.$state.feeds[this.feed][this.page]
     },
     displayedItems() {
-      return this.pageData.map(id => this.$store.state.items[id])
+      return this.pageData.map(id => this.$state.items[id])
     },
     loading() {
       return this.displayedItems.length === 0
@@ -64,9 +64,10 @@ export default {
     page: 'pageChanged'
   },
 
-  fetch({ store, params: { feed, page = 1 } }) {
+  fetch({ $actions, params: { feed, page = 1 } }) {
     page = Number(page) || 1
-    return store.dispatch('FETCH_FEED', { feed, page })
+    console.log('{ feed, page }', { feed, page })
+    return $actions.fetchFeed({ feed, page })
   },
 
   head() {
@@ -87,13 +88,11 @@ export default {
       }
 
       // Prefetch next page
-      this.$store
-        .dispatch('FETCH_FEED', {
-          feed: this.feed,
-          page: this.page + 1,
-          prefetch: true
-        })
-        .catch(() => {})
+      this.$actions.fetchFeed({
+        feed: this.feed,
+        page: this.page + 1,
+        prefetch: true
+      })
 
       this.transition =
         from === -1 ? null : to > from ? 'slide-left' : 'slide-right'

pages/item/_id.vue

@@ -48,12 +48,12 @@ export default {
       return this.$route.params.id
     },
     item() {
-      return this.$store.state.items[this.id]
+      return this.$state.items[this.id]
     }
   },
 
-  fetch({ store, params: { id } }) {
-    return store.dispatch('FETCH_ITEM', { id })
+  fetch({ $actions, params: { id } }) {
+    return $actions.fetchItem({ id })
   },
 
   methods: {

pages/user/_id.vue

@@ -34,7 +34,7 @@ export default {
 
   computed: {
     user() {
-      return this.$store.state.users[this.$route.params.id]
+      return this.$state.users[this.$route.params.id]
     }
   },
 
@@ -44,8 +44,8 @@ export default {
     }
   },
 
-  fetch({ store, route: { params: { id } } }) {
-    return store.dispatch('FETCH_USER', { id })
+  fetch({ $actions, route: { params: { id } } }) {
+    return $actions.fetchUser({ id })
   }
 }
 </script>

store/actions.js

@@ -0,0 +1,57 @@
+import { $set } from 'vue-stator'
+import { CancelToken } from 'axios'
+import { lazy } from '~/common/utils'
+
+// =================================================
+// Actions
+// =================================================
+export function fetchFeed({ $axios }, state, { feed, page, prefetch }) {
+  // Don't priorotize already fetched feeds
+  if (state.feeds[feed][page] && state.feeds[feed][page].length) {
+    prefetch = true
+  }
+  if (!prefetch) {
+    if (this.feedCancelSource) {
+      this.feedCancelSource.cancel(
+        'priorotize feed: ' + feed + ' page: ' + page
+      )
+    }
+    this.feedCancelSource = CancelToken.source()
+  }
+  return lazy(
+    (items) => {
+      const ids = items.map(item => item.id)
+      $set(state.feeds[feed], page, ids)
+      for (const item of items) {
+        if (item) {
+          $set(state.items, item.id, item)
+        }
+      }
+    },
+    () =>
+      $axios.$get(`/${feed}?page=${page}`, {
+        cancelToken: this.feedCancelSource && this.feedCancelSource.token
+      }),
+    (state.feeds[feed][page] || []).map(id => state.items[id])
+  )
+}
+
+export function fetchItem({ $axios }, state, { id }) {
+  return lazy(
+    (item) => {
+      if (item) {
+        $set(state.items, item.id, item)
+      }
+    },
+    () => $axios.$get(`/item/${id}`),
+    Object.assign({ id, loading: true, comments: [] }, state.items[id])
+  )
+}
+
+export function fetchUser({ $axios }, state, { id }) {
+  return lazy(
+    user => $set(state.users, id, user || false), /* false means user not found */
+    () => $axios.$get(`/user/${id}`),
+    Object.assign({ id, loading: true }, state.users[id])
+  )
+}