From bcc6f8e29f850884402818385544b7e9cf214035 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sat, 4 Jul 2020 18:43:09 +0200
Subject: [PATCH] Display notes

---
 frontend/layouts/empty.vue                    | 12 +----
 frontend/pages/index.vue                      | 32 ++++++++----
 frontend/pages/notes/_uuid.vue                | 51 +++++++++++++++++++
 frontend/pages/{notes.vue => notes/index.vue} |  4 +-
 frontend/store/notes.js                       |  5 +-
 5 files changed, 78 insertions(+), 26 deletions(-)
 create mode 100644 frontend/pages/notes/_uuid.vue
 rename frontend/pages/{notes.vue => notes/index.vue} (89%)

diff --git a/frontend/layouts/empty.vue b/frontend/layouts/empty.vue
index 1110f94..ca9c2ba 100644
--- a/frontend/layouts/empty.vue
+++ b/frontend/layouts/empty.vue
@@ -1,13 +1,3 @@
 <template>
-    <v-app>
-        <v-main>
-            <nuxt />
-        </v-main>
-    </v-app>
+    <nuxt />
 </template>
-
-<style>
-html {
-    overflow-y: auto;
-}
-</style>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 1b35efd..b34f550 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -2,18 +2,20 @@
     <div>
         <nav>
             <ul>
-                <li class="text-blue-200">
-                    <router-link class="underline" to="/signin"
-                        >Sign In</router-link
+                <li
+                    v-for="link in links"
+                    :key="link.name"
+                    class="text-blue-200"
+                >
+                    <router-link
+                        v-if="link.url"
+                        :to="link.url"
+                        class="underline"
+                        >{{ link.name }}</router-link
                     >
-                </li>
-                <li class="text-blue-200">
-                    <router-link class="underline" to="/register"
-                        >Register</router-link
-                    >
-                </li>
-                <li class="text-blue-200">
-                    <button class="underline" @click="logout">Sign Out</button>
+                    <button v-else class="underline" @click="link.action">
+                        {{ link.name }}
+                    </button>
                 </li>
             </ul>
         </nav>
@@ -28,6 +30,14 @@
 <script>
 export default {
     name: 'Home',
+    data: () => ({
+        links: [
+            { url: '/signin', name: 'Sign In' },
+            { url: '/register', name: 'Register' },
+            { url: '/notes', name: 'Notes' },
+            { action: 'logout', name: 'Sign Out' },
+        ],
+    }),
     options: {
         auth: false, // FIXME: auth: 'guest'
     },
diff --git a/frontend/pages/notes/_uuid.vue b/frontend/pages/notes/_uuid.vue
new file mode 100644
index 0000000..0538e0f
--- /dev/null
+++ b/frontend/pages/notes/_uuid.vue
@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <div>{{ uuid }}</div>
+        <div v-if="note">{{ note }}</div>
+        <!-- html is sanitized -->
+        <!-- eslint-disable-next-line -->
+        <div class="container mx-auto" id="note" v-html="html"></div>
+    </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import renderMarkdown from '@/utils/markdown'
+
+export default {
+    name: 'Note',
+    data: () => ({
+        note: {},
+        html: '',
+    }),
+    computed: {
+        ...mapState('notes', ['notes', 'isInitialized']),
+        uuid() {
+            return this.$route.params.uuid
+        },
+    },
+    mounted() {
+        if (!this.isInitialized) {
+            this.load().then(() => {
+                this.note = this.notes.find((e) => e.uuid === this.uuid)
+                this.render()
+            })
+        } else {
+            this.note = this.notes.find((e) => e.uuid === this.uuid)
+            this.render()
+        }
+    },
+    methods: {
+        ...mapActions('notes', ['load']),
+        render() {
+            this.html = renderMarkdown(this.note.content).contents
+        },
+    },
+}
+</script>
+
+<style>
+#note h1 {
+    @apply text-5xl font-bold;
+}
+</style>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes/index.vue
similarity index 89%
rename from frontend/pages/notes.vue
rename to frontend/pages/notes/index.vue
index 2223571..055ae13 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes/index.vue
@@ -10,7 +10,9 @@
         />
         <div v-for="note in notes" :key="note.uuid">
             <div class="flex justify-between items-center">
-                <h2 class="text-lg">{{ note.title }}</h2>
+                <router-link :to="'/notes/' + note.uuid" class="text-lg">{{
+                    note.title
+                }}</router-link>
                 <div class="py-2">
                     <span
                         v-for="(tag, index) in note.tags"
diff --git a/frontend/store/notes.js b/frontend/store/notes.js
index 69cffbc..5869b01 100644
--- a/frontend/store/notes.js
+++ b/frontend/store/notes.js
@@ -24,9 +24,8 @@ export const mutations = {
 }
 
 export const actions = {
-    async load({ commit }) {
-        await new Promise((resolve) => setTimeout(resolve, 600))
-        this.$axios.get('/notes').then(({ data }) => {
+    load({ commit }) {
+        return this.$axios.get('/notes').then(({ data }) => {
             commit('set', data)
             commit('setInitialized')
         })