Fix Timeline.vue, add proper infinite scroll

pull/735/head
Daniel Supernault 2019-01-02 21:56:44 -07:00
rodzic cdc7207297
commit 0c1eff85d2
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 0DEF1C662C9033F7
1 zmienionych plików z 30 dodań i 16 usunięć

Wyświetl plik

@ -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;