renamed exportState to exportStage

src/components/ExportInProgress.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, ProgressBar } from 'react-bootstrap';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
-import { ExportState, ExportStats } from './ExportModal';
+import { ExportStage, ExportStats } from './ExportModal';
 
 export const ComfySpan = styled.span`
     word-spacing:1rem;
@@ -12,23 +12,15 @@ export const ComfySpan = styled.span`
 interface Props {
     show: boolean
     onHide: () => void
-    updateExportState: (newState: ExportState) => void;
     exportFolder: string
     exportSize: string
-    exportState: ExportState
+    exportStage: ExportStage
     exportStats: ExportStats
     exportFiles: () => void;
     cancelExport: () => void
+    pauseExport: () => void;
 }
 export default function ExportInProgress(props: Props) {
-    const pauseExport = () => {
-        props.updateExportState(ExportState.PAUSED);
-        props.cancelExport();
-    };
-    const cancelExport = () => {
-        props.updateExportState(ExportState.FINISHED);
-        props.cancelExport();
-    };
     return (
         <>
             <div style={{ marginBottom: '30px', padding: '0 5%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
@@ -43,12 +35,12 @@ export default function ExportInProgress(props: Props) {
                     />
                 </div>
                 <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around' }}>
-                    {props.exportState === ExportState.PAUSED ?
+                    {props.exportStage === ExportStage.PAUSED ?
                         <Button block variant={'outline-secondary'} onClick={props.exportFiles}>{constants.RESUME}</Button> :
-                        <Button block variant={'outline-secondary'} onClick={pauseExport}>{constants.PAUSE}</Button>
+                        <Button block variant={'outline-secondary'} onClick={props.pauseExport}>{constants.PAUSE}</Button>
                     }
                     <div style={{ width: '30px' }} />
-                    <Button block variant={'outline-danger'} onClick={cancelExport}>{constants.CANCEL}</Button>
+                    <Button block variant={'outline-danger'} onClick={props.cancelExport}>{constants.CANCEL}</Button>
                 </div>
             </div>
         </>

src/components/ExportInit.tsx

@@ -2,13 +2,13 @@ import { DeadCenter } from 'pages/gallery';
 import React from 'react';
 import { Button } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
-import { ExportState } from './ExportModal';
+import { ExportStage } from './ExportModal';
 
 interface Props {
     show: boolean
     onHide: () => void
     updateExportFolder: (newFolder: string) => void;
-    updateExportState: (newState: ExportState) => void;
+    updateExportStage: (newState: ExportStage) => void;
     exportFolder: string
     exportFiles: () => void
     exportSize: string;
@@ -20,7 +20,7 @@ export default function ExportInit(props: Props) {
             await props.selectExportDirectory();
         }
         props.exportFiles();
-        props.updateExportState(ExportState.INPROGRESS);
+        props.updateExportStage(ExportStage.INPROGRESS);
     };
     return (
         <>

src/components/ExportModal.tsx

@@ -23,7 +23,7 @@ const FolderIconWrapper = styled.div`
         background-color:#444;
     }
     `;
-export enum ExportState {
+export enum ExportStage {
     INIT,
     INPROGRESS,
     PAUSED,
@@ -41,7 +41,7 @@ export interface ExportStats {
     failed: number;
 }
 export default function ExportModal(props: Props) {
-    const [exportState, setExportState] = useState(ExportState.INIT);
+    const [exportStage, setExportStage] = useState(ExportStage.INIT);
     const [exportFolder, setExportFolder] = useState(null);
     const [exportSize, setExportSize] = useState(null);
     const [exportStats, setExportStats] = useState<ExportStats>({ current: 0, total: 0, failed: 0 });
@@ -49,7 +49,7 @@ export default function ExportModal(props: Props) {
 
     useEffect(() => {
         const exportInfo = getData(LS_KEYS.EXPORT);
-        exportInfo?.state && setExportState(exportInfo.state);
+        exportInfo?.state && setExportStage(exportInfo.state);
         exportInfo?.folder && setExportFolder(exportInfo.folder);
         exportInfo?.time && setLastExportTime(exportInfo.time);
         setExportSize(props.usage);
@@ -57,22 +57,21 @@ export default function ExportModal(props: Props) {
 
     useEffect(() => {
         if (exportStats.total !== 0 && exportStats.current === exportStats.total) {
-            updateExportState(ExportState.FINISHED);
+            updateExportStage(ExportStage.FINISHED);
             updateExportTime(Date.now());
         }
     }, [exportStats]);
 
     useEffect(() => {
         setExportSize(props.usage);
-        console.log(props.usage);
     }, [props.usage]);
 
     const updateExportFolder = (newFolder) => {
         setExportFolder(newFolder);
         setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), folder: newFolder });
     };
-    const updateExportState = (newState) => {
-        setExportState(newState);
+    const updateExportStage = (newState) => {
+        setExportStage(newState);
         setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), state: newState });
     };
     const updateExportTime = (newTime) => {
@@ -81,7 +80,7 @@ export default function ExportModal(props: Props) {
     };
 
     const startExport = () => {
-        updateExportState(ExportState.INPROGRESS);
+        updateExportStage(ExportStage.INPROGRESS);
         setExportStats({ current: 0, total: 0, failed: 0 });
         exportService.exportFiles(setExportStats);
     };
@@ -91,33 +90,46 @@ export default function ExportModal(props: Props) {
         newFolder && updateExportFolder(newFolder);
     };
 
+    const cancelExport = () => {
+        exportService.cancelExport();
+        if (!lastExportTime) {
+            updateExportStage(ExportStage.INIT);
+        } else {
+            updateExportStage(ExportStage.FINISHED);
+        }
+    };
+    const pauseExport = () => {
+        updateExportStage(ExportStage.PAUSED);
+        exportService.stopExport();
+    };
+
     const ExportDynamicState = () => {
-        switch (exportState) {
-            case ExportState.INIT:
+        switch (exportStage) {
+            case ExportStage.INIT:
                 return (
                     <ExportInit {...props}
                         exportFolder={exportFolder}
                         exportSize={exportSize}
                         updateExportFolder={updateExportFolder}
                         exportFiles={startExport}
-                        updateExportState={updateExportState}
+                        updateExportStage={updateExportStage}
                         selectExportDirectory={selectExportDirectory}
                     />
                 );
-            case ExportState.INPROGRESS:
-            case ExportState.PAUSED:
+            case ExportStage.INPROGRESS:
+            case ExportStage.PAUSED:
                 return (
                     <ExportInProgress {...props}
                         exportFolder={exportFolder}
                         exportSize={exportSize}
-                        exportState={exportState}
-                        updateExportState={updateExportState}
+                        exportStage={exportStage}
                         exportStats={exportStats}
                         exportFiles={startExport}
-                        cancelExport={exportService.cancelExport}
+                        cancelExport={cancelExport}
+                        pauseExport={pauseExport}
                     />
                 );
-            case ExportState.FINISHED:
+            case ExportStage.FINISHED:
                 return (
                     <ExportFinished
                         {...props}