Added download error handling

tzoug · Sep 1, 2023 · c785834 · c785834
1 parent bc75dc2
commit c785834
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 46 deletions.
diff --git a/thingizip/src/components/download.svelte b/thingizip/src/components/download.svelte
@@ -2,7 +2,10 @@
   import { downloadFiles, downloadAll } from '../utils/download';
 
   let isDownloadingFiles = false;
+  let isFileDownloadError = false;
+  
   let isDownloadingAll = false;
+  let isDownloadAllError = false;
 
   async function downloadAllFiles() {
     isDownloadingFiles = true;
@@ -15,6 +18,11 @@
       })
       .catch(() => {
         isDownloadingFiles = false;
+
+        isFileDownloadError = true;
+        setTimeout(function(){
+          isFileDownloadError = false;
+        }, 2500);
       });
   }
 
@@ -29,11 +37,16 @@
       })
       .catch(() => {
         isDownloadingAll = false;
+
+        isDownloadAllError = true;
+        setTimeout(function(){
+          isDownloadAllError = false;
+        }, 2500);
       });
   }
 </script>
 
-{#if isDownloadingFiles}
+{#if isDownloadingFiles && !isFileDownloadError}
   <button
     type="button"
     class="cursor-not-allowed rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br shadow-lg shadow-teal-800/80 focus:ring-teal-800">
@@ -53,6 +66,12 @@
     </svg>
     Downloading
   </button>
+{:else if isFileDownloadError}
+  <button
+    type="button"  
+    class="cursor-not-allowed text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-2 focus:outline-none focus:ring-red-800 shadow-lg shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+    An Error Has Occurred
+  </button>
 {:else}
   <button
     type="button"
@@ -62,7 +81,7 @@
   </button>
 {/if}
 
-{#if isDownloadingAll}
+{#if isDownloadingAll && !isDownloadAllError}
   <button
     type="button"
     class="cursor-not-allowed rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br shadow-lg shadow-teal-800/80 focus:ring-teal-800">
@@ -82,6 +101,12 @@
     </svg>
     Downloading
   </button>
+{:else if isDownloadAllError}
+  <button
+    type="button"
+    class="cursor-not-allowed text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-2 focus:outline-none focus:ring-red-800 shadow-lg shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+    An Error Has Occurred
+  </button>
 {:else}
   <button
     type="button"

diff --git a/thingizip/src/utils/download.ts b/thingizip/src/utils/download.ts
@@ -12,7 +12,6 @@ export async function downloadFiles() {
 
   let filesUrl = data['files_url'];
   let downloadUrls = await getDownloadUrls(filesUrl, DownloadType.File);
-  console.log(downloadUrls);
 
   await downloadAndZipFiles(downloadUrls, name, undefined, url, DownloadType.File);
 }
@@ -36,27 +35,22 @@ async function getDownloadUrls(
   url: string,
   type: DownloadType | null,
 ): Promise<DownloadInfo[] | null> {
-  try {
-    let response = await fetchData(url);
-    let json = JSON.parse(response);
+  let response = await fetchData(url);
+  let json = JSON.parse(response);
 
-    let filesToDownload = [];
+  let filesToDownload = [];
 
-    json.forEach(function (item) {
-      let toDownload = getValuesNeedForDownload(item, type);
+  json.forEach(function (item) {
+    let toDownload = getValuesNeedForDownload(item, type);
 
-      if (toDownload == null) {
-        return;
-      }
+    if (toDownload == null) {
+      return;
+    }
 
-      filesToDownload.push(toDownload);
-    });
+    filesToDownload.push(toDownload);
+  });
 
-    return filesToDownload;
-  } catch (error) {
-    console.error('Error:', error);
-    return null;
-  }
+  return filesToDownload;
 }
 
 async function downloadAndZipFiles(
@@ -69,40 +63,35 @@ async function downloadAndZipFiles(
   const zip = new JSZip();
   let tempFileNames: string[] = [];
 
-  try {
-    let promises = toDownload.map((obj) => {
-      let data = downloadFile(obj.url);
-
-      let filename = obj.name;
-      let dirAndFilename = filename;
-      if (obj.fileType == DownloadType.File) {
-        dirAndFilename = `${FILES_DIR}/${filename}`;
-      } else if (obj.fileType == DownloadType.Image) {
-        dirAndFilename = `${IMAGES_DIR}/${filename}`;
-      }
-
-      zip.file(dirAndFilename, data, { binary: true });
-      tempFileNames.push(dirAndFilename);
-    });
+  let promises = toDownload.map((obj) => {
+    let data = downloadFile(obj.url);
 
-    if (descriptionHtml != undefined) {
-      let description = convertHtmlToText(descriptionHtml, name, url);
-      zip.file(DESCRIPTION_FILE, description);
+    let filename = obj.name;
+    let dirAndFilename = filename;
+    if (obj.fileType == DownloadType.File) {
+      dirAndFilename = `${FILES_DIR}/${filename}`;
+    } else if (obj.fileType == DownloadType.Image) {
+      dirAndFilename = `${IMAGES_DIR}/${filename}`;
     }
+    zip.file(dirAndFilename, data, { binary: true });
+    tempFileNames.push(dirAndFilename);
+  });
 
-    await Promise.all(promises);
+  if (descriptionHtml != undefined) {
+    let description = convertHtmlToText(descriptionHtml, name, url);
+    zip.file(DESCRIPTION_FILE, description);
+  }
 
-    let zipData = await zip.generateAsync({ type: 'blob' });
-    let zipName = name.replace(/\s+/g, '_');
+  await Promise.all(promises);
 
-    if (type == DownloadType.File) {
-      zipName += '_Files';
-    }
+  let zipData = await zip.generateAsync({ type: 'blob' });
+  let zipName = name.replace(/\s+/g, '_');
 
-    saveAs(zipData, `${zipName}.zip`);
-  } catch (error) {
-    console.error('An error occurred:', error);
+  if (type == DownloadType.File) {
+    zipName += '_Files';
   }
+
+  saveAs(zipData, `${zipName}.zip`);
 }
 
 async function downloadFile(url: string) {