Added pagination to mentions feed

fixes https://github.com/TryGhost/Team/issues/2573

Adds infinite scrolling to the mentions feed.
This commit is contained in:
Simon Backx 2023-02-20 12:27:01 +01:00
parent 70e2c07f2e
commit 0706d5f273
3 changed files with 23 additions and 21 deletions

View File

@ -1,21 +1,7 @@
import Controller from '@ember/controller';
import {A} from '@ember/array';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class MentionsController extends Controller {
@service store;
@tracked mentionsList = A([]);
constructor() {
super(...arguments);
}
@task
*loadMentionsTask() {
const mentions = yield this.store.query('mention', {order: 'created_at desc'});
this.mentionsList = mentions;
get mentionsInfinityModel() {
return this.model;
}
}

View File

@ -4,6 +4,9 @@ import {inject as service} from '@ember/service';
export default class MentionsRoute extends AuthenticatedRoute {
@service store;
@service feature;
@service infinity;
perPage = 10;
beforeModel() {
super.beforeModel(...arguments);
@ -12,8 +15,16 @@ export default class MentionsRoute extends AuthenticatedRoute {
}
}
setupController(controller) {
super.setupController(...arguments);
controller.loadMentionsTask.perform();
model() {
const perPage = this.perPage;
const paginationParams = {
perPageParam: 'limit',
totalPagesParam: 'meta.pagination.pages',
countParam: 'meta.pagination.total'
};
const paginationSettings = {perPage, startingPage: 1, order: 'created_at desc', ...paginationParams};
return this.infinity.model('mention', paginationSettings);
}
}

View File

@ -6,8 +6,8 @@
</GhCanvasHeader>
<section>
{{!-- TODO: Invert logic --}}
{{#if this.mentionsList}}
{{#each this.mentionsList as |mention|}}
{{#if this.mentionsInfinityModel}}
{{#each this.mentionsInfinityModel as |mention|}}
<div class="gh-mention-card">
{{!-- TODO: link to the post analytics page of your post --}}
<p class="gh-mention-your-post">Your {{if (eq mention.resource.type "post") "post" "page"}} <a href={{mention.target}} class="gh-mention-your-post-link">{{if mention.resource mention.resource.name mention.target}}</a> was mentioned in:</p>
@ -45,5 +45,10 @@
<p>When other sites mention your posts, they'll appear here.</p>
</div>
{{/if}}
<GhInfinityLoader
@infinityModel={{this.mentionsInfinityModel}}
@scrollable=".gh-main"
@triggerOffset={{1000}} />
</section>
</section>