Merge branch 'features/post-reading' into beta

client/src/remote.js

@@ -1,9 +1,20 @@
 module.exports = {
-  getPosts: function() {
+  getPosts: function(id) {
+    const BASE_URL = 'http://localhost:5000/api/posts'
+    const URL = BASE_URL + (id ? `/${id}` : '?sort=-1')
+
     this.$http
-      .get('http://localhost:5000/api/posts?sort=-1')
+      .get(URL)
       .then(res => {
-        this.posts = res.body
+        if (id) {
+          if (res.body.length === 0) {
+            throw Error("Response body empty")
+          }
+          this.post = res.body[0]
+        }
+        else {
+          this.posts = res.body
+        }
       })
       .catch(err => {
         console.log(`Error: ${err}`)

client/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import Posts from '../views/Posts.vue'
+import Post from '../views/Post.vue'
 import QAPage from '../views/QAPage'
 
 Vue.use(VueRouter)
@@ -17,6 +18,12 @@ const routes = [
     name: "Posts",
     component: Posts,
   },
+  {
+    path: "/posts/:id",
+    name: "Post",
+    component: Post,
+    props: true,
+  },
   {
     path: "/qa",
     name: "QA",

client/src/views/Post.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="Post">
+  <div v-if="Object.keys(post).length">
+    <h1>{{ post.title }}</h1>
+    <h5>Written on {{ post.date.substring(0,10)}}</h5>
+
+    <p v-for="(p, i) in post.content.split('\n')" :key="i">{{ p }}</p>
+  </div>
+  <h2 v-else>Waiting for post</h2>
+  <br>
+  Read other <a href="/posts">posts</a>
+  <br>
+  </div> 
+</template>
+
+<script>
+import { getPosts } from '../remote'
+
+export default {
+  name: "Post",
+  data() { 
+    return {
+      post: {},
+    }
+  },
+  methods: {
+    getPosts
+  },
+  mounted() {
+    getPosts.call(this, this._props.id)
+  },
+  props: {
+    id: {
+      type: String,
+      name: "id",
+      validator: val => {
+        const reg = /([0-9]|[a-f]){24}/
+        return reg.test(val)
+      },
+    }
+  }
+}
+</script>
+
+<style scoped></style>

client/src/views/Posts.vue

@@ -5,7 +5,8 @@
       <div> 
         <ul>
           <li v-for="(postItem, j) in getPostItems(month)" :key="j">
-            {{ getPostItemDate(postItem) }} – {{ postItem.title }}
+            {{ getPostItemDate(postItem) }} – 
+            <a :href="/posts/ + postItem._id">{{ postItem.title }}</a>
           </li>
         </ul>
       </div>