beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

renamed exportState to exportStage

Browse source
This commit is contained in:
Abhinav-grd 2021-07-08 12:12:28 +05:30
parent 2aa818850e
commit 9bd22de9fd
3 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/ExportInProgress.tsx
View file

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

6
src/components/ExportInit.tsx
View file

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

46
src/components/ExportModal.tsx
View file

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