Update..

api/src/validation/NoteValidation.kt

@@ -0,0 +1,16 @@
+package be.vandewalleh.validation
+
+import am.ik.yavi.builder.ValidatorBuilder
+import am.ik.yavi.builder.konstraint
+import am.ik.yavi.core.Validator
+import be.vandewalleh.entities.Note
+import be.vandewalleh.entities.User
+
+val noteValidator: Validator<Note> = ValidatorBuilder.of<Note>()
+    .konstraint(Note::title) {
+        notNull().notBlank().lessThanOrEqual(50)
+    }
+    .konstraint(Note::tags) {
+        this.lessThanOrEqual(10)
+    }
+    .build()

frontend/components/TagsGroup.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="tags">
-        <v-chip v-for="tag in tags" :key="tag" active color="secondary">
+        <v-chip
+            v-for="(tag, index) in tags"
+            :key="index"
+            active
+            color="secondary"
+        >
             {{ tag }}
         </v-chip>
     </div>

frontend/nuxt.config.js

@@ -72,19 +72,7 @@ export default {
      ** Axios module configuration
      ** See https://axios.nuxtjs.org/options
      */
-    axios: {
+    axios: {},
-        headers: {
-            common: {
-                Accept: 'application/json',
-            },
-            delete: {},
-            get: {},
-            head: {},
-            post: {},
-            put: {},
-            patch: {},
-        },
-    },
 
     env: {
         API_HOST: env.API_HOST,

frontend/pages/create.vue

@@ -21,6 +21,8 @@
                         auto-grow
                     ></v-textarea>
                     <client-only v-else>
+                        <!-- html is sanitized -->
+                        <!-- eslint-disable-next-line -->
                         <div class="html" v-html="html" />
                     </client-only>
                 </v-card-text>
@@ -51,12 +53,7 @@ export default {
         },
     },
     mounted() {
-        this.$axios
+        this.$axios.get('/tags').then((e) => (this.possibleTags = e.data))
-            .get('/tags')
-            .then((e) => (this.possibleTags = e.data))
-            .catch((e) => {
-                console.log(e)
-            })
     },
     methods: {
         createNote() {
@@ -71,8 +68,6 @@ export default {
                 .catch((e) => {
                     if (e.response && e.response.status === 409) {
                         this.conflict = true
-                    } else {
-                        console.log('??')
                     }
                 })
         },

frontend/pages/notes/_uuid.vue

@@ -6,6 +6,8 @@
             <TagsGroup :tags="note.tags" />
         </v-card-title>
         <v-card-text>
+            <!-- html is sanitized -->
+            <!-- eslint-disable-next-line -->
             <div v-html="renderedMarkdown"></div>
         </v-card-text>
     </v-card>
@@ -23,8 +25,9 @@ export default {
     }),
     computed: {
         renderedMarkdown() {
-            if (!this.note.chapters) return ''
+            return !this.note.content
-            return renderMarkdown(this.note.chapters[0].content).contents
+                ? ''
+                : renderMarkdown(this.note.content).contents
         },
     },
     mounted() {

frontend/pages/notes/index.vue

@@ -1,13 +1,16 @@
 <template>
     <div>
         <v-progress-circular
-            v-if="loading && notes.length === 0"
+            v-if="!isInitialized"
             :size="100"
             :width="7"
             color="purple"
             indeterminate
         ></v-progress-circular>
-        <v-row>
+        <v-card v-if="isEmpty">
+            <v-card-text>No notes yet :/</v-card-text>
+        </v-card>
+        <v-row v-else>
             <v-col
                 v-for="note in notes"
                 :key="note.uuid"
@@ -28,7 +31,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters, mapActions } from 'vuex'
 
 export default {
     name: 'Notes',
@@ -36,10 +39,14 @@ export default {
         loading: true,
     }),
     computed: {
-        ...mapState('notes', { notes: (state) => state.notes }),
+        ...mapState('notes', ['notes', 'isInitialized']),
+        ...mapGetters('notes', ['isEmpty']),
     },
     mounted() {
-        this.$store.dispatch('notes/load').then(() => (this.loading = false))
+        if (!this.initialized) this.load()
+    },
+    methods: {
+        ...mapActions('notes', ['load']),
     },
     head: () => ({
         title: 'My notes',

frontend/store/notes.js

@@ -1,8 +1,12 @@
 export const state = () => ({
     notes: [],
+    isInitialized: false,
 })
 
 export const mutations = {
+    setInitialized(state) {
+        state.isInitialized = true
+    },
     set(state, notes) {
         state.notes = notes
     },
@@ -15,21 +19,25 @@ export const mutations = {
     // used when logging out
     clear(state) {
         state.notes = []
+        state.initialized = false
     },
 }
 
 export const actions = {
     async load({ commit }) {
         await new Promise((resolve) => setTimeout(resolve, 600))
-        this.$axios.get('/notes').then(({ data }) => commit('set', data))
+        this.$axios.get('/notes').then(({ data }) => {
+            commit('set', data)
+            commit('setInitialized')
+        })
     },
-    // FIXME: make the api send the new date back
     create({ commit }, note) {
         this.$axios.post('/notes', note).then(({ data }) =>
             commit('add', {
-                updatedAt: new Date().toISOString(),
                 uuid: data.uuid,
-                ...note,
+                title: data.title,
+                updatedAt: data.updatedAt,
+                tags: data.tags,
             })
         )
     },
@@ -40,4 +48,8 @@ export const actions = {
     },
 }
 
-export const getters = {}
+export const getters = {
+    isEmpty(state) {
+        return state.isInitialized && state.notes.length === 0
+    },
+}