Refactor: Split components

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">
+            <TagsGroup :tags="tags" />
-                <v-chip v-for="tag in tags" :key="tag" active color="secondary">
+            <v-spacer />
-                    {{ tag }}
+            <v-btn text color="accent" @click="$router.push(`/notes/${uuid}`)"
-                </v-chip>
+                >View</v-btn
-            </div>
+            >
         </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>

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>

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>

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,
     }),