Add fetching of older statuses.

2 files changed, 20 insertions, 0 deletions

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 433bca11..113455f4 100644
--- a/src/components/timeline/timeline.js
+++ b/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 }))
     }
   }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1e779638..2f1b8c28 100644
--- a/src/components/timeline/timeline.vue
+++ b/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>