comments

src/components/NewsList.vue

@@ -72,6 +72,7 @@ export default {
     if (this.$root._isMounted) {
       this.loadItems(this.page)
     }
+    // watch the current list for realtime updates
     this.unwatchList = watchList(this.type, ids => {
       this.$store.commit('SET_LIST', { type: this.type, ids })
       this.$store.dispatch('FETCH_ACTIVE_ITEMS').then(() => {

src/store/api.js

@@ -79,11 +79,14 @@ export function watchList (type, cb) {
     if (first) {
       first = false
     } else {
+      console.log(`update for ${type}`)
       cb(snapshot.val())
     }
   }
+  console.log(`watching ${type}...`)
   ref.on('value', handler)
   return () => {
+    console.log(`stop watching ${type}`)
     ref.off('value', handler)
   }
 }

src/store/index.js

@@ -22,6 +22,7 @@ const store = new Vuex.Store({
   },
 
   actions: {
+    // ensure data for rendering given list type
     FETCH_DATA_FOR_TYPE: ({ commit, dispatch, state, getters }, { type }) => {
       commit('SET_ACTIVE_TYPE', { type })
       return fetchIdsByType(type)
@@ -29,7 +30,9 @@ const store = new Vuex.Store({
         .then(() => dispatch('FETCH_ACTIVE_ITEMS'))
     },
 
+    // ensure all active items are fetched
     FETCH_ACTIVE_ITEMS: ({ commit, state, getters }) => {
+      // only fetch items that we don't already have.
       const ids = getters.activeIds.filter(id => !state.items[id])
       if (ids.length) {
         return fetchItems(ids).then(items => commit('SET_ITEMS', { items }))
@@ -58,6 +61,8 @@ const store = new Vuex.Store({
   },
 
   getters: {
+    // ids of the items that should be currently displayed based on
+    // current list type and current pagination
     activeIds (state) {
       const { activeType, itemsPerPage, lists } = state
       const page = Number(state.route.params.page) || 1
@@ -70,6 +75,8 @@ const store = new Vuex.Store({
       }
     },
 
+    // items that should be currently displayed.
+    // this Array may not be fully fetched.
     activeItems (state, getters) {
       return getters.activeIds.map(id => state.items[id]).filter(_ => _)
     }