Fix Preview loading if interrupted

packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx

@@ -60,12 +60,11 @@ export const useGetFile = () => {
       return content
 
     } catch (error) {
-      setIsDownloading(false)
-
       // If no error is thrown, this was due to a cancellation by the user.
       if (error) {
         console.error(error)
         setError(t`There was an error getting the preview.`)
+        setIsDownloading(false)
       }
     }
   }, [bucket, getFileContent])

packages/files-ui/src/Components/Modules/FilePreviewModal.tsx

@@ -162,7 +162,7 @@ const useStyles = makeStyles(
           position: "absolute"
         }
       },
-      focusVisible:{
+      focusVisible: {
         backgroundColor: "transparent !important"
       },
       menuWrapper: {
@@ -185,7 +185,7 @@ interface Props {
 const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath }: Props) => {
   const classes = useStyles()
   const { downloadFile } = useFiles()
-  const [fileContent, setFileContent] = useState<Blob |undefined>()
+  const [fileContent, setFileContent] = useState<Blob | undefined>()
   const { bucket } = useFileBrowser()
   const { buckets } = useFiles()
   const { desktop } = useThemeSwitcher()
@@ -296,7 +296,7 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
         </Typography>
         <Menu
           testId='preview-kebab'
-          icon={<MoreIcon className={classes.dropdownIcon}/>}
+          icon={<MoreIcon className={classes.dropdownIcon} />}
           options={menuItems}
           style={{
             focusVisible: classes.focusVisible,

packages/files-ui/src/Contexts/FilesContext.tsx

@@ -11,7 +11,7 @@ import {
 } from "@chainsafe/files-api-client"
 import React, { useCallback, useEffect } from "react"
 import { useState } from "react"
-import { decryptFile, encryptFile  } from "../Utils/encryption"
+import { decryptFile, encryptFile } from "../Utils/encryption"
 import { ToastParams, useToasts } from "@chainsafe/common-components"
 import axios, { CancelToken } from "axios"
 import { plural, t } from "@lingui/macro"
@@ -159,7 +159,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
 
     let encryptionKey = ""
 
-    switch(bucket.type) {
+    switch (bucket.type) {
       case "csf":
       case "trash": {
         encryptionKey = personalEncryptionKey
@@ -168,7 +168,8 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       case "share": {
         encryptionKey = await getKeyForSharedBucket(bucket)
         break
-      }}
+      }
+    }
 
     return encryptionKey
   }, [getKeyForSharedBucket, personalEncryptionKey, userId])
@@ -481,7 +482,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       }
     } catch (error) {
       if (axios.isCancel(error)) {
-        return Promise.reject(error)
+        return Promise.reject()
       } else {
         console.error(error)
         return Promise.reject(error)
@@ -493,7 +494,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     itemsToDownload: FileSystemItem[],
     currentPath: string,
     bucketId: string
-  ): Promise<FileSystemItemPath[]>  => {
+  ): Promise<FileSystemItemPath[]> => {
     return await itemsToDownload.reduce(
       async (acc: Promise<FileSystemItemPath[]>, item: FileSystemItem): Promise<FileSystemItemPath[]> => {
         if (item.isFolder) {
@@ -566,7 +567,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
               }
             })
 
-            if(file) {
+            if (file) {
               const fileArrayBuffer = await file.arrayBuffer()
               const fullPath = getPathWithFile(item.path, item.name)
               const relativeFilePath = getRelativePath(fullPath, currentPath)
@@ -662,7 +663,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       return Promise.resolve()
     } catch (error: any) {
       console.error(error)
-      let errorMessage = `${t`An error occurred: `} ${typeof(error) === "string"
+      let errorMessage = `${t`An error occurred: `} ${typeof (error) === "string"
         ? error
         : error?.error?.message || ""}`
       if (axios.isCancel(error)) {
@@ -680,7 +681,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     }
   }, [getFileContent, addToast, updateToast])
 
-  const createSharedFolder = useCallback(async (name: string, writerUsers?: SharedFolderUser[], readerUsers?: SharedFolderUser[]) =>  {
+  const createSharedFolder = useCallback(async (name: string, writerUsers?: SharedFolderUser[], readerUsers?: SharedFolderUser[]) => {
     if (!publicKey) return
 
     const bucketEncryptionKey = Buffer.from(
@@ -806,7 +807,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
               }
             })
 
-            if(file) {
+            if (file) {
               await encryptAndUploadFiles(
                 destinationBucket,
                 [new File([file], item.name, { type: item.content_type })],
@@ -841,7 +842,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
               ? t`${successCount} files transferred successfully, ${totalFileNumber - successCount} failed`
               : t`${inSharedBucket ? "Copying" : "Sharing"} failed`,
           type: successCount ? "success" : "error",
-          progress:  undefined,
+          progress: undefined,
           isClosable: true
         }, true)
         setTransfersInProgress(false)
@@ -855,15 +856,14 @@ const FilesProvider = ({ children }: FilesContextProps) => {
           : t`${inSharedBucket ? "Copying" : "Sharing"} failed`
         if (axios.isCancel(error)) {
           errorMessage = successCount
-            ? t`${
-              inSharedBucket ? "Copying" : "Sharing"
+            ? t`${inSharedBucket ? "Copying" : "Sharing"
             } cancelled - ${successCount} files ${inSharedBucket ? "copied" : "shared"} successfully`
             : t`${inSharedBucket ? "Copying" : "Sharing"} cancelled`
         }
         updateToast(toastId, {
           title: errorMessage,
           type: "error",
-          progress:  undefined,
+          progress: undefined,
           isClosable: true
         }, true)
       }