Add fetching of older statuses.

src/components/timeline/timeline.js

@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 
 const Timeline = {
   props: [
@@ -11,6 +12,18 @@ const Timeline = {
   methods: {
     showNewStatuses () {
       this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+    },
+    fetchOlderStatuses () {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+      store.commit('setLoading', { timeline: this.timelineName, value: true });
+      timelineFetcher.fetchAndUpdate({
+        store,
+        credentials,
+        timeline: this.timelineName,
+        older: true,
+        showImmediately: true
+      }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
     }
   }
 }

src/components/timeline/timeline.vue

@@ -8,6 +8,13 @@
       </div>
     </a>
     <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
+    <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+      <div class="new-status-notification">
+        <p class="text-center" >
+          Load older statuses.
+        </p>
+      </div>
+    </a>
   </div>
 </template>
 <script src="./timeline.js"></script>

src/modules/statuses.js

@@ -12,7 +12,8 @@ const defaultState = {
       visibleStatuses: [],
       newStatusCount: 0,
       maxId: 0,
-      minVisibleId: 0
+      minVisibleId: 0,
+      loading: false
     },
     publicAndExternal: {
       statuses: [],
@@ -20,7 +21,8 @@ const defaultState = {
       visibleStatuses: [],
       newStatusCount: 0,
       maxId: 0,
-      minVisibleId: 0
+      minVisibleId: 0,
+      loading: false
     },
     friends: {
       statuses: [],
@@ -28,7 +30,8 @@ const defaultState = {
       visibleStatuses: [],
       newStatusCount: 0,
       maxId: 0,
-      minVisibleId: 0
+      minVisibleId: 0,
+      loading: false
     }
   }
 }
@@ -37,7 +40,7 @@ const statusType = (status) => {
   return !status.is_post_verb && status.uri.match(/fave/) ? 'fave' : 'status'
 }
 
-const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves }) => {
+const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves, loading }) => {
   const statusesAndFaves = groupBy(addedStatuses, statusType)
   const addedFaves = statusesAndFaves['fave'] || []
   const unseenFaves = differenceBy(addedFaves, faves, 'id')
@@ -92,7 +95,8 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
     newStatusCount: newNewStatusCount,
     maxId: newStatuses[0].id,
     minVisibleId: (last(newVisibleStatuses) || { id: undefined }).id,
-    faves: unionBy(faves, addedFaves, 'id')
+    faves: unionBy(faves, addedFaves, 'id'),
+    loading
   }
 }
 
@@ -138,6 +142,9 @@ const statuses = {
       const newStatus = find(state.allStatuses, status)
       newStatus.favorited = value
     },
+    setLoading (state, { timeline, value }) {
+      state.timelines[timeline].loading = value
+    },
     setNsfw (state, { id, nsfw }) {
       // For now, walk through all the statuses because the stuff might be in the replied_to_status
       // TODO: Save the replied_tos as references.

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -16,7 +16,8 @@ const update = ({store, statuses, timeline, showImmediately}) => {
 
 const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
   const args = { timeline, credentials }
-  const timelineData = store.rootState.statuses.timelines[camelCase(timeline)]
+  const rootState = store.rootState || store.state
+  const timelineData = rootState.statuses.timelines[camelCase(timeline)]
 
   if (older) {
     args['until'] = timelineData.minVisibleId
@@ -24,7 +25,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
     args['since'] = timelineData.maxId
   }
 
-  apiService.fetchTimeline(args)
+  return apiService.fetchTimeline(args)
     .then((statuses) => update({store, statuses, timeline, showImmediately}))
 }
 
@@ -35,6 +36,7 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => {
   setInterval(boundFetchAndUpdate, 10000)
 }
 const timelineFetcher = {
+  fetchAndUpdate,
   startFetching
 }