Feature/Add pagination

app/components/list-books.hbs

@@ -4,4 +4,10 @@
 	<div class="alert alert-warning mx-auto" role="alert" data-test="no-books">
 		There are no books to be displayed. Try looking on {{#link-to "books" class="alert-link"}}homepage{{/link-to}} for more awesome books!
 	</div>
-{{/each}}
+{{/each}}
+
+{{#if @model }}
+	<InfinityLoader @infinityModel={{ @model }}>
+		<img src="spinner.gif" title="spinner" />
+	</InfinityLoader>
+{{/if}}

app/routes/books.js

@@ -4,13 +4,16 @@ import ENV from 'bigriver-bookstore/config/environment'
 
 export default class BooksRoute extends Route {
   @service store;
+  @service infinity;
 
   model() {
-    return this.store.query('book', {
-      page: {
-        size: ENV.BOOKS_PER_PAGE
-      },
-      include: 'author,photos'
+    return this.infinity.model('book', {
+      include: 'author,photos',
+      perPage: ENV.BOOKS_PER_PAGE,
+      startingPage: 1,
+      perPageParam: 'page[size]', 
+      pageParam: 'page[number]', 
+      countParam: 'meta.total_resources'
     });
   }
 }

app/routes/search.js

@@ -4,6 +4,7 @@ import ENV from 'bigriver-bookstore/config/environment'
 
 export default class SearchRoute extends Route {
   @service store;
+  @service infinity;
 
   queryParams = {
     query: {
@@ -14,14 +15,16 @@ export default class SearchRoute extends Route {
   model(params) {
     const query = params.query ? params.query : '';
 
-    return this.store.query('book', {
-      page: {
-        size: ENV.BOOKS_PER_PAGE,
-      },
+    return this.infinity.model('book', {
       filter: {
         'author.name': query
       },
-      include: 'author,photos'
+      include: 'author,photos',
+      perPage: ENV.BOOKS_PER_PAGE,
+      startingPage: 1,
+      perPageParam: 'page[size]', 
+      pageParam: 'page[number]', 
+      countParam: 'meta.total_resources'
     });
   }
 }

app/styles/app.css

@@ -27,7 +27,7 @@ h1 {
   bottom: 0;
   left: 0;
   background-color: #ccc;
-  background-image: url('http://placehold.it/400x300?text=Loading Image');
+  background-image: url('/loading-img.png');
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -39,4 +39,17 @@ h1 {
 
 footer .badge {
 	font-size: 0.9rem;
+}
+
+.infinity-loader {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.infinity-loader img {
+  width: 100px;
+}
+
+.infinity-loader.reached-infinity img {
+  display: none;
 }

package.json

@@ -37,6 +37,7 @@
     "ember-cli-uglify": "^3.0.0",
     "ember-data": "~3.14.0",
     "ember-export-application-global": "^2.0.0",
+    "ember-infinity": "^2.1.1",
     "ember-load-initializers": "^2.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.4.1",

tests/acceptance/books-test.js

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL } from '@ember/test-helpers';
+import { visit, currentURL, waitUntil } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import page from 'bigriver-bookstore/tests/pages/books';
 
@@ -25,4 +25,18 @@ module('Acceptance | books', function(hooks) {
     assert.ok(page.books(0).hasAuthor);
     assert.ok(page.books(0).hasImage);
   });
+
+  test('fetch more data when scrolled down', async function(assert) {
+    await page.visit();
+
+    assert.equal(page.books().count, 9);
+
+    document.querySelector(page.loaderClass).scrollIntoView();
+
+    await waitUntil(() => {
+      return page.books().count === 18;
+    });
+
+    assert.equal(page.books().count, 18);
+  });
 });

tests/pages/books.js

@@ -19,4 +19,5 @@ export default create({
   searchDisabledPresent: isPresent('[data-test="search-btn"]:disabled'),
   fillInSearchInput: fillable('input', { scope: '[data-test="search-by-author-form"]' }),
   fancyPlaceholder: isPresent('[data-test="fancy-placeholder"]'),
+  loaderClass: '.infinity-loader',
 });