From 0c1eff85d202e69f8e52cbb2fc1a99602aae7a99 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Wed, 2 Jan 2019 21:56:44 -0700
Subject: [PATCH] Fix Timeline.vue, add proper infinite scroll

---
 resources/assets/js/components/Timeline.vue | 46 ++++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index b2feb3298..acb04f004 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -2,11 +2,6 @@
 <div class="container" style="">
 	<div class="row">
 		<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1">
-			<div class="loader text-center">
-				<div class="spinner-border" role="status">
-				  <span class="sr-only">Loading...</span>
-				</div>
-			</div>
 			<div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id">
 
 				<div class="card-header d-inline-flex align-items-center bg-white">
@@ -97,6 +92,10 @@
 					</form>
 				</div>
 			</div>
+			<infinite-loading @infinite="infiniteTimeline">
+				<div slot="no-more" class="font-weight-bold text-light">No more posts to load</div>
+				<div slot="no-results" class="font-weight-bold text-light">No posts found</div>
+			</infinite-loading>
 		</div>
 
 		<div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2">
@@ -241,7 +240,6 @@
 		},
 
 		updated() {
-			this.scroll();
 		},
 
 		methods: {
@@ -279,6 +277,32 @@
 				});
 			},
 
+			infiniteTimeline($state) {
+				let homeTimeline = '/api/v1/timelines/home';
+				let localTimeline = '/api/v1/timelines/public';
+				let apiUrl = this.scope == '/' ? homeTimeline : localTimeline;
+				axios.get(apiUrl, {
+					params: {
+						page: this.page,
+					},
+				}).then(res => {
+					if (res.data.length) {
+						$('.timeline .loader').addClass('d-none');
+						let data = res.data;
+						this.feed.push(...data);
+						let ids = data.map(status => status.id);
+						this.min_id = Math.min(...ids);
+						if(this.page == 1) {
+							this.max_id = Math.max(...ids);
+						}
+						this.page += 1;
+						$state.loaded();
+					} else {
+						$state.complete();
+					}
+				});
+			},
+
 			fetchNotifications() {
 				axios.get('/api/v1/notifications')
 				.then(res => {
@@ -288,16 +312,6 @@
 				});
 			},
 
-			scroll() {
-				window.onscroll = () => {
-				  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight == document.documentElement.offsetHeight;
-
-				  if (bottomOfWindow) {
-				  	this.fetchTimelineApi();
-				  }
-				};
-			},
-
 			reportUrl(status) {
 				let type = status.in_reply_to ? 'comment' : 'post';
 				let id = status.id;