Feature/Add pagination

app/components/img-fancy-load.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object'
 
 export default class SearchBooksComponent extends Component {
-	placeholderSrc = 'http://placehold.jp/d1d1d1/707070/400x300.png?text=No%20Image';
+	placeholderSrc = 'placeholder-img.png';
 	@tracked showPlaceholder = true;
 
 	@action
@@ -12,8 +12,8 @@ export default class SearchBooksComponent extends Component {
 	}
 
 	@action
-	error() {
-		this.src = this.placeholderSrc;
+	error(event) {
+		event.target.src = this.placeholderSrc;
 		this.showPlaceholder = false;
 	}
 }

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/models/book.js

@@ -9,6 +9,6 @@ export default class BookModel extends Model {
 
   get image() {
     const firstImage = this.photos.get('firstObject');
-    return firstImage ? firstImage : { uri: 'http://placehold.jp/d1d1d1/707070/400x300.png?text=No%20Image', title: 'No Image' };
+    return firstImage ? firstImage : { uri: 'placeholder-img.png', title: 'No Image' };
   }
 }

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',
 });

tests/unit/models/book-test.js

@@ -23,9 +23,9 @@ module('Unit | Model | book', function(hooks) {
   test('when no image provided return the placeholder', function (assert) {
     const store = this.owner.lookup('service:store');
 
-    const placeholder = { uri: 'http://placehold.jp/d1d1d1/707070/400x300.png?text=No%20Image', title: 'No Image' };
+    const placeholder = { uri: 'placeholder-img.png', title: 'No Image' };
     const model = store.createRecord('book', { title: 'Book #1' });
 
-    assert.equal(model.image.uri, 'http://placehold.jp/d1d1d1/707070/400x300.png?text=No%20Image');
+    assert.equal(model.image.uri, 'placeholder-img.png');
   });
 });