feat(ipfs): show "File not found" snackbar when failed to download th…

…e file
Adamant-im · Jan 11, 2025 · 488094d · 488094d
1 parent 58ca8a1
commit 488094d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 14 deletions.
diff --git a/src/components/AChat/AChatAttachment/AChatImageModal.vue b/src/components/AChat/AChatAttachment/AChatImageModal.vue
@@ -6,7 +6,12 @@
 
         <div :class="classes.imageCounter">{{ slide + 1 }} of {{ files.length }}</div>
 
-        <v-btn icon="mdi-arrow-collapse-down" :class="classes.saveButton" @click="downloadFile" />
+        <v-btn
+          icon="mdi-arrow-collapse-down"
+          :class="classes.saveButton"
+          @click="downloadFile"
+          :loading="downloading"
+        />
       </v-toolbar>
 
       <v-carousel
@@ -20,7 +25,17 @@
       >
         <template v-for="(file, i) in files" :key="i">
           <AChatImageModalItem v-if="isTypeImage(file)" :transaction="transaction" :file="file" />
-          <AChatModalFile v-else :file="file" @download="downloadFile" />
+          <AChatModalFile v-else :file="file">
+            <v-btn
+              class="mt-3"
+              color="primary"
+              variant="flat"
+              @click="downloadFile"
+              :loading="downloading"
+            >
+              Download
+            </v-btn>
+          </AChatModalFile>
         </template>
 
         <template #prev>
@@ -40,6 +55,7 @@
 
 <script lang="ts">
 import { ref, computed, onMounted, PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
@@ -48,6 +64,10 @@ import AChatModalFile from './AChatModalFile.vue'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { FileAsset } from '@/lib/adamant-api/asset'
 
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
 function downloadFileByUrl(url: string, filename = 'unnamed') {
   const anchor = document.createElement('a')
   anchor.href = url
@@ -101,6 +121,7 @@ export default {
   emits: ['close', 'update:modal'],
   setup(props, { emit }) {
     const store = useStore()
+    const { t } = useI18n()
     const slide = ref(0)
 
     const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -158,6 +179,8 @@ export default {
         ? props.transaction.recipientPublicKey
         : props.transaction.senderPublicKey
     )
+
+    const downloading = ref(false)
     const downloadFile = async () => {
       const file = props.files[slide.value]
       if (!file) {
@@ -167,15 +190,24 @@ export default {
         return
       }
 
-      const { id, nonce } = file
-      const imageUrl = await store.dispatch('attachment/getAttachmentUrl', {
-        cid: id,
-        publicKey: publicKey.value,
-        nonce
-      })
-      const fileName = file.name ? `${file.name}.${file.extension}` : undefined
+      try {
+        downloading.value = true
+        const imageUrl = await store.dispatch('attachment/getAttachmentUrl', {
+          cid: file.id,
+          publicKey: publicKey.value,
+          nonce: file.nonce
+        })
 
-      downloadFileByUrl(imageUrl, fileName)
+        const fileName = file.name ? `${file.name}.${file.extension}` : undefined
+        downloadFileByUrl(imageUrl, fileName)
+      } catch {
+        void store.dispatch('snackbar/show', {
+          message: t('chats.file_not_found')
+        })
+      } finally {
+        await delay(200) // show loading spinner at least 200ms for smoother UI
+        downloading.value = false
+      }
     }
 
     const isTypeImage = (file: FileAsset) => {
@@ -192,6 +224,7 @@ export default {
       handleKeydown,
       handleClick,
       downloadFile,
+      downloading,
       isTypeImage,
       classes
     }

diff --git a/src/components/AChat/AChatAttachment/AChatModalFile.vue b/src/components/AChat/AChatAttachment/AChatModalFile.vue
@@ -8,9 +8,7 @@
           <div :class="classes.fileName">{{ fileName }}</div>
           <div :class="classes.fileSize">{{ formatBytes(fileSize) }}</div>
 
-          <v-btn class="mt-3" color="primary" variant="flat" @click="$emit('download')">
-            Download
-          </v-btn>
+          <slot />
         </div>
       </div>
     </v-card>
@@ -41,7 +39,6 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['download'],
   setup(props) {
     const fileExtension = computed(() => props.file.extension)
 

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -22,6 +22,7 @@
     "files": "file(s)",
     "file_loading_error": "Failed to load the file",
     "image_loading_error": "Failed to load the image",
+    "file_not_found": "File not found",
     "me": "Me",
     "message": "Type a message",
     "message_rejected": "Message rejected",

diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -22,6 +22,7 @@
     "files": "файл(ов)",
     "file_loading_error": "Не удалось загрузить файл",
     "image_loading_error": "Не удалось загрузить изображение",
+    "file_not_found": "Файл не найден",
     "me": "Я",
     "message": "Введите сообщение",
     "message_rejected": "Сообщение отклонено",