diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx index cd9449eb91..cecb98fcf1 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx +++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx @@ -143,8 +143,7 @@ const SelectFileStep = (props: SelectFileStepProps) => { setWorkspace, cancelUploadDialogVisible, setCancelUploadDialogVisible, - initMigrationName, - singleFileUploading, + initMigrations, 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(); + 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")); - setLoadingStatus("none"); - clearInterval(uploadInterval.current); + handleError(); return; } if (res.parseResult.failedArchives.length > 0 || res.error) { - toastr.error(res.error); - setIsFileError(true); - setLoadingStatus("none"); - clearInterval(uploadInterval.current); + handleError(res.error); 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")); - setIsFileError(true); - setLoadingStatus("none"); - clearInterval(uploadInterval.current); + handleError(error as string); setIsNetworkError(true); } }, [ @@ -240,47 +239,33 @@ const SelectFileStep = (props: SelectFileStepProps) => { isInfiniteProgress, setLoadingStatus, setUsers, - t, + handleError, ]); const onUploadFile = async (file: File | File[]) => { try { - if (file instanceof Array) { - setFiles(file.map((item) => item.name)); - await multipleFileUploading( - file, - setProgress, - isAbort, - setChunk, - startChunk, - setChunkSize, - chunkSize, - ); - } else { - setFiles([file.name]); - await singleFileUploading( - file, - setProgress, - isAbort, - setChunk, - startChunk, - setChunkSize, - chunkSize, - ); - } + const filesData = Array.isArray(file) ? file : [file]; + setFiles(filesData.map((item) => item.name)); + + await uploadFiles( + filesData, + 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")); - setIsFileError(true); - setLoadingStatus("none"); + handleError(error as string); 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(({ dialogsStore, importAccountsStore }) => { const { - initMigrationName, - singleFileUploading, + initMigrations, getMigrationStatus, setUsers, fileLoadingStatus, @@ -508,16 +493,15 @@ export default inject(({ dialogsStore, importAccountsStore }) => { incrementStep, files, setFiles, - multipleFileUploading, migratingWorkspace, setMigratingWorkspace, + uploadFiles, } = importAccountsStore; const { cancelUploadDialogVisible, setCancelUploadDialogVisible } = dialogsStore; return { - initMigrationName, - singleFileUploading, + initMigrations, getMigrationStatus, setUsers, fileLoadingStatus, @@ -529,8 +513,8 @@ export default inject(({ dialogsStore, importAccountsStore }) => { incrementStep, files, setFiles, - multipleFileUploading, migratingWorkspace, setMigratingWorkspace, + uploadFiles, }; })(observer(SelectFileStep)); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts b/packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts index dda9ccbfe7..28b0fbe881 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts +++ b/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"]; - singleFileUploading: TStore["importAccountsStore"]["singleFileUploading"]; + initMigrations: TStore["importAccountsStore"]["initMigrations"]; 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 {} diff --git a/packages/client/src/store/ImportAccountsStore.ts b/packages/client/src/store/ImportAccountsStore.ts index 159a0532b0..ce088cd9b7 100644 --- a/packages/client/src/store/ImportAccountsStore.ts +++ b/packages/client/src/store/ImportAccountsStore.ts @@ -329,8 +329,8 @@ class ImportAccountsStore { }; }; - multipleFileUploading = async ( - files: File[], + uploadFiles = async ( + filesData: File | File[], setProgress: (progress: number) => void, isAbort: React.MutableRefObject, setChunk: React.Dispatch>, @@ -339,21 +339,20 @@ class ImportAccountsStore { chunkSize: number, ) => { let chunk = 0; + const location = combineUrl( + window.location.origin, + "migrationFileUpload.ashx", + ); + try { - const location = combineUrl( - window.location.origin, - "migrationFileUpload.ashx", - ); - const requestsDataArray: { formData: FormData; fileName: string }[] = []; + let chunkUploadSize = chunkSize; - 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 (!chunkSize) { + const res = await axios.post<{ + Success: boolean; + ChunkSize: number; + Message: string; + }>(`${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) { - setChunk(chunk); - } - }; - - singleFileUploading = async ( - file: File, - setProgress: (progress: number) => void, - isAbort: React.MutableRefObject, - setChunk: React.Dispatch>, - startChunk: number, - setChunkSize: React.Dispatch>, - 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) { + } catch (error) { 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); };