Fix SSR on PostList

8 files changed, 95 insertions, 41 deletions

diff --git a/components/Posts/PostList/PostList.vue b/components/Posts/PostList/PostList.vue
index 781099f..80369a8 100644
--- a/components/Posts/PostList/PostList.vue
+++ b/components/Posts/PostList/PostList.vue
@@ -1,9 +1,8 @@
 <template>
-  <pure-post-list v-if="rawPosts" :posts="posts" :loading="loading" />
+  <pure-post-list v-if="posts" :posts="parsedPosts" :loading="loading" />
 </template>
 
 <script>
-import k from '~/api'
 import PurePostList from './PurePostList'
 
 export default {
@@ -12,43 +11,23 @@ export default {
   props: {
     max: {
       type: Number,
+      required: false,
+      default: () => 4
+    },
+    posts: {
+      type: Array,
       required: false
     }
   },
-  data() {
-    return {
-      loading: true,
-      rawPosts: undefined
-    }
-  },
-  mounted() {
-    if (process.client && this.rawPosts === undefined) {
-      this.loadPostsClient()
-    } else {
-      this.rawPosts = k.getPosts()
-      this.loading = false
-    }
-  },
   computed: {
-    posts() {
+    parsedPosts() {
       if (this.max) {
-        return this.rawPosts.slice(0, this.max)
+        return this.posts.slice(0, this.max)
       }
-      return this.rawPosts
-    }
-  },
-  methods: {
-    async loadPostsClient() {
-      let posts = await this.$axios.get(
-        `${window.location.origin}/api/posts.json`
-      )
-      this.rawPosts = posts.data
-      this.rawPosts = this.rawPosts.map(post => ({
-        title: post.content.meta.title,
-        description: post.content.description,
-        route: post.route
-      }))
-      this.loading = false
+      return this.posts
+    },
+    loading() {
+      return this.posts === undefined
     }
   }
 }
diff --git a/components/Posts/PostList/README.md b/components/Posts/PostList/README.md
new file mode 100644
index 0000000..839f9c2
--- /dev/null
+++ b/components/Posts/PostList/README.md
@@ -0,0 +1,42 @@
+## PostList
+
+This component creates a list of posts
+
+### Usage
+
+```html
+<template>
+  <post-list :posts="posts">
+</template>
+
+<script>
+import PostList, { getPosts } from '~/components/Posts/PostList';
+
+export default {
+  components: { PostList },
+  async asyncData() {
+    return {
+      posts: await getPosts()
+    }
+  }
+}
+</script>
+```
+
+Or by using the mixin
+
+```html
+<template>
+  <post-list :posts="posts">
+</template>
+
+<script>
+import PostList from '~/components/Posts/PostList';
+import postListParentMixin from '~/components/Posts/PostList/parentMixin';
+
+export default {
+  components: { PostList },
+  mixins: [postListParentMixin]
+}
+</script>
+```
diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js
index dbb515e..11d44ff 100644
--- a/components/Posts/PostList/index.js
+++ b/components/Posts/PostList/index.js
@@ -1,3 +1,22 @@
+import axios from 'axios'
+
+import k from '~/api'
 import PostList from './PostList'
 
+export const getPosts = async () => {
+  if (process.client) {
+    let posts = await axios.get(`${window.location.origin}/api/posts.json`)
+    return parsePosts(posts.data)
+  } else {
+    return parsePosts(k.getPosts())
+  }
+}
+
+export const parsePosts = posts =>
+  posts.map(post => ({
+    title: post.content.meta.title,
+    description: post.content.description,
+    route: post.route
+  }))
+
 export default PostList
diff --git a/components/Posts/PostList/parentMixin.js b/components/Posts/PostList/parentMixin.js
new file mode 100644
index 0000000..e5b06ed
--- /dev/null
+++ b/components/Posts/PostList/parentMixin.js
@@ -0,0 +1,9 @@
+import { getPosts } from './index'
+
+export default {
+  async asyncData() {
+    return {
+      posts: await getPosts()
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index dc75e41..3c259df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4150,7 +4150,7 @@
       "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
       "requires": {
         "follow-redirects": "1.5.10",
-        "is-buffer": "2.0.3"
+        "is-buffer": "2.0.4"
       },
       "dependencies": {
         "debug": {
@@ -4170,9 +4170,9 @@
           }
         },
         "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         },
         "ms": {
           "version": "2.0.0",
diff --git a/package.json b/package.json
index d7925a2..6522e9d 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/pwa": "^3.0.0-0",
+    "axios": "^0.19.0",
     "esm": "^3.2.25",
     "front-matter": "^3.0.2",
     "jsdom": "^15.1.1",
diff --git a/pages/index.vue b/pages/index.vue
index 3a19237..045025d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
     <join-us />
     <div style="width: 100%; padding-top: 50px">
       <h1>Ostatnie wpisy z kroniki</h1>
-      <post-list :max="4" />
+      <post-list :posts="posts" :max="4" />
     </div>
     <facebook-feed />
   </div>
@@ -13,9 +13,11 @@
 import JoinUs from '~/components/JoinUs.vue'
 import FacebookFeed from '~/components/Facebook/FacebookFeed.vue'
 import PostList from '~/components/Posts/PostList'
+import postListParentMixin from '~/components/Posts/PostList/parentMixin'
 
 export default {
   name: 'HomeView',
-  components: { JoinUs, FacebookFeed, PostList }
+  components: { JoinUs, FacebookFeed, PostList },
+  mixins: [postListParentMixin]
 }
 </script>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 86344c3..8142a6c 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,16 +1,18 @@
 <template>
   <div style="padding-top: 20px">
     <h2>Ostatnie wpisy</h2>
-    <post-list />
+    <post-list :posts="posts" />
   </div>
 </template>
 
 <script>
 import PostList from '~/components/Posts/PostList'
+import postListParentMixin from '~/components/Posts/PostList/parentMixin'
 
 export default {
   components: {
     PostList
-  }
+  },
+  mixins: [postListParentMixin]
 }
 </script>