Update Timeline.vue, increase pagination limit from 3 to 12 and add empty feed placeholder

This commit is contained in:
Daniel Supernault 2021-07-15 23:36:44 -06:00
parent 86422c81b7
commit 916e8f7111
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -280,17 +280,24 @@
:status="status" :status="status"
:recommended="true" /> :recommended="true" />
</div> </div>
<div v-if="!loading && emptyFeed">
<div class="card rounded-0 mt-3 status-card rounded-0 shadow-none border">
<div class="card-body py-5 my-5">
<p class="text-center"><i class="fas fa-battery-empty fa-8x text-lighter"></i></p>
<p class="text-center h3 font-weight-light">empty_timeline.jpg</p>
<p class="text-center text-muted font-weight-light">We cannot find any posts for this timeline.</p>
<p class="text-center mb-0">
<a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block"> <div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
<div> <div>
<!-- <div class="mb-4">
<a class="btn btn-block btn-primary btn-sm font-weight-bold mb-3 border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
<i class="far fa-plus-square pr-3 fa-lg pt-1"></i> New Post
</a>
</div> -->
<div class="mb-4"> <div class="mb-4">
<div v-show="!loading" class=""> <div v-show="!loading" class="">
<div class="pb-2"> <div class="pb-2">
@ -580,7 +587,8 @@
recentFeed: this.scope === 'home' ? true : false, recentFeed: this.scope === 'home' ? true : false,
recentFeedMin: null, recentFeedMin: null,
recentFeedMax: null, recentFeedMax: null,
reactionBar: true reactionBar: true,
emptyFeed: false
} }
}, },
@ -687,11 +695,18 @@
axios.get(apiUrl, { axios.get(apiUrl, {
params: { params: {
max_id: this.max_id, max_id: this.max_id,
limit: 3, limit: 12,
recent_feed: this.recentFeed recent_feed: this.recentFeed
} }
}).then(res => { }).then(res => {
let data = res.data; let data = res.data;
if(!data.length) {
this.loading = false;
this.emptyFeed = true;
return;
}
this.feed.push(...data); this.feed.push(...data);
let ids = data.map(status => status.id); let ids = data.map(status => status.id);
this.ids = ids; this.ids = ids;