completed exportLogic

src/components/ExportModal.tsx

@@ -8,46 +8,93 @@ import ExportInProgress from './ExportInProgress';
 export enum ExportState {
     INIT,
     INPROGRESS,
+    PAUSED,
     FINISHED
 }
 
 interface Props {
     show: boolean
     onHide: () => void
-    usage: number
+    usage: string
+}
+export interface ExportStats {
+    current: number;
+    total: number;
+    failed: number;
 }
 export default function ExportModal(props: Props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [exportState, setExportState] = useState(ExportState.INIT);
     const [exportFolder, setExportFolder] = useState(null);
     const [exportSize, setExportSize] = useState(null);
+    const [exportStats, setExportStats] = useState<ExportStats>({ current: 0, total: 0, failed: 0 });
+    const [lastExportTime, setLastExportTime] = useState(0);
     useEffect(() => {
         const exportInfo = getData(LS_KEYS.EXPORT);
         exportInfo?.state && setExportState(exportInfo.state);
         exportInfo?.folder && setExportFolder(exportInfo.folder);
+        exportInfo?.time && setLastExportTime(exportInfo.time);
         setExportSize(props.usage);
     }, []);
 
+    useEffect(() => {
+        if (exportStats.current === exportStats.total) {
+            updateExportState(ExportState.FINISHED);
+            updateExportTime(Date.now());
+        }
+    }, [exportStats]);
     const updateExportFolder = (newFolder) => {
         setExportFolder(newFolder);
         setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), folder: newFolder });
     };
     const updateExportState = (newState) => {
         setExportState(newState);
-        setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), satte: newState });
+        setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), state: newState });
+    };
+    const updateExportTime = (newTime) => {
+        setLastExportTime(newTime);
+        setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), time: newTime });
+    };
+
+    const startExport = () => {
+        updateExportState(ExportState.INPROGRESS);
+        setExportStats({ current: 0, total: 0, failed: 0 });
+        exportService.exportFiles(setExportStats);
     };
     switch (exportState) {
         case ExportState.INIT:
             return (
-                <ExportInit {...props} exportFolder={exportFolder} exportSize={exportSize} updateExportFolder={updateExportFolder} exportFiles={() => exportService.exportFiles()} updateExportState={updateExportState} />
+                <ExportInit {...props}
+                    exportFolder={exportFolder}
+                    exportSize={exportSize}
+                    updateExportFolder={updateExportFolder}
+                    exportFiles={startExport}
+                    updateExportState={updateExportState}
+                />
             );
         case ExportState.INPROGRESS:
             return (
-                <ExportInProgress {...props} />
+                <ExportInProgress {...props}
+                    exportFolder={exportFolder}
+                    exportSize={exportSize}
+                    exportState={exportState}
+                    updateExportState={updateExportState}
+                    exportStats={exportStats}
+                    exportFiles={startExport}
+                    cancelExport={exportService.cancelExport}
+                />
             );
         case ExportState.FINISHED:
             return (
-                <ExportFinished {...props} />
+                <ExportFinished
+                    {...props}
+                    exportFolder={exportFolder}
+                    exportSize={exportSize}
+                    updateExportFolder={updateExportFolder}
+                    lastExportTime={lastExportTime}
+                    exportStats={exportStats}
+                    exportFiles={startExport}
+                />
             );
     }
 }

src/services/exportService.ts

@@ -1,3 +1,4 @@
+import { ExportStats } from 'components/ExportModal';
 import { retryPromise, runningInBrowser } from 'utils/common';
 import { logError } from 'utils/sentry';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
@@ -23,26 +24,34 @@ class ExportService {
         const main = async () => {
             this.ElectronAPIs = runningInBrowser() && window['ElectronAPIs'];
             if (this.ElectronAPIs) {
-                const autoStartExport = getData(LS_KEYS.EXPORT_IN_PROGRESS);
+                const autoStartExport = getData(LS_KEYS.EXPORT);
                 if (autoStartExport?.status) {
-                    this.exportFiles(await getLocalFiles(), await getLocalCollections());
+                    this.exportFiles(null);
                 }
             }
         };
         main();
     }
-    async exportFiles(files: File[], collections: Collection[]) {
+    async selectExportDirectory() {
+        return await this.ElectronAPIs.selectRootDirectory();
+    }
+    cancelExport() {
+        this.abortExport = true;
+    }
+    async exportFiles(updateProgress: (stats: ExportStats) => void) {
+        const files = await getLocalFiles();
+        const collections = await getLocalCollections();
         if (this.exportInProgress) {
             this.ElectronAPIs.sendNotification(ExportNotification.IN_PROGRESS);
             return this.exportInProgress;
         }
-        this.exportInProgress = this.fileExporter(files, collections);
+        this.exportInProgress = this.fileExporter(files, collections, updateProgress);
         return this.exportInProgress;
     }
 
-    async fileExporter(files: File[], collections: Collection[]) {
+    async fileExporter(files: File[], collections: Collection[], updateProgress: (stats: ExportStats) => void) {
         try {
-            const dir = await this.ElectronAPIs.selectRootDirectory();
+            const dir = getData(LS_KEYS.EXPORT).folder;
             if (!dir) {
                 // directory selector closed
                 return;
@@ -51,10 +60,8 @@ class ExportService {
                 dir,
             );
             this.ElectronAPIs.showOnTray('starting export');
-            this.ElectronAPIs.registerStopExportListener(
-                () => (this.abortExport = true),
-            );
-            setData(LS_KEYS.EXPORT_IN_PROGRESS, { status: true });
+            this.ElectronAPIs.registerStopExportListener(() => (this.abortExport = true));
+            setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), status: true });
             const collectionIDMap = new Map<number, string>();
             for (const collection of collections) {
                 const collectionFolderPath = `${dir}/${collection.id}_${this.sanitizeName(collection.name)}`;
@@ -85,6 +92,7 @@ class ExportService {
                     export_progress:
                         `exporting file ${index + 1} / ${files.length}`,
                 });
+                updateProgress({ current: index + 1, total: files.length, failed: this.failedFiles.length });
             }
             this.ElectronAPIs.sendNotification(
                 this.abortExport ?
@@ -100,7 +108,7 @@ class ExportService {
                 });
             } else {
                 this.ElectronAPIs.showOnTray();
-                setData(LS_KEYS.EXPORT_IN_PROGRESS, { status: false });
+                setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), status: false });
             }
         } catch (e) {
             logError(e);

src/utils/storage/localStorage.ts

@@ -10,7 +10,7 @@ export enum LS_KEYS {
     IS_FIRST_LOGIN = 'isFirstLogin',
     JUST_SIGNED_UP = 'justSignedUp',
     SHOW_BACK_BUTTON = 'showBackButton',
-    EXPORT_IN_PROGRESS = 'exportInProgress'
+    EXPORT = 'export'
 }
 
 export const setData = (key: LS_KEYS, value: object) => {

src/utils/strings/englishConstants.tsx

@@ -435,6 +435,7 @@ const englishConstants = {
     START: 'start',
     EXPORT_IN_PROGRESS: 'export in progress...',
     PAUSE: 'pause',
+    RESUME: 'resume',
     MINIMIZE: 'minimize',
     LAST_EXPORT_TIME: 'last export time',
     SUCCESSFULLY_EXPORTED_FILES: 'successfully exported files',