use promise

Author: yyx990803

package.json

@@ -30,6 +30,7 @@
     "webpack-dev-server": "^1.12.0"
   },
   "dependencies": {
+    "es6-promise": "^3.0.2",
     "firebase": "^2.3.1",
     "vue": "^1.0.0",
     "vue-router": "^0.7.4"

src/components/comment.vue

@@ -30,7 +30,7 @@ export default {
   },
   created () {
     if (this.comment.kids) {
-      store.fetchItems(this.comment.kids, (comments) => {
+      store.fetchItems(this.comment.kids).then(comments => {
         this.childComments = comments
       })
     }

src/store/index.js

@@ -1,22 +1,24 @@
 import Firebase from 'firebase'
 import { EventEmitter } from 'events'
+import { Promise } from 'es6-promise'
 
 const api = new Firebase('https://hacker-news.firebaseio.com/v0')
-let cachedStoryIds = []
-const cachedStories = {}
+const itemsCache = Object.create(null)
 const store = new EventEmitter()
 const storiesPerPage = store.storiesPerPage = 30
 
+let topStoryIds = []
+
 export default store
 
 /**
  * Subscribe to real time updates of the top 100 stories,
  * and cache the IDs locally.
  */
 
-api.child('topstories').on('value', (snapshot) => {
-  cachedStoryIds = snapshot.val()
-  store.emit('update')
+api.child('topstories').on('value', snapshot => {
+  topStoryIds = snapshot.val()
+  store.emit('topstories-updated')
 })
 
 /**
@@ -26,15 +28,17 @@ api.child('topstories').on('value', (snapshot) => {
  * @param {Function} cb(item)
  */
 
-store.fetchItem = (id, cb) => {
-  if (cachedStories[id]) {
-    cb(cachedStories[id])
-  } else {
-    api.child('item/' + id).once('value', function (snapshot) {
-      const story = cachedStories[id] = snapshot.val()
-      cb(story)
-    })
-  }
+store.fetchItem = id => {
+  return new Promise((resolve, reject) => {
+    if (itemsCache[id]) {
+      resolve(itemsCache[id])
+    } else {
+      api.child('item/' + id).once('value', snapshot => {
+        const story = itemsCache[id] = snapshot.val()
+        resolve(story)
+      }, reject)
+    }
+  })
 }
 
 /**
@@ -44,19 +48,12 @@ store.fetchItem = (id, cb) => {
  * @param {Function} cb(items)
  */
 
-store.fetchItems = (ids, cb) => {
+store.fetchItems = ids => {
   if (!ids || !ids.length) {
-    return cb([])
+    return Promise.resolve([])
+  } else {
+    return Promise.all(ids.map(id => store.fetchItem(id)))
   }
-  const items = []
-  ids.forEach((id) => {
-    store.fetchItem(id, (item) => {
-      items.push(item)
-      if (items.length >= ids.length) {
-        cb(items)
-      }
-    })
-  })
 }
 
 /**
@@ -66,11 +63,11 @@ store.fetchItems = (ids, cb) => {
  * @param {Function} cb(stories)
  */
 
-store.fetchItemsByPage = (page, cb) => {
+store.fetchItemsByPage = page => {
   const start = (page - 1) * storiesPerPage
   const end = page * storiesPerPage
-  const ids = cachedStoryIds.slice(start, end)
-  store.fetchItems(ids, cb)
+  const ids = topStoryIds.slice(start, end)
+  return store.fetchItems(ids)
 }
 
 /**
@@ -80,8 +77,10 @@ store.fetchItemsByPage = (page, cb) => {
  * @param {Function} cb(user)
  */
 
-store.fetchUser = (id, cb) => {
-  api.child('user/' + id).once('value', (snapshot) => {
-    cb(snapshot.val())
+store.fetchUser = id => {
+  return new Promise((resolve, reject) => {
+    api.child('user/' + id).once('value', snapshot => {
+      resolve(snapshot.val())
+    }, reject)
   })
 }

src/views/item-view.vue

@@ -23,42 +23,27 @@ import Item from '../components/item.vue'
 import Comment from '../components/comment.vue'
 
 export default {
-  components: {
-    item: Item,
-    comment: Comment
-  },
   data () {
     return {
       item: {},
-      pollOptions: null,
-      comments: []
+      comments: [],
+      pollOptions: null
     }
   },
   route: {
     data ({ to }) {
-      this.load(to.params.id)
+      return store.fetchItem(to.params.id).then(item => ({
+        item,
+        comments: store.fetchItems(item.kids),
+        pollOptions: item.type === 'poll'
+          ? store.fetchItems(item.parts)
+          : null
+      }))
     }
   },
-  methods: {
-    load (id) {
-      store.fetchItem(id, (item) => {
-        this.item = item
-        this.fetchComments()
-        if (item.type === 'poll') {
-          this.fetchPollOptions()
-        }
-      })
-    },
-    fetchComments () {
-      store.fetchItems(this.item.kids, (comments) => {
-        this.comments = comments
-      })
-    },
-    fetchPollOptions () {
-      store.fetchItems(this.item.parts, (options) => {
-        this.pollOptions = options
-      })
-    }
+  components: {
+    item: Item,
+    comment: Comment
   }
 }
 </script>

src/views/news-view.vue

@@ -4,13 +4,13 @@
     <item
       v-for="item in items"
       :item="item"
-      :index="getItemIndex($index)"
+      :index="$index | formatItemIndex"
       track-by="id">
     </item>
     <!-- navigation -->
     <div class="nav" v-show="items.length > 0">
-      <a v-if="displayPage > 1" :href="'#/news/' + (displayPage - 1)">&lt; prev</a>
-      <a v-if="displayPage < 4" :href="'#/news/' + (displayPage + 1)">more...</a>
+      <a v-if="page > 1" :href="'#/news/' + (page - 1)">&lt; prev</a>
+      <a v-if="page < 4" :href="'#/news/' + (page + 1)">more...</a>
     </div>
   </div>
 </template>
@@ -20,39 +20,41 @@ import store from '../store'
 import Item from '../components/item.vue'
 
 export default {
-  components: {
-    item: Item
-  },
   data () {
     return {
-      displayPage: 1,
+      page: 1,
       items: []
     }
   },
-  created () {
-    this.onUpdate = () => {
-      this.update(this.$route.params.page)
-    }
-    store.on('update', this.onUpdate)
-  },
-  destroyed () {
-    store.removeListener('update', this.onUpdate)
-  },
   route: {
     data ({ to }) {
-      this.update(to.params.page)
+      const page = +to.params.page
+      return store.fetchItemsByPage(page).then(items => ({
+        page,
+        items
+      }))
     }
   },
+  created () {
+    store.on('topstories-updated', this.update)
+  },
+  destroyed () {
+    store.removeListener('topstories-updated', this.update)
+  },
   methods: {
-    update (page) {
-      store.fetchItemsByPage(page, (items) => {
+    update () {
+      store.fetchItemsByPage(this.page).then(items => {
         this.items = items
-        this.displayPage = +page
       })
-    },
-    getItemIndex (index) {
-      return (this.displayPage - 1) * store.storiesPerPage + index + 1
     }
+  },
+  filters: {
+    formatItemIndex (index) {
+      return (this.page - 1) * store.storiesPerPage + index + 1
+    }
+  },
+  components: {
+    item: Item
   }
 }
 </script>

src/views/user-view.vue

@@ -29,9 +29,9 @@ export default {
   },
   route: {
     data ({ to }) {
-      store.fetchUser(to.params.id, (user) => {
-        this.user = user
-      })
+      return {
+        user: store.fetchUser(to.params.id)
+      }
     }
   }
 }