Remove DOCUMENTS_LOADED event

Author: davidmyersdev

pages/notepad.vue

@@ -1,26 +1,21 @@
-<template>
-  <EditorPage v-if="daily" :docId="daily.id" />
-</template>
-
 <script>
 import moment from 'moment'
-import EditorPage from '#root/pages/docs/[docId]/index.vue'
-import Doc from '#root/src/models/doc'
-import { DOCUMENTS_LOADED, EDIT_DOCUMENT } from '#root/src/store/actions'
+import { computed, onMounted, watch } from 'vue'
+import EditorPage from '/pages/docs/[docId]/index.vue'
+import Doc from '/src/models/doc'
+import { EDIT_DOCUMENT } from '/src/store/actions'
 
 export default {
   components: {
     EditorPage,
   },
-  computed: {
-    daily() {
-      return this.$store.getters.daily
-    },
-  },
-  methods: {
-    async buildTemplate() {
+  setup() {
+    const { store } = useVuex()
+    const daily = computed(() => store.getters.daily)
+
+    const buildTemplate = async () => {
       try {
-        const quotes = (await import('#root/src/data/quotes.json')).default
+        const quotes = (await import('/src/data/quotes.json')).default
         const quote = quotes[Math.floor(Math.random() * quotes.length)]
 
         return `#daily\n\n# ${moment().format('dddd, MMMM Do, YYYY')}\n\n> ${quote.text}\n> ${quote.author || 'Unknown'}\n\n`
@@ -29,37 +24,46 @@ export default {
 
         return `#daily\n\n# ${moment().format('dddd, MMMM Do, YYYY')}\n\n`
       }
-    },
-    async checkDaily() {
+    }
+
+    const checkDaily = async () => {
       let cutoff = moment().startOf('day').add(3, 'hours')
 
       if (moment() < cutoff) {
         cutoff = cutoff.subtract(1, 'day')
       }
 
-      if (!this.daily || this.daily.createdAt < cutoff) {
-        const template = await this.buildTemplate()
+      if (!daily.value || daily.value.createdAt < cutoff) {
+        const template = await buildTemplate()
         const doc = new Doc({ text: template, daily: true })
 
-        this.$store.commit(EDIT_DOCUMENT, doc)
+        store.commit(EDIT_DOCUMENT, doc)
       }
-    },
-  },
-  beforeMount() {
-    if (this.$store.state.documents.loaded) {
-      this.checkDaily()
-    } else {
-      this.$store.subscribe(({ type }, _state) => {
-        if (type === DOCUMENTS_LOADED) {
-          this.checkDaily()
-        }
-      })
     }
-  },
-  setup() {
+
     useHead({
       title: 'Notepad',
     })
+
+    onMounted(() => {
+      if (store.state.documents.loaded) {
+        checkDaily()
+      }
+    })
+
+    watch(() => store.state.documents.loaded, (loaded) => {
+      if (loaded) {
+        checkDaily()
+      }
+    })
+
+    return {
+      daily,
+    }
   },
 }
 </script>
+
+<template>
+  <EditorPage v-if="daily" :doc-id="daily.id" />
+</template>

src/store/actions.js

@@ -4,7 +4,6 @@ export const BLUR_EDITOR = 'BLUR_EDITOR'
 export const DEACTIVATE_CONTEXT = 'DEACTIVATE_CONTEXT'
 export const DISCARD_DOCUMENT = 'DISCARD_DOCUMENT'
 export const DUPLICATE_DOCUMENT = 'DUPLICATE_DOCUMENT'
-export const DOCUMENTS_LOADED = 'DOCUMENTS_LOADED'
 export const EDIT_DOCUMENT = 'EDIT_DOCUMENT'
 export const FOCUS_EDITOR = 'FOCUS_EDITOR'
 export const LOAD_DOCUMENT = 'LOAD_DOCUMENT'
@@ -32,7 +31,6 @@ export default {
   DEACTIVATE_CONTEXT,
   DISCARD_DOCUMENT,
   DUPLICATE_DOCUMENT,
-  DOCUMENTS_LOADED,
   EDIT_DOCUMENT,
   FOCUS_EDITOR,
   LOAD_DOCUMENT,

src/store/modules/documents.js

@@ -3,7 +3,6 @@ import { useRecentDocs } from '#root/src/stores/useRecentDocs'
 
 import {
   DISCARD_DOCUMENT,
-  DOCUMENTS_LOADED,
   DUPLICATE_DOCUMENT,
   EDIT_DOCUMENT,
   LOAD_DOCUMENT,
@@ -67,9 +66,6 @@ export default {
     [DISCARD_DOCUMENT](state, { id }) {
       findDoc(state, id).discard()
     },
-    [DOCUMENTS_LOADED](state) {
-      state.loaded = true
-    },
     [EDIT_DOCUMENT](state, doc) {
       const found = findDoc(state, doc.id)
 
@@ -111,9 +107,6 @@ export default {
     async [DISCARD_DOCUMENT](context, doc) {
       context.commit(DISCARD_DOCUMENT, doc)
     },
-    async [DOCUMENTS_LOADED](context) {
-      context.commit(DOCUMENTS_LOADED)
-    },
     async [DUPLICATE_DOCUMENT](context, { id }) {
       const newDoc = findDoc(context.state, id).duplicate()
 
@@ -128,9 +121,11 @@ export default {
       context.commit(LOAD_DOCUMENT, doc)
     },
     async [LOAD_DOCUMENTS](context, docs) {
-      return Promise.all(
+      await Promise.all(
         docs.map(doc => context.dispatch(LOAD_DOCUMENT, doc)),
       )
+
+      context.state.loaded = true
     },
     async [MERGE_DOCUMENT](context, doc) {
       context.commit(MERGE_DOCUMENT, doc)

src/store/plugins/caching/documents.ts

@@ -5,7 +5,6 @@ import { type Doc, pack, unpack } from '/src/models/doc'
 import {
   ADD_DOCUMENT,
   DISCARD_DOCUMENT,
-  DOCUMENTS_LOADED,
   EDIT_DOCUMENT,
   LOAD_DOCUMENTS,
   MERGE_DOCUMENT,
@@ -63,7 +62,6 @@ export const loadDocs = async (store: Store<any>) => {
   )
 
   await store.dispatch(LOAD_DOCUMENTS, docs)
-  await store.dispatch(DOCUMENTS_LOADED)
 }
 
 export default docsPlugin

src/store/plugins/packages.js

@@ -3,9 +3,7 @@ import PackageManager from '#root/src/packages/manager'
 import {
   ADD_DOCUMENT,
   DISCARD_DOCUMENT,
-  DOCUMENTS_LOADED,
   EDIT_DOCUMENT,
-  LOAD_DOCUMENTS,
   RESTORE_DOCUMENT,
   TOUCH_DOCUMENT,
 } from '#root/src/store/actions'
@@ -18,7 +16,6 @@ export default (store) => {
       case EDIT_DOCUMENT:
       case RESTORE_DOCUMENT:
       case TOUCH_DOCUMENT:
-      case DOCUMENTS_LOADED:
         // find the affected document when possible
         const doc = state.documents.all.find(d => d.id === id)
 
@@ -29,5 +26,5 @@ export default (store) => {
       default:
         break
     }
-  });
-};
+  })
+}