begin pagination, see #1

src/components/app.js

@@ -109,7 +109,7 @@ export default class BitrockWebsite extends HTMLElement {
     Promise.all([
       bitquest(API + PATHS.menu).get(),
       // bitquest(API + PATHS.tags).get(),
-      bitquest(API + PATHS.posts).get()
+      bitquest(API + PATHS.posts()).get()
     ]).then(responses => {
       renderMenu(responses[0]);
       // renderTags(responses[1]);

src/components/pages/home.js

@@ -20,6 +20,8 @@ export default class HomePage extends HTMLElement {
   constructor(){
     super();
 
+    this.page = 1;
+    this.more = true;
     this.posts = Array.from(Array(8), x => mock());
   }
 
@@ -29,7 +31,7 @@ export default class HomePage extends HTMLElement {
 
   connectedCallback(){
     this._render(true);
-    bitquest(API + PATHS.posts).get()
+    bitquest(API + PATHS.posts()).get()
       .then(data => setPosts(data));
 
     updateMetadata({
@@ -48,6 +50,23 @@ export default class HomePage extends HTMLElement {
     router.navigate('post.single', { id, slug });
   }
 
+  _endPagination() {
+    this.more = false;
+    return this.posts;
+  }
+
+  _loadMore() {
+    this.page++;
+
+    bitquest(API + PATHS.posts(this.page)).get()
+      .then(
+        data => this.posts.concat(data),
+        err => this._endPagination()
+      )
+      .then(more => setPosts(more))
+      .then(posts => posts);
+  }
+
   _render(loading) {
     const optimistic = loading ? 'loading' : '';
 
@@ -80,6 +99,11 @@ export default class HomePage extends HTMLElement {
 
       <main class$="wrapper ${optimistic}">
         ${this.posts.map(e => posts(e))}
+        
+        ${this.more ? 
+          html`<button on-click=${this._loadMore.bind(this)}>
+            Load more
+          </button>` : ''}
       </main>
     `;
 

src/consts.js

@@ -8,7 +8,7 @@ export const PATHS = {
   tags: 'tags',
   menu: 'menus/nav',
   pages: 'pages',
-  posts: 'posts?per_page=30&_embed=' + random(),
+  posts: (p = 1) => `posts?per_page=12&_embed=${random()}&page=${p}`,
   page: id => `pages/${id}?_embed=${random()}`,
   post: id => `posts/${id}?_embed=${random()}`
 }