update download function

Rename it and turn it into async other than using callback

components/FileListing.tsx

@@ -242,7 +242,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     }
 
     // Selected file download
-    const handleDownloadSelected = () => {
+    const handleSelectedDownload = () => {
       const folderName = path.substr(path.lastIndexOf('/') + 1)
       const folder = folderName ? folderName : undefined
       const files = getFiles()
@@ -257,7 +257,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         el.remove()
       } else if (files.length > 1) {
         setTotalGenerating(true)
-        saveFiles(files, folder, () => setTotalGenerating(false))
+        saveFiles(files, folder).then(() => setTotalGenerating(false))
       }
     }
 
@@ -302,7 +302,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                 <span
                   title="Download selected files"
                   className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
-                  onClick={handleDownloadSelected}
+                  onClick={handleSelectedDownload}
                 >
                   <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
                 </span>

utils/tools.ts

@@ -129,15 +129,14 @@ export const matchProtectedRoute = (route: string) => {
  * Download multiple files after compressing them into a zip
  * @param files Files to be downloaded
  * @param folder Optional folder name to hold files, otherwise flatten files in the zip
- * @param onFinish Optional hook triggered after sending generated zip to browser to download
  */
-export const saveFiles = (files: { name: string, url: string }[], folder?: string, onFinish?: () => void) => {
+export const saveFiles = async (files: { name: string, url: string }[], folder?: string) => {
   const zip = new JSZip()
   const dir = folder ? zip.folder(folder)! : zip
   files.forEach(({ name, url }) => {
     dir.file(name, fetch(url).then(r => r.blob()))
   })
-  dir.generateAsync({ type: 'blob' }).then(b => {
+  const b = await dir.generateAsync({ type: 'blob' })
   const el = document.createElement('a')
   el.style.display = 'none'
   document.body.appendChild(el)
@@ -147,8 +146,4 @@ export const saveFiles = (files: { name: string, url: string }[], folder?: strin
   el.click()
   window.URL.revokeObjectURL(bUrl)
   el.remove()
-    if (onFinish) {
-      onFinish()
-    }
-  })
 }