Add pagination

5 files changed, 32 insertions, 10 deletions

diff --git a/components/Posts/PostList/PostList.vue b/components/Posts/PostList/PostList.vue
index 80369a8..64070d8 100644
--- a/components/Posts/PostList/PostList.vue
+++ b/components/Posts/PostList/PostList.vue
@@ -1,5 +1,5 @@
 <template>
-  <pure-post-list v-if="posts" :posts="parsedPosts" :loading="loading" />
+  <pure-post-list v-if="posts" :next="next" :posts="parsedPosts" :loading="loading" />
 </template>
 
 <script>
@@ -17,6 +17,10 @@ export default {
     posts: {
       type: Array,
       required: false
+    },
+    next: {
+      type: Number,
+      required: false
     }
   },
   computed: {
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index 7281f21..b152dda 100644
--- a/components/Posts/PostList/PurePostList.vue
+++ b/components/Posts/PostList/PurePostList.vue
@@ -14,6 +14,9 @@
           :description="post.description"
           :image="post.meta.image"
         />
+        <nuxt-link :to="`?page=${next}`" v-if="next">
+          <plain-button class="next-link" text="Wcześniejsze wpisy"/>
+        </nuxt-link>
       </div>
     </transition>
   </div>
@@ -21,15 +24,20 @@
 
 <script>
 import PostLink from '../PostLink'
+import PlainButton from '../../Buttons/PlainButton.vue';
 
 export default {
   name: 'PurePostList',
-  components: { PostLink },
+  components: { PostLink, PlainButton },
   props: {
     posts: {
       type: Array,
       required: true,
     },
+    next: {
+      type: Number,
+      required: false,
+    },
     loading: {
       type: Boolean,
       required: false,
@@ -84,6 +92,12 @@ export default {
   text-align: center;
 }
 
+.next-link {
+  margin: 2em 0;
+  padding: 1em;
+  max-width: 100%;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 1;
diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js
index dad805d..d3ca5f7 100644
--- a/components/Posts/PostList/index.js
+++ b/components/Posts/PostList/index.js
@@ -3,9 +3,12 @@ import axios from 'axios'
 import { apiUrl, parsePosts } from '~/api'
 import PostList from './PostList'
 
-export const getPosts = async () => {
-  let posts = await axios.get(`${apiUrl}/posts.json`)
-  return parsePosts(posts.data)
+export const getPosts = async (pageId) => {
+  let { data } = await axios.get(`${apiUrl}/page/${pageId}.json`)
+  return {
+    posts: parsePosts(data.posts),
+    next: data.next
+  };
 }
 
 export default PostList
diff --git a/components/Posts/PostList/parentMixin.js b/components/Posts/PostList/parentMixin.js
index 801d51c..b9181e8 100644
--- a/components/Posts/PostList/parentMixin.js
+++ b/components/Posts/PostList/parentMixin.js
@@ -1,9 +1,10 @@
 import { getPosts } from './index'
 
 export default {
-  async asyncData() {
-    return {
-      posts: await getPosts(),
-    }
+  async asyncData({ query }) {
+    let page = query.page || 1;
+    const data = await getPosts(page);
+    return data;
   },
+  watchQuery: true
 }
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index afe76ce..8887682 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="padding-top: 20px; max-width: 900px">
     <h2>Ostatnie wpisy</h2>
-    <post-list :posts="posts" max="8" />
+    <post-list :posts="posts" :next="next" :max="8" />
     <google-drive-link
       text="Zobacz również e&#8209;książkę rozkazów"
       link="https://drive.google.com/drive/folders/1LWH4yYXpaa8kapBa2UAZTKnAAgXOHQYo?usp=sharing"