Merge pull request #162 from openmcac/post_pagination

Post pagination

Author: achan

app/controllers/group/index.js

@@ -0,0 +1,20 @@
+import Ember from 'ember';
+import Pagination from 'ember-cli-jsonapi-pagination/mixins/controllers/jsonapi-pagination';
+
+export default Ember.Controller.extend(Pagination, {
+  totalPages: Ember.computed('size', 'number', 'model.posts.[]', function() {
+    const pageParam =
+      getParameterByName("page[number]", this.get("posts.links.last"));
+    return parseInt(pageParam || 0);
+  })
+});
+
+function getParameterByName(name, url) {
+  name = encodeURIComponent(name);
+  const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
+  const results = regex.exec(url);
+
+  if (results && results[2]) {
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+  }
+}

app/routes/group/index.js

@@ -1,19 +1,21 @@
 import Ember from 'ember';
+import Pagination from 'ember-cli-jsonapi-pagination/mixins/routes/jsonapi-pagination';
 
 const KIND_POST = 0;
 
-export default Ember.Route.extend({
-  model() {
+export default Ember.Route.extend(Pagination, {
+  model(params) {
     const group = this.modelFor("group");
 
     const filter = {
       group: group.get("id"),
       kind: KIND_POST
     };
 
-    const posts = this.store.query("post", {
+    const posts = this.queryPaginated("post", {
       filter: filter,
-      page: { size: 5 },
+      size: params.size,
+      number: params.number,
       sort: "-published_at"
     });
 

app/templates/group/index.hbs

@@ -10,6 +10,7 @@
               {{post-view post=post snippets=true}}
             </div>
           {{/each}}
+          {{paginate-collection totalPages=totalPages currentPage=number setCurrentPage=(action "setCurrentPage")}}
         </div>
       </section>
     {{/if}}

mirage/config.js

@@ -52,10 +52,18 @@ export default function() {
 
   this.get("/posts", function(schema, request) {
     const groupId = request.queryParams["filter[group]"];
+    const pageSize = parseInt(request.queryParams["page[size]"]);
+    const pageNumber = parseInt(request.queryParams["page[number]"]);
 
     if (groupId) {
       const group = schema.groups.find(groupId);
-      return group.posts;
+      const postIds = group.posts.models.map(model => model.id);
+      const offset = (pageNumber - 1) * pageSize;
+      const lastPage = Math.ceil(group.posts.models.length / pageSize);
+
+      let json = this.serialize(schema.posts.find(postIds.slice(offset, offset + pageSize)));
+      json.links = { "last": `http://example.com/api/v1/posts?page%5Bnumber%5D=${lastPage}` };
+      return json;
     }
 
     return schema.posts.all();

mirage/scenarios/default.js

@@ -21,7 +21,7 @@ export default function(server) {
     server.createList("announcement", 5, { bulletin });
   }
 
-  server.createList("post", 10, { group: englishService });
+  server.createList("post", 40, { group: englishService });
 
   server.create("user", { email: "[email protected]", name: "Test User" });
 }

package.json

@@ -40,6 +40,7 @@
     "ember-cli-htmlbars": "^1.0.11",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.3.1",
+    "ember-cli-jsonapi-pagination": "0.0.2",
     "ember-cli-mirage": "^0.2.0",
     "ember-cli-moment-shim": "1.0.0",
     "ember-cli-page-object": "^1.1.0",

tests/acceptance/group/index-test.js

@@ -25,7 +25,8 @@ test("handles groups that do not exist", function(assert) {
 
 test("renders appropriate group details", function(assert) {
   const group = server.create("group", { slug: "random" });
-  const posts = server.createList("post", 3, { group });
+  const posts = server.createList("post", 15, { group });
+  server.createList("post", 5, { group });
 
   page.visit({ slug: group.slug });
 
@@ -36,6 +37,7 @@ test("renders appropriate group details", function(assert) {
     assert.equal(page.bannerUrl(), `https://res.cloudinary.com/${ENV['CLOUDINARY_CLOUD_NAME']}/image/fetch/w_1920/${group.bannerUrl}`);
     assert.equal(page.profilePictureUrl(), `https://res.cloudinary.com/${ENV['CLOUDINARY_CLOUD_NAME']}/image/fetch/w_200/${group.profilePictureUrl}`);
 
+    assert.equal(page.posts().count, 15);
     posts.forEach(function(post, i) {
       assert.equal(page.posts(i).title, posts[i].title);
     });

tests/unit/controllers/group/index-test.js

@@ -0,0 +1,29 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:group/index', 'Unit | Controller | group/index', {
+  needs: ['service:metrics', 'service:router-scroll']
+});
+
+test('totalPages: Fetches the total pages from metadata', function(assert) {
+  const model = {
+    posts: {
+      links: { last: "https://mcac.church/api/v1/posts?page%5Bnumber%5D=4" }
+    }
+  };
+
+  const controller = this.subject(model);
+
+  assert.equal(controller.get("totalPages"), 4);
+});
+
+test('totalPages: Returns 0 when URL has no page number', function(assert) {
+  const model = {
+    posts: {
+      links: { last: "https://mcac.church/api/v1/posts" }
+    }
+  };
+
+  const controller = this.subject(model);
+
+  assert.equal(controller.get("totalPages"), 0);
+});