From e6b1b692d6e67eac7b7614d81b95dbea4c2f0fdf Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 3 Jan 2021 23:01:19 +0100
Subject: [PATCH] Edit page for posts w/ update to api.

---
 frontend/pages/EditPage.vue | 109 ++++++++++++++++++++++++++++++++++++
 frontend/routes.js          |   5 ++
 frontend/utils.js           |   1 +
 3 files changed, 115 insertions(+)
 create mode 100644 frontend/pages/EditPage.vue

diff --git a/frontend/pages/EditPage.vue b/frontend/pages/EditPage.vue
new file mode 100644
index 0000000..47278f2
--- /dev/null
+++ b/frontend/pages/EditPage.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <h1>Admin page</h1>
+
+    <h2 contenteditable @input="updateTitle">{{ localTitle }}</h2> 
+    <div class="container">
+      <textarea v-model="localMarkdown"></textarea>
+
+      <div class="markdown-body" v-html="html"></div>
+    </div>
+
+    <button @click="updatePost">Update post</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: this.$route.params.id || 2,
+      localMarkdown: undefined,
+      html: undefined,
+      post: undefined
+    }
+  },
+  created() {
+    this.fetchPost();
+    this.getPostHTML();
+  },
+  watch: {
+    localMarkdown(newValue, oldValue) {
+      return
+      if (newValue) {
+        this.getPostHTML()
+          .then(html => this.html = html)
+      }
+    }
+  },
+  methods: {
+    updateTitle(event) {
+      this.localTitle = event.target.innerText;
+      console.log(this.localTitle)
+    },
+    fetchPost() {
+      const url = `/api/post/${this.id}`
+
+      return fetch(url)
+        .then(resp => resp.json())
+        .then(response => {
+          this.post = response.post;
+          this.localTitle = response.post.title;
+          this.localMarkdown = response.post.markdown;
+        })
+    },
+    updatePost() {
+      const url = `/api/post/${this.id}`;
+      const options = {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title: this.localTitle,
+          markdown: this.localMarkdown
+        })
+      };
+
+      return fetch(url, options)
+        .then(resp => resp.json())
+        .then(console.log)
+        .then(_ => this.getPostHTML())
+    },
+    getPostHTML() {
+      const url = `/api/post/${this.id}/render`;
+
+      return fetch(url)
+        .then(resp => resp.json())
+        .then(response => this.html = response.markdown)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+  font-size: 3rem;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+.container {
+  width: 90vw;
+  margin: 0 auto;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+textarea, .markdown-body {
+  width: 48%;
+  min-height: 70vh;
+}
+</style>
diff --git a/frontend/routes.js b/frontend/routes.js
index 40e44e2..f87a5c9 100644
--- a/frontend/routes.js
+++ b/frontend/routes.js
@@ -1,5 +1,6 @@
 import LandingPage from '@/pages/LandingPage';
 import PostPage from '@/pages/PostPage';
+import EditPage from '@/pages/EditPage';
 
 const routes = [
   {
@@ -9,6 +10,10 @@ const routes = [
   {
     path: "/post/:id",
     component: PostPage
+  },
+  {
+    path: "/edit/:id",
+    component: EditPage
   }
 ]
 
diff --git a/frontend/utils.js b/frontend/utils.js
index f18ed42..d33d990 100644
--- a/frontend/utils.js
+++ b/frontend/utils.js
@@ -1,5 +1,6 @@
 
 const humanReadableDate = (date) => {
+  date = new Date(date)
   const day = date.getDate();
   const month = date.toLocaleString('default', { month: 'long' });
   const year = date.getFullYear();