small refactor

src/components/DbUpload.vue

@@ -23,7 +23,13 @@ export default {
   name: 'DbUpload',
   methods: {
     loadDb () {
-      this.$db.loadDb(this.$refs.file.files[0])
+      return this.$db.loadDb(this.$refs.file.files[0])
+        .then((schema) => {
+          this.$store.commit('saveSchema', schema)
+          if (this.$route.path !== '/editor') {
+            this.$router.push('/editor')
+          }
+        })
     },
     dragover (event) {
       event.preventDefault()
@@ -42,9 +48,11 @@ export default {
       event.preventDefault()
       this.$refs.file.files = event.dataTransfer.files
       this.loadDb()
-      // Clean up
-      event.currentTarget.classList.add('bg-gray-100')
-      event.currentTarget.classList.remove('bg-green-300')
+        .then(() => {
+          // Clean up
+          event.currentTarget.classList.add('bg-gray-100')
+          event.currentTarget.classList.remove('bg-green-300')
+        })
     }
   }
 }

src/components/Schema.vue

@@ -76,6 +76,9 @@ export default {
   methods: {
     changeDb () {
       this.$db.loadDb(this.$refs.dbfile.files[0])
+        .then((schema) => {
+          this.$store.commit('saveSchema', schema)
+        })
     }
   }
 }

src/dataBase.js

@@ -1,35 +1,36 @@
 import store from '@/store'
-import router from '@/router'
 const worker = new Worker('js/worker.sql-wasm.js')
 
 export default {
   loadDb (file) {
-    const dbName = file.name
-    store.commit('saveDbName', dbName)
-    const f = file
-    const r = new FileReader()
-    r.onload = () => {
-      worker.onmessage = () => {
-        const getSchemaSql = `
-          SELECT name, sql
-          FROM sqlite_master
-          WHERE type='table' AND name NOT LIKE 'sqlite_%';`
-        worker.onmessage = event => {
-          store.commit('saveSchema', event.data.results[0].values)
-          if (router.currentRoute.path !== '/editor') {
-            router.push('/editor')
+    return new Promise((resolve, reject) => {
+      const dbName = file.name
+      store.commit('saveDbName', dbName)
+      const f = file
+      const r = new FileReader()
+      r.onload = () => {
+        // on 'action: open' completed
+        worker.onmessage = () => {
+          const getSchemaSql = `
+            SELECT name, sql
+            FROM sqlite_master
+            WHERE type='table' AND name NOT LIKE 'sqlite_%';`
+
+          // on 'action: exec' completed
+          worker.onmessage = event => {
+            resolve(event.data.results[0].values)
           }
+          worker.postMessage({ action: 'exec', sql: getSchemaSql })
+        }
+
+        try {
+          worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
+        } catch (exception) {
+          worker.postMessage({ action: 'open', buffer: r.result })
         }
-        worker.postMessage({ action: 'exec', sql: getSchemaSql })
       }
-      store.commit('saveDbFile', r.result)
-      try {
-        worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
-      } catch (exception) {
-        worker.postMessage({ action: 'open', buffer: r.result })
-      }
-    }
-    r.readAsArrayBuffer(f)
+      r.readAsArrayBuffer(f)
+    })
   },
   execute (commands) {
     return new Promise((resolve, reject) => {