realtime updates

Author: yyx990803

src/components/NewsList.vue

@@ -27,6 +27,7 @@
 <script>
 import Spinner from './Spinner.vue'
 import NewsItem from './NewsItem.vue'
+import { watchList } from '../store/api'
 
 export default {
  name: 'NewsList',
@@ -46,7 +47,9 @@ export default {
  loading: false,
  transition: 'slide-left',
  // if this is the initial render, directly render with the store state
- // otherwise this is a page switch, start with blank and wait for data load
+ // otherwise this is a page switch, start with blank and wait for data load.
+ // we need these local state so that we can precisely control the timing
+ // of the transitions.
  displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
  displayedItems: isInitialRender ? this.$store.getters.activeItems : []
  }
@@ -69,6 +72,16 @@ export default {
  if (this.$root._isMounted) {
  this.loadItems(this.page)
  }
+ this.unwatchList = watchList(this.type, ids => {
+ this.$store.commit('SET_LIST', { type: this.type, ids })
+ this.$store.dispatch('FETCH_ACTIVE_ITEMS').then(() => {
+ this.displayedItems = this.$store.getters.activeItems
+ })
+ })
+ },
+
+ destroyed () {
+ this.unwatchList()
  },
 
  watch: {

src/store/api.js

@@ -71,3 +71,19 @@ export function fetchItem (id, forceRefresh) {
 export function fetchItems (ids) {
  return Promise.all(ids.map(id => fetchItem(id)))
 }
+
+export function watchList (type, cb) {
+ let first = true
+ const ref = api.child(`${type}stories`)
+ const handler = snapshot => {
+ if (first) {
+ first = false
+ } else {
+ cb(snapshot.val())
+ }
+ }
+ ref.on('value', handler)
+ return () => {
+ ref.off('value', handler)
+ }
+}

src/store/index.js

@@ -26,8 +26,16 @@ const store = new Vuex.Store({
  commit('SET_ACTIVE_TYPE', { type })
  return fetchIdsByType(type)
  .then(ids => commit('SET_LIST', { type, ids }))
- .then(() => fetchItems(getters.activeIds.filter(id => !state.items[id])))
- .then(items => commit('SET_ITEMS', { items }))
+ .then(() => dispatch('FETCH_ACTIVE_ITEMS'))
+ },
+
+ FETCH_ACTIVE_ITEMS: ({ commit, state, getters }) => {
+ const ids = getters.activeIds.filter(id => !state.items[id])
+ if (ids.length) {
+ return fetchItems(ids).then(items => commit('SET_ITEMS', { items }))
+ } else {
+ return Promise.resolve()
+ }
  }
  },