From 35361f089c328222c6ab09054169c3578fc3c94e Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 2 Aug 2021 23:57:10 +0200
Subject: [PATCH] fix reloading the loader and other components

---
 .../FileBrowsers/CopyToSharedFolderModal.tsx  | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CopyToSharedFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CopyToSharedFolderModal.tsx
index cd27e20620..6bde63894f 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/CopyToSharedFolderModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CopyToSharedFolderModal.tsx
@@ -197,13 +197,7 @@ const CopyToSharedFolderModal = ({ close, file, filePath }: IShareFileProps) =>
   const classes = useStyles()
   const { isCreatingSharedFolder, handleCreateSharedFolder } = useCreateOrEditSharedFolder()
   const [sharedFolderName, setSharedFolderName] = useState("")
-  const {
-    sharedFolderReaders,
-    sharedFolderWriters,
-    handleLookupUser,
-    onNewUsers,
-    usersError
-  } = useLookupSharedFolderUser()
+  const { sharedFolderReaders, sharedFolderWriters, handleLookupUser, onNewUsers, usersError } = useLookupSharedFolderUser()
   const [isUsingCurrentBucket, setIsUsingCurrentBucket] = useState(true)
   const [currentStep, setCurrentStep] = useState<Step>("1_SHARED_FOLDER_SELECTION_CREATION")
   const [destinationBucket, setDestinationBucket] = useState<BucketKeyPermission | undefined>()
@@ -285,7 +279,6 @@ const CopyToSharedFolderModal = ({ close, file, filePath }: IShareFileProps) =>
       let fileContent: Blob | undefined
 
       try {
-        console.log("filePath", filePath)
         fileContent = await getFile({ file, filePath })
       } catch(e) {
         setError(t`Error while downloading ${file.name}`)
@@ -334,7 +327,7 @@ const CopyToSharedFolderModal = ({ close, file, filePath }: IShareFileProps) =>
     }
   }, [close, currentStep])
 
-  const Loader = () => (
+  const Loader = useCallback(() => (
     <div className={classes.loadingContainer}>
       <Loading
         size={48}
@@ -354,9 +347,9 @@ const CopyToSharedFolderModal = ({ close, file, filePath }: IShareFileProps) =>
         {isUploading && <Trans>Encrypting and uploading…</Trans>}
       </Typography>
     </div>
-  )
+  ), [classes.loadingContainer, isDownloading, isUploading])
 
-  const Step1CreateSharedFolder = () => (
+  const Step1CreateSharedFolder = useCallback(() => (
     <>
       <div className={classes.modalFlexItem}>
         <TextInput
@@ -401,9 +394,18 @@ const CopyToSharedFolderModal = ({ close, file, filePath }: IShareFileProps) =>
           }}/>
       </div>
     </>
-  )
+  ), [
+    classes.inputLabel,
+    classes.modalFlexItem,
+    classes.shareFolderNameInput,
+    handleLookupUser,
+    onNewUsers,
+    sharedFolderName,
+    sharedFolderReaders,
+    sharedFolderWriters
+  ])
 
-  const Step1ExistingSharedFolder = () => (
+  const Step1ExistingSharedFolder = useCallback(() => (
     <div className={clsx(classes.modalFlexItem, classes.inputWrapper)}>
       <SelectInput
         label={t`Select an existing shared folder`}
@@ -413,7 +415,7 @@ const CopyToSharedFolderModal = ({ close, file, filePath }: IShareFileProps) =>
         onChange={(val: string) => setDestinationBucket(buckets.find((bu) => bu.id === val))}
       />
     </div>
-  )
+  ), [buckets, bucketsOptions, classes.inputLabel, classes.inputWrapper, classes.modalFlexItem, destinationBucket])
 
   return (
     <CustomModal