From 8a9e878d5f47dcb2c514cab73543159b02db6b96 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 14 Jun 2020 15:30:06 +0200
Subject: [PATCH] Refactor: Split components

---
 .../components/{Note.vue => NoteCard.vue}     | 32 ++++++---------
 frontend/components/TagsGroup.vue             | 27 +++++++++++++
 frontend/pages/notes/_uuid.vue                | 40 +++++++++++++++++++
 frontend/pages/{notes.vue => notes/index.vue} |  7 ++--
 4 files changed, 83 insertions(+), 23 deletions(-)
 rename frontend/components/{Note.vue => NoteCard.vue} (67%)
 create mode 100644 frontend/components/TagsGroup.vue
 create mode 100644 frontend/pages/notes/_uuid.vue
 rename frontend/pages/{notes.vue => notes/index.vue} (87%)

diff --git a/frontend/components/Note.vue b/frontend/components/NoteCard.vue
similarity index 67%
rename from frontend/components/Note.vue
rename to frontend/components/NoteCard.vue
index 60dc718..2958080 100644
--- a/frontend/components/Note.vue
+++ b/frontend/components/NoteCard.vue
@@ -5,21 +5,27 @@
         </v-card-title>
         <v-card-text> Last updated {{ prettyDate }} </v-card-text>
         <v-card-actions>
-            <div class="tags">
-                <v-chip v-for="tag in tags" :key="tag" active color="secondary">
-                    {{ tag }}
-                </v-chip>
-            </div>
+            <TagsGroup :tags="tags" />
+            <v-spacer />
+            <v-btn text color="accent" @click="$router.push(`/notes/${uuid}`)"
+                >View</v-btn
+            >
         </v-card-actions>
     </v-card>
 </template>
 
 <script>
 import { format } from 'timeago.js'
+import TagsGroup from '@/components/TagsGroup'
 
 export default {
-    name: 'Note',
+    name: 'NoteCard',
+    components: { TagsGroup },
     props: {
+        uuid: {
+            type: String,
+            required: true,
+        },
         title: {
             type: String,
             required: true,
@@ -40,17 +46,3 @@ export default {
     },
 }
 </script>
-
-<style>
-.tags {
-    padding: 16px;
-}
-
-.tags .v-chip {
-    margin: 4px 8px 4px 0;
-}
-
-.v-card.hover {
-    cursor: pointer;
-}
-</style>
diff --git a/frontend/components/TagsGroup.vue b/frontend/components/TagsGroup.vue
new file mode 100644
index 0000000..b9e8754
--- /dev/null
+++ b/frontend/components/TagsGroup.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="tags">
+        <v-chip v-for="tag in tags" :key="tag" active color="secondary">
+            {{ tag }}
+        </v-chip>
+    </div>
+</template>
+<script>
+export default {
+    name: 'TagsGroup',
+    props: {
+        tags: {
+            type: Array,
+            required: true,
+        },
+    },
+}
+</script>
+<style scoped>
+.tags {
+    padding: 16px;
+}
+
+.tags .v-chip {
+    margin: 4px 8px 4px 0;
+}
+</style>
diff --git a/frontend/pages/notes/_uuid.vue b/frontend/pages/notes/_uuid.vue
new file mode 100644
index 0000000..1c2e77a
--- /dev/null
+++ b/frontend/pages/notes/_uuid.vue
@@ -0,0 +1,40 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ note.title }}
+            <v-spacer />
+            <TagsGroup :tags="note.tags" />
+        </v-card-title>
+        <v-card-text>
+            <div v-html="renderedMarkdown"></div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+import TagsGroup from '@/components/TagsGroup'
+import renderMarkdown from '@/utils/markdown'
+
+export default {
+    name: 'Note',
+    components: {
+        TagsGroup,
+    },
+    data: () => ({
+        note: {
+            tags: [],
+        },
+    }),
+    computed: {
+        renderedMarkdown() {
+            if (!this.note.chapters) return ''
+            return renderMarkdown(this.note.chapters[0].content).contents
+        },
+    },
+    mounted() {
+        this.$axios
+            .$get(`/notes/${this.$route.params.uuid}`)
+            .then((note) => (this.note = note))
+    },
+}
+</script>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes/index.vue
similarity index 87%
rename from frontend/pages/notes.vue
rename to frontend/pages/notes/index.vue
index 337f8a1..4e08670 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes/index.vue
@@ -16,7 +16,8 @@
                 lg="4"
                 xl="3"
             >
-                <Note
+                <NoteCard
+                    :uuid="note.uuid"
                     :title="note.title"
                     :updated-at="note.updatedAt"
                     :tags="note.tags"
@@ -28,11 +29,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import Note from '@/components/Note.vue'
+import NoteCard from '@/components/NoteCard.vue'
 
 export default {
     name: 'Notes',
-    components: { Note },
+    components: { NoteCard },
     data: () => ({
         loading: true,
     }),