Add notes store

frontend/pages/notes.vue

@@ -6,7 +6,6 @@
             :loading="loading"
             loading-text="Loading notes..."
             class="elevation-1"
-            disable-sort
             :footer-props="{
                 showFirstLastPage: false,
                 prevIcon: mdiChevronLeft,
@@ -19,7 +18,7 @@
                         Notes
                     </h2>
                     <v-spacer></v-spacer>
-                    <v-btn to="/create" outlined dark>
+                    <v-btn outlined dark @click="test">
                         New Note
                     </v-btn>
                 </v-toolbar>
@@ -65,7 +64,7 @@
                     small
                     color="secondary"
                     dark
-                    @click="deleteItem(item)"
+                    @click="deleteNote(item)"
                 >
                     {{ mdiDelete }}
                 </v-icon>
@@ -79,6 +78,7 @@
 
 <script>
 import { format } from 'timeago.js'
+import { mapState, mapActions } from 'vuex'
 import {
     mdiEye,
     mdiPencil,
@@ -89,10 +89,6 @@ import {
 
 export default {
     name: 'Notes',
-    async asyncData(context) {
-        const notes = await context.$axios.$get('/notes')
-        return { notes, loading: false }
-    },
     data: () => ({
         mdiEye,
         mdiPencil,
@@ -107,21 +103,24 @@ export default {
             { text: 'Actions', value: 'actions' },
         ],
     }),
+    computed: {
+        ...mapState('notes', { notes: (state) => state.notes }),
+    },
+    mounted() {
+        this.$store.dispatch('notes/load').then(() => (this.loading = false))
+    },
     methods: {
-        async loadNotes() {
+        ...mapActions({
-            await this.$axios.$get('/notes').then((notes) => {
+            deleteNote: 'notes/delete',
-                this.notes = notes
+            createNote: 'notes/create',
-                this.loading = false
+        }),
-            })
-        },
         editItem(item) {},
-        async deleteItem(item) {
+        test() {
-            try {
+            this.createNote({
-                await this.$axios.delete(`/notes/${item.uuid}`)
+                title: 'title',
-            } catch (_) {
+                tags: [],
-            } finally {
+                chapters: [],
-                await this.loadNotes()
+            })
-            }
         },
         format,
     },

frontend/store/notes.js

@@ -0,0 +1,40 @@
+export const state = () => ({
+    notes: [],
+})
+
+export const mutations = {
+    set(state, notes) {
+        state.notes = notes
+    },
+    add(state, note) {
+        state.notes.push(note)
+    },
+    delete(state, uuid) {
+        state.notes = state.notes.filter((e) => e.uuid !== uuid)
+    },
+}
+
+export const actions = {
+    async load({ commit }) {
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+
+        this.$axios.get('/notes').then(({ data }) => commit('set', data))
+    },
+    // 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,
+            })
+        )
+    },
+    delete({ commit }, note) {
+        const result = this.$axios.delete(`/notes/${note.uuid}`)
+        commit('delete', note.uuid)
+        result.catch(() => commit('add', note))
+    },
+}
+
+export const getters = {}