mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Update RemoteProfile component, implement pagination

This commit is contained in:
Daniel Supernault 2021-06-13 01:52:05 -06:00
parent ab985167f9
commit 02b04a4b4d
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
resources/assets/js/components/RemoteProfile.vue
View File

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