Added pagination to mentions feed

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

Adds infinite scrolling to the mentions feed.

ghost/admin/app/controllers/mentions.js

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

ghost/admin/app/routes/mentions.js

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

ghost/admin/app/templates/mentions.hbs

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