From f89c9251e69a06ef130ebf1e0b84bd7ba8b13f7f Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sat, 25 Apr 2020 14:38:40 +0200
Subject: [PATCH 1/6] Add Post view displaying passed id

---
 client/src/views/Post.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 client/src/views/Post.vue

diff --git a/client/src/views/Post.vue b/client/src/views/Post.vue
new file mode 100644
index 0000000..4c6e07e
--- /dev/null
+++ b/client/src/views/Post.vue
@@ -0,0 +1,22 @@
+<template>
+  <div id="Post">
+  <br>
+  Read other <a href="/posts">posts</a>
+  <br>
+  The id of the post is: {{ id }}
+  </div> 
+</template>
+
+<script>
+export default {
+  name: "Post",
+  props: {
+    id: {
+      type: String,
+      name: "id",
+    }
+  }
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file

From abcc91ca81220ee45df8547f7e895835945c0fe0 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sat, 25 Apr 2020 14:41:00 +0200
Subject: [PATCH 2/6] Add route to Post view

---
 client/src/router/index.js | 7 +++++++
 client/src/views/Posts.vue | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/router/index.js b/client/src/router/index.js
index a83440c..7594860 100644
--- a/client/src/router/index.js
+++ b/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",
diff --git a/client/src/views/Posts.vue b/client/src/views/Posts.vue
index 22a5468..b46ce22 100644
--- a/client/src/views/Posts.vue
+++ b/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>

From 5a9de291690e8a803f4390d9fc2425587068ad71 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sat, 25 Apr 2020 15:44:15 +0200
Subject: [PATCH 3/6] Add validator for Post prop id

---
 client/src/views/Post.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/views/Post.vue b/client/src/views/Post.vue
index 4c6e07e..3f0e939 100644
--- a/client/src/views/Post.vue
+++ b/client/src/views/Post.vue
@@ -14,6 +14,10 @@ export default {
     id: {
       type: String,
       name: "id",
+      validator: val => {
+        const reg = /([0-9]|[a-f]){24}/
+        return reg.test(val)
+      },
     }
   }
 }

From 3b22f15a45a08bb79e490dc87159248a5834e141 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sat, 25 Apr 2020 16:38:28 +0200
Subject: [PATCH 4/6] Extend remote to accept post id

---
 client/src/remote.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/src/remote.js b/client/src/remote.js
index 6b6ac99..63565e1 100644
--- a/client/src/remote.js
+++ b/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}`)

From 8cdc2f87678a6057fc8ec8068daf971fbcaa9a85 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sat, 25 Apr 2020 16:39:56 +0200
Subject: [PATCH 5/6] Call remote from Post component

---
 client/src/views/Post.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/client/src/views/Post.vue b/client/src/views/Post.vue
index 3f0e939..da1d1ff 100644
--- a/client/src/views/Post.vue
+++ b/client/src/views/Post.vue
@@ -8,8 +8,21 @@
 </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,

From 9da2f77f849c08866b2bd66bc1ba48f2e2989d77 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sat, 25 Apr 2020 17:04:44 +0200
Subject: [PATCH 6/6] Add title, date and content

---
 client/src/views/Post.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/views/Post.vue b/client/src/views/Post.vue
index da1d1ff..0cad746 100644
--- a/client/src/views/Post.vue
+++ b/client/src/views/Post.vue
@@ -1,9 +1,15 @@
 <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>
-  The id of the post is: {{ id }}
   </div> 
 </template>