feat(save): load and save project in dropbox

src/components/editor/aside/integrations/AsideDropboxLoad.vue

@@ -25,13 +25,37 @@
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
+  import {
+    Dropbox as DBX,
+    DropboxResponse,
+    DropboxResponseError,
+  } from 'dropbox'
+  import { useStore } from 'vuex'
+  import { useDropbox } from '@/use/storage/dropbox'
 
   const { t } = useI18n()
+  const store = useStore()
 
   const onClick = () => {
     const options = {
       success: function (files: Array<any>) {
-        alert("Here's the file link: " + files[0].link)
+        const file = files[0]
+
+        const dbx = new DBX({
+          accessToken:
+            'HSbp42Qs_CUAAAAAAAAAAaOLw44wXM3F7UAw0FneGyLahq_yS5jHFYFUIsCKxygY',
+        })
+
+        dbx
+          .filesDownload({ path: file.id })
+          .then(async (data: DropboxResponse<any>) => {
+            const context = JSON.parse(await data.result.fileBlob.text())
+
+            useDropbox(store).onLoadProject(context)
+          })
+          .catch((err: DropboxResponseError<any>) => {
+            console.error(err)
+          })
       },
 
       cancel: function () {},

src/components/editor/aside/integrations/AsideDropboxSave.vue

@@ -27,6 +27,7 @@
 <script setup lang="ts">
   import { useStore } from 'vuex'
   import { useI18n } from 'vue-i18n'
+  import { Dropbox } from 'dropbox'
 
   const store = useStore()
   const { t } = useI18n()
@@ -43,23 +44,29 @@
       },
     }
 
-    const blob = new Blob([JSON.stringify(obj)], { type: 'application/json' })
+    const dbx = new Dropbox({
+      accessToken:
+        'HSbp42Qs_CUAAAAAAAAAAaOLw44wXM3F7UAw0FneGyLahq_yS5jHFYFUIsCKxygY',
+    })
 
-    const options = {
-      success: function () {},
-      progress: function (progress: any) {
-        console.log(progress)
-      },
-      cancel: function () {},
-      error: function (errorMessage: any) {
-        console.log(errorMessage)
-      },
-    }
+    dbx
+      .filesUpload({
+        path: `/${store.state.project.name}.bw`,
+        contents: JSON.stringify(obj),
+      })
+      .catch((res: any) => {
+        console.error(res)
+      })
+      .then((res: any) => {
+        // console.log(res)
+      })
 
+    /*
     Dropbox.save(
       window.URL.createObjectURL(blob),
       `${store.state.project.name}.bw`,
       options
     )
+    */
   }
 </script>

src/store/module/project.ts

@@ -21,7 +21,7 @@ export default {
   mutations: {
     load(state: ProjectState, payload: ProjectState) {
       state.name = payload.name
-      state.nameRaw = payload.name
+      state.nameRaw = payload.nameRaw
       state.version = payload.version
       state.creator = payload.creator
       state.subject = payload.subject

src/use/storage/dropbox.ts

@@ -0,0 +1,20 @@
+import { Store } from 'vuex'
+import { nextTick } from 'vue'
+import { ProjectState } from '../../types/project'
+
+export const useDropbox = (store: Store<any>) => {
+  const onLoadProject = async (context: any) => {
+    if (!context) return
+
+    store.commit('project/load', context.project)
+    await nextTick
+
+    store.commit('context/load', store.state.project.pages[0])
+    await nextTick
+
+    store.commit('logger/load', context.logger.content)
+    store.commit('pdf/load', context.pdf)
+  }
+
+  return { onLoadProject }
+}