Add PostList

8 files changed, 161 insertions, 61 deletions

diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js
index 71d04ed..a824b35 100644
--- a/components/PostLink.stories.js
+++ b/components/PostLink.stories.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
 
 import PostLink from './PostLink'
 
@@ -9,13 +10,6 @@ export const postLink = {
   route: '/kronika/2019/20/11/test'
 }
 
-const center = () => {
-  return {
-    template:
-      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
-  }
-}
-
 storiesOf('PostLink', module)
   .addDecorator(center)
   .add('default', () => {
diff --git a/components/PostLink.vue b/components/PostLink.vue
index b0aeb5a..5bc5127 100644
--- a/components/PostLink.vue
+++ b/components/PostLink.vue
@@ -40,6 +40,7 @@ export default {
   margin: 20px;
   flex-basis: 410px;
   max-width: 410px;
+  height: 250px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   background: #ffffff;
   text-align: left;
diff --git a/components/PostList/PostList.vue b/components/PostList/PostList.vue
new file mode 100644
index 0000000..206a73f
--- /dev/null
+++ b/components/PostList/PostList.vue
@@ -0,0 +1,49 @@
+<template>
+  <pure-post-list :posts="posts" :loading="loading" />
+</template>
+
+<script>
+import PurePostList from './PurePostList'
+
+export default {
+  name: 'PostList',
+  components: { PurePostList },
+  props: {
+    max: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      rawPosts: []
+    }
+  },
+  mounted() {
+    this.loadPostsClient()
+  },
+  computed: {
+    posts() {
+      if (this.max) {
+        return this.rawPosts.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
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/PostList/PurePostList.stories.js b/components/PostList/PurePostList.stories.js
new file mode 100644
index 0000000..cf812f7
--- /dev/null
+++ b/components/PostList/PurePostList.stories.js
@@ -0,0 +1,31 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import { postLink } from '../PostLink.stories'
+
+import PurePostList from './PurePostList'
+
+export const posts = Array(5).fill(postLink)
+console.log(posts)
+
+storiesOf('PurePostList', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`,
+      data: () => ({ posts })
+    }
+  })
+  .add('loading', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts" loading/>`
+    }
+  })
+  .add('no posts', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`
+    }
+  })
diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue
new file mode 100644
index 0000000..7e70db8
--- /dev/null
+++ b/components/PostList/PurePostList.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="post-list">
+    <div v-if="loading" class="post-list-container">
+      <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
+    </div>
+    <div v-else-if="posts" class="post-list-container">
+      <post-link
+        v-for="(post, index) in posts"
+        :key="index"
+        :route="post.route"
+        :title="post.title"
+        :description="post.description"
+      />
+    </div>
+    <div v-else class="no-posts">Brak wpisów</div>
+  </div>
+</template>
+
+<script>
+import PostLink from '../PostLink'
+
+export default {
+  name: 'PurePostList',
+  components: { PostLink },
+  props: {
+    posts: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post-list {
+  width: 100%;
+  max-width: 900px;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.post-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: initial;
+}
+
+@keyframes loading {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading-post {
+  background: #efefef;
+  animation: loading 1.5s ease-in-out infinite;
+  margin: 20px;
+  flex-basis: 410px;
+  width: 410px;
+  height: 250px;
+  text-align: left;
+}
+
+.no-posts {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/PostList/index.js b/components/PostList/index.js
new file mode 100644
index 0000000..dbb515e
--- /dev/null
+++ b/components/PostList/index.js
@@ -0,0 +1,3 @@
+import PostList from './PostList'
+
+export default PostList
diff --git a/components/PurePostList.stories.js b/components/PurePostList.stories.js
deleted file mode 100644
index 134cd68..0000000
--- a/components/PurePostList.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-
-import { postLink } from './PostLink.stories'
-
-import PurePostList from './PurePostList'
-
-export const posts = Array(5).fill(postLink)
-console.log(posts)
-
-storiesOf('PurePostList', module).add('default', () => {
-  return {
-    components: { PurePostList },
-    template: `<pure-post-list :posts="posts"/>`,
-    data: () => ({ posts })
-  }
-})
diff --git a/components/PurePostList.vue b/components/PurePostList.vue
deleted file mode 100644
index a93360d..0000000
--- a/components/PurePostList.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <div v-if="posts" class="post-list">
-      <post-link
-        v-for="(post, index) in posts"
-        :key="index"
-        :route="post.route"
-        :title="post.title"
-        :description="post.description"
-      />
-    </div>
-    <div v-else>Brak wpisów</div>
-  </div>
-</template>
-
-<script>
-import PostLink from './PostLink'
-
-export default {
-  name: 'PurePostList',
-  components: { PostLink },
-  props: {
-    posts: {
-      type: Array,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.post-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  max-width: 900px;
-}
-</style>
\ No newline at end of file