move api calls to service

src/api/ApiService.js

@@ -22,4 +22,8 @@ export default class ApiService {
   loadSupportedFileExtensions () {
     return axios.get(this.apiUrl + 'api/extension')
   }
+
+  triggerBulkDownload (body) {
+    return axios.post(this.apiUrl + 'api/download/bulk', body)
+  }
 }

src/pages/Download.vue

@@ -164,13 +164,18 @@ export default {
   },
   data: function () {
     return {
-      apiUrl: process.env.API_URL ? process.env.API_URL : 'http://localhost:5000/',
-      bulkZipLink: '',
-      zipCreating: false,
       deactivatedMap: {},
       activeMetadataModal: ''
     }
   },
+  computed: {
+    bulkZipLink () {
+      return this.$store.getters['Download/getBulkZipLink']
+    },
+    zipCreating () {
+      return this.$store.getters['Download/getZipCreating']
+    }
+  },
   mounted () {
     if (!this.cleanedFiles) {
       this.$router.push('/')
@@ -185,7 +190,7 @@ export default {
     getIcon: function (mime) {
       return getIconByMime(mime)
     },
-    triggerBulkDownload () {
+    async triggerBulkDownload () {
       // needs at least 4 files to be downloadable as zip
       if (this.cleanedFiles?.successful?.length > 4) {
         this.bulkZipLink = ''
@@ -200,22 +205,19 @@ export default {
             secret: data.secret
           })
         }
-        this.zipCreating = true
-        this.$axios.post(this.apiUrl + 'api/download/bulk', body)
-          .then((response) => {
-            this.bulkZipLink = response.data.download_link
-          })
-          .catch(() => {
-            this.$q.notify({
-              color: 'negative',
-              position: 'top',
-              message: this.$t('error_bulk_download_creation'),
-              icon: 'report_problem'
-            })
-            this.$router.push('/error')
-          }).finally(() => {
-            this.zipCreating = false
+        try {
+          await this.$store.dispatch('Upload/bulkDownload', body)
+        } catch (e) {
+          // @todo remove
+          console.error(e)
+          this.$q.notify({
+            color: 'negative',
+            position: 'top',
+            message: this.$t('error_bulk_download_creation'),
+            icon: 'report_problem'
           })
+          this.$router.push('/error')
+        }
       }
     }
   }

src/pages/Upload.vue

@@ -77,6 +77,7 @@ export default {
       await this.$store.dispatch('Upload/fetchSupportedExtensions')
       this.startUppy()
     } catch (e) {
+      // @todo remove
       console.log(e)
       this.$q.notify({
         color: 'negative',

src/store/download/actions.js

-/*
-export function someAction (context) {
+export async function triggerBulkDownload (context, body) {
+  context.commit('Download/setZipCreating', true)
+  const response = await context.rootGetters.apiService.triggerBulkDownload(body)
+  context.commit('Download/setBulkZipLink', response.data.download_link)
+  context.commit('Download/setZipCreating', false)
 }
-*/

src/store/download/getters.js

-/*
-export function someGetter (state) {
+export function getBulkZipLink (state) {
+  return state.bulkZipLink
+}
+
+export function getZipCreating (state) {
+  return state.zipCreating
 }
-*/

src/store/download/mutations.js

-/*
-export function someMutation (state) {
+export function setZipCreating (state, isCreating) {
+  state.zipCreating = isCreating
+}
+export function setBulkZipLink (state, link) {
+  state.bulkZipLink = link
 }
-*/

src/store/download/state.js

 export default function () {
   return {
-    //
+    bulkZipLink: '',
+    zipCreating: false
   }
 }