renamed exportState to exportStage
This commit is contained in:
parent
2aa818850e
commit
9bd22de9fd
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue