mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 14:31:26 +00:00
Update RemoteProfile component, implement pagination
This commit is contained in:
parent
ab985167f9
commit
02b04a4b4d
1 changed files with 61 additions and 3 deletions
|
@ -125,7 +125,16 @@
|
|||
</div>
|
||||
|
||||
<div v-else class="col-12 mt-4">
|
||||
<p class="text-center mb-0 px-0"><button class="btn btn-outline-primary btn-block font-weight-bold">Load More</button></p>
|
||||
<p v-if="showLoadMore" class="text-center mb-0 px-0">
|
||||
<button @click="loadMorePosts()" class="btn btn-outline-primary btn-block font-weight-bold">
|
||||
<span v-if="!loadingMore">Load More</span>
|
||||
<span v-else>
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -193,6 +202,7 @@
|
|||
data() {
|
||||
return {
|
||||
id: [],
|
||||
ids: [],
|
||||
user: false,
|
||||
profile: {},
|
||||
feed: [],
|
||||
|
@ -206,7 +216,9 @@
|
|||
ctxMenuStatus: false,
|
||||
ctxMenuRelationship: false,
|
||||
fetchingRemotePosts: false,
|
||||
showMutualFollowers: false
|
||||
showMutualFollowers: false,
|
||||
loadingMore: false,
|
||||
showLoadMore: true
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -277,6 +289,52 @@
|
|||
});
|
||||
},
|
||||
|
||||
loadMorePosts() {
|
||||
this.loadingMore = true;
|
||||
let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
|
||||
axios.get(apiUrl, {
|
||||
params: {
|
||||
only_media: true,
|
||||
max_id: this.max_id,
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
let data = res.data
|
||||
.filter(status => this.ids.indexOf(status.id) === -1)
|
||||
.filter(status => status.media_attachments.length > 0)
|
||||
.map(status => {
|
||||
return {
|
||||
id: status.id,
|
||||
caption: {
|
||||
text: status.content_text,
|
||||
html: status.content
|
||||
},
|
||||
count: {
|
||||
likes: status.favourites_count,
|
||||
shares: status.reblogs_count,
|
||||
comments: status.reply_count
|
||||
},
|
||||
thumb: status.media_attachments[0].url,
|
||||
media: status.media_attachments,
|
||||
timestamp: status.created_at,
|
||||
type: status.pf_type,
|
||||
url: status.url,
|
||||
sensitive: status.sensitive,
|
||||
cw: status.sensitive,
|
||||
spoiler_text: status.spoiler_text
|
||||
}
|
||||
});
|
||||
let ids = data.map(status => status.id);
|
||||
this.ids.push(...ids);
|
||||
this.max_id = Math.min(...ids);
|
||||
this.feed.push(...data);
|
||||
this.loadingMore = false;
|
||||
}).catch(err => {
|
||||
this.loadingMore = false;
|
||||
this.showLoadMore = false;
|
||||
});
|
||||
},
|
||||
|
||||
fetchRelationships() {
|
||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
|
||||
return;
|
||||
|
@ -509,4 +567,4 @@
|
|||
max-width: 1050px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue