Web: Client: Data Import: refactoring

packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx

@@ -143,8 +143,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
     setWorkspace,
     cancelUploadDialogVisible,
     setCancelUploadDialogVisible,
-    initMigrationName,
+    initMigrations,
-    singleFileUploading,
     getMigrationStatus,
     setUsers,
     cancelMigration,
@@ -152,9 +151,9 @@ const SelectFileStep = (props: SelectFileStepProps) => {
     setLoadingStatus,
     files,
     setFiles,
-    multipleFileUploading,
     migratingWorkspace,
     setMigratingWorkspace,
+    uploadFiles,
   } = props as InjectedSelectFileStepProps;
 
   const [isSaveDisabled, setIsSaveDisabled] = useState(
@@ -173,9 +172,18 @@ const SelectFileStep = (props: SelectFileStepProps) => {
   const [chunkSize, setChunkSize] = useState(0);
 
   const [failTries, setFailTries] = useState(FAIL_TRIES);
-
   const uploadInterval = useRef<number>();
 
+  const handleError = useCallback(
+    (message?: string) => {
+      toastr.error(message || t("Common:SomethingWentWrong"));
+      setIsFileError(true);
+      setLoadingStatus("none");
+      clearInterval(uploadInterval.current);
+    },
+    [t, setLoadingStatus],
+  );
+
   const poolStatus = useCallback(async () => {
     try {
       const res = await getMigrationStatus();
@@ -186,17 +194,12 @@ const SelectFileStep = (props: SelectFileStepProps) => {
       }
 
       if (!res) {
-        toastr.error(t("Common:SomethingWentWrong"));
+        handleError();
-        setLoadingStatus("none");
-        clearInterval(uploadInterval.current);
         return;
       }
 
       if (res.parseResult.failedArchives.length > 0 || res.error) {
-        toastr.error(res.error);
+        handleError(res.error);
-        setIsFileError(true);
-        setLoadingStatus("none");
-        clearInterval(uploadInterval.current);
         return;
       }
 
@@ -209,7 +212,6 @@ const SelectFileStep = (props: SelectFileStepProps) => {
           res.parseResult.withoutEmailUsers.length;
 
         if (totalUsers > 0) {
-          setUsers(res.parseResult);
           setIsBackupEmpty(false);
           setLoadingStatus("done");
           setUsers(res.parseResult);
@@ -228,10 +230,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
         setIsInfiniteProgress(false);
       }
     } catch (error) {
-      toastr.error(error || t("Common:SomethingWentWrong"));
+      handleError(error as string);
-      setIsFileError(true);
-      setLoadingStatus("none");
-      clearInterval(uploadInterval.current);
       setIsNetworkError(true);
     }
   }, [
@@ -240,15 +239,16 @@ const SelectFileStep = (props: SelectFileStepProps) => {
     isInfiniteProgress,
     setLoadingStatus,
     setUsers,
-    t,
+    handleError,
   ]);
 
   const onUploadFile = async (file: File | File[]) => {
     try {
-      if (file instanceof Array) {
+      const filesData = Array.isArray(file) ? file : [file];
-        setFiles(file.map((item) => item.name));
+      setFiles(filesData.map((item) => item.name));
-        await multipleFileUploading(
+
-          file,
+      await uploadFiles(
+        filesData,
         setProgress,
         isAbort,
         setChunk,
@@ -256,31 +256,16 @@ const SelectFileStep = (props: SelectFileStepProps) => {
         setChunkSize,
         chunkSize,
       );
-      } else {
-        setFiles([file.name]);
-        await singleFileUploading(
-          file,
-          setProgress,
-          isAbort,
-          setChunk,
-          startChunk,
-          setChunkSize,
-          chunkSize,
-        );
-      }
 
       if (isAbort.current) return;
 
-      await initMigrationName(migratorName);
+      await initMigrations(migratorName);
       setLoadingStatus("proceed");
     } catch (error) {
-      toastr.error(error || t("Common:SomethingWentWrong"));
+      handleError(error as string);
-      setIsFileError(true);
-      setLoadingStatus("none");
       setIsNetworkError(true);
     } finally {
       isAbort.current = false;
-      setIsBackupEmpty(false);
     }
   };
 
@@ -292,6 +277,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
 
     setProgress(0);
     setIsFileError(false);
+    setIsBackupEmpty(false);
     setIsSaveDisabled(true);
     setLoadingStatus("upload");
     setFailTries(FAIL_TRIES);
@@ -497,8 +483,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
 
 export default inject<TStore>(({ dialogsStore, importAccountsStore }) => {
   const {
-    initMigrationName,
+    initMigrations,
-    singleFileUploading,
     getMigrationStatus,
     setUsers,
     fileLoadingStatus,
@@ -508,16 +493,15 @@ export default inject<TStore>(({ dialogsStore, importAccountsStore }) => {
     incrementStep,
     files,
     setFiles,
-    multipleFileUploading,
     migratingWorkspace,
     setMigratingWorkspace,
+    uploadFiles,
   } = importAccountsStore;
   const { cancelUploadDialogVisible, setCancelUploadDialogVisible } =
     dialogsStore;
 
   return {
-    initMigrationName,
+    initMigrations,
-    singleFileUploading,
     getMigrationStatus,
     setUsers,
     fileLoadingStatus,
@@ -529,8 +513,8 @@ export default inject<TStore>(({ dialogsStore, importAccountsStore }) => {
     incrementStep,
     files,
     setFiles,
-    multipleFileUploading,
     migratingWorkspace,
     setMigratingWorkspace,
+    uploadFiles,
   };
 })(observer(SelectFileStep));

packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts

@@ -59,8 +59,7 @@ export interface InjectedSelectFileStepProps extends SelectFileStepProps {
   setWorkspace: TStore["importAccountsStore"]["setWorkspace"];
   cancelUploadDialogVisible: TStore["dialogsStore"]["cancelUploadDialogVisible"];
   setCancelUploadDialogVisible: TStore["dialogsStore"]["setCancelUploadDialogVisible"];
-  initMigrationName: TStore["importAccountsStore"]["initMigrationName"];
+  initMigrations: TStore["importAccountsStore"]["initMigrations"];
-  singleFileUploading: TStore["importAccountsStore"]["singleFileUploading"];
   getMigrationStatus: TStore["importAccountsStore"]["getMigrationStatus"];
   setUsers: TStore["importAccountsStore"]["setUsers"];
   fileLoadingStatus: TStore["importAccountsStore"]["fileLoadingStatus"];
@@ -68,9 +67,9 @@ export interface InjectedSelectFileStepProps extends SelectFileStepProps {
   cancelMigration: TStore["importAccountsStore"]["cancelMigration"];
   files: TStore["importAccountsStore"]["files"];
   setFiles: TStore["importAccountsStore"]["setFiles"];
-  multipleFileUploading: TStore["importAccountsStore"]["multipleFileUploading"];
   migratingWorkspace: TStore["importAccountsStore"]["migratingWorkspace"];
   setMigratingWorkspace: TStore["importAccountsStore"]["setMigratingWorkspace"];
+  uploadFiles: TStore["importAccountsStore"]["uploadFiles"];
 }
 
 export interface DataImportProps {}

packages/client/src/store/ImportAccountsStore.ts

@@ -329,8 +329,8 @@ class ImportAccountsStore {
     };
   };
 
-  multipleFileUploading = async (
+  uploadFiles = async (
-    files: File[],
+    filesData: File | File[],
     setProgress: (progress: number) => void,
     isAbort: React.MutableRefObject<boolean>,
     setChunk: React.Dispatch<React.SetStateAction<number>>,
@@ -339,21 +339,20 @@ class ImportAccountsStore {
     chunkSize: number,
   ) => {
     let chunk = 0;
-    try {
     const location = combineUrl(
       window.location.origin,
       "migrationFileUpload.ashx",
     );
-      const requestsDataArray: { formData: FormData; fileName: string }[] = [];
 
-      let chunkUploadSize = 0;
+    try {
+      let chunkUploadSize = chunkSize;
 
-      if (chunkSize) {
+      if (!chunkSize) {
-        chunkUploadSize = chunkSize;
+        const res = await axios.post<{
-      } else {
+          Success: boolean;
-        const res: {
+          ChunkSize: number;
-          data: { Success: boolean; ChunkSize: number; Message: string };
+          Message: string;
-        } = await axios.post(`${location}?Init=${startChunk === 0}`);
+        }>(`${location}?Init=${startChunk === 0}`);
 
         if (!res.data.Success) {
           toastr.error(res.data.Message);
@@ -364,9 +363,10 @@ class ImportAccountsStore {
         setChunkSize(chunkUploadSize);
       }
 
-      if (!chunkUploadSize) return;
+      if (!chunkUploadSize || isAbort.current) return;
 
-      if (isAbort.current) return;
+      const requestsDataArray: { formData: FormData; fileName: string }[] = [];
+      const files = Array.isArray(filesData) ? filesData : [filesData];
 
       const chunksNumber = files
         .map((file) => Math.ceil(file.size / chunkUploadSize))
@@ -402,79 +402,9 @@ class ImportAccountsStore {
         setProgress(Math.ceil(progress));
         chunk += 1;
       }
-    } catch (e) {
+    } catch (error) {
-      setChunk(chunk);
-    }
-  };
-
-  singleFileUploading = async (
-    file: File,
-    setProgress: (progress: number) => void,
-    isAbort: React.MutableRefObject<boolean>,
-    setChunk: React.Dispatch<React.SetStateAction<number>>,
-    startChunk: number,
-    setChunkSize: React.Dispatch<React.SetStateAction<number>>,
-    chunkSize: number,
-  ) => {
-    let chunk = 0;
-    try {
-      const location = combineUrl(
-        window.location.origin,
-        "migrationFileUpload.ashx",
-      );
-
-      let chunkUploadSize = 0;
-
-      if (chunkSize) {
-        chunkUploadSize = chunkSize;
-      } else {
-        const res: {
-          data: { Success: boolean; ChunkSize: number; Message: string };
-        } = await axios.post(`${location}?Init=${startChunk === 0}`);
-
-        if (!res.data.Success) {
-          toastr.error(res.data.Message);
-          throw new Error(res.data.Message);
-        }
-
-        chunkUploadSize = res.data.ChunkSize;
-        setChunkSize(chunkUploadSize);
-      }
-
-      if (!chunkUploadSize) return;
-
-      const requestsDataArray = [];
-
-      const chunks = Math.ceil(file.size / chunkUploadSize);
-
-      if (isAbort.current) return;
-
-      while (chunk < chunks) {
-        const offset = chunk * chunkUploadSize;
-        const formData = new FormData();
-        formData.append("file", file.slice(offset, offset + chunkUploadSize));
-        requestsDataArray.push(formData);
-        chunk += 1;
-      }
-
-      chunk = startChunk || 0;
-      while (
-        chunk < chunks &&
-        (this.fileLoadingStatus === "upload" ||
-          this.fileLoadingStatus === "proceed")
-      ) {
-        if (isAbort.current) return;
-        // eslint-disable-next-line no-await-in-loop
-        await uploadFile(
-          `${location}?Name=${file.name}`,
-          requestsDataArray[chunk],
-        );
-        const progress = (chunk / chunks) * 100;
-        setProgress(Math.ceil(progress));
-        chunk += 1;
-      }
-    } catch (e) {
       setChunk(chunk);
+      throw new Error(error as string);
     }
   };
 
@@ -492,7 +422,7 @@ class ImportAccountsStore {
   };
 
   // eslint-disable-next-line class-methods-use-this
-  initMigrationName = (name: TWorkspaceService) => {
+  initMigrations = (name: TWorkspaceService) => {
     return initMigration(name);
   };