2021-07-07 05:31:48 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-07-07 09:20:59 +00:00
|
|
|
import { Button } from 'react-bootstrap';
|
2021-07-07 05:31:48 +00:00
|
|
|
import exportService from 'services/exportService';
|
2021-07-08 05:44:54 +00:00
|
|
|
import styled from 'styled-components';
|
2021-07-07 05:31:48 +00:00
|
|
|
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
2021-07-07 09:20:59 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
|
|
|
import { Label, Row, Value } from './Container';
|
2021-07-06 11:23:13 +00:00
|
|
|
import ExportFinished from './ExportFinished';
|
2021-07-06 09:20:05 +00:00
|
|
|
import ExportInit from './ExportInit';
|
|
|
|
import ExportInProgress from './ExportInProgress';
|
2021-07-07 09:20:59 +00:00
|
|
|
import FolderIcon from './icons/FolderIcon';
|
|
|
|
import InProgressIcon from './icons/InProgressIcon';
|
|
|
|
import MessageDialog from './MessageDialog';
|
2021-07-06 09:20:05 +00:00
|
|
|
|
2021-07-08 05:44:54 +00:00
|
|
|
const FolderIconWrapper = styled.div`
|
|
|
|
width: 15%;
|
|
|
|
margin-left: 10px;
|
|
|
|
cursor: pointer;
|
|
|
|
padding: 3px;
|
|
|
|
border: 1px solid #444;
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
background-color:#444;
|
|
|
|
}
|
|
|
|
`;
|
2021-07-07 05:31:48 +00:00
|
|
|
export enum ExportState {
|
2021-07-06 09:20:05 +00:00
|
|
|
INIT,
|
|
|
|
INPROGRESS,
|
2021-07-07 07:45:55 +00:00
|
|
|
PAUSED,
|
2021-07-06 09:20:05 +00:00
|
|
|
FINISHED
|
|
|
|
}
|
|
|
|
|
2021-07-07 05:31:48 +00:00
|
|
|
interface Props {
|
|
|
|
show: boolean
|
|
|
|
onHide: () => void
|
2021-07-07 07:45:55 +00:00
|
|
|
usage: string
|
|
|
|
}
|
|
|
|
export interface ExportStats {
|
|
|
|
current: number;
|
|
|
|
total: number;
|
|
|
|
failed: number;
|
2021-07-07 05:31:48 +00:00
|
|
|
}
|
|
|
|
export default function ExportModal(props: Props) {
|
|
|
|
const [exportState, setExportState] = useState(ExportState.INIT);
|
|
|
|
const [exportFolder, setExportFolder] = useState(null);
|
|
|
|
const [exportSize, setExportSize] = useState(null);
|
2021-07-07 07:45:55 +00:00
|
|
|
const [exportStats, setExportStats] = useState<ExportStats>({ current: 0, total: 0, failed: 0 });
|
|
|
|
const [lastExportTime, setLastExportTime] = useState(0);
|
2021-07-07 09:20:59 +00:00
|
|
|
|
2021-07-07 05:31:48 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const exportInfo = getData(LS_KEYS.EXPORT);
|
|
|
|
exportInfo?.state && setExportState(exportInfo.state);
|
|
|
|
exportInfo?.folder && setExportFolder(exportInfo.folder);
|
2021-07-07 07:45:55 +00:00
|
|
|
exportInfo?.time && setLastExportTime(exportInfo.time);
|
2021-07-07 05:31:48 +00:00
|
|
|
setExportSize(props.usage);
|
|
|
|
}, []);
|
|
|
|
|
2021-07-07 07:45:55 +00:00
|
|
|
useEffect(() => {
|
2021-07-07 09:20:59 +00:00
|
|
|
if (exportStats.total !== 0 && exportStats.current === exportStats.total) {
|
2021-07-07 07:45:55 +00:00
|
|
|
updateExportState(ExportState.FINISHED);
|
|
|
|
updateExportTime(Date.now());
|
|
|
|
}
|
|
|
|
}, [exportStats]);
|
2021-07-07 09:20:59 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setExportSize(props.usage);
|
|
|
|
console.log(props.usage);
|
|
|
|
}, [props.usage]);
|
|
|
|
|
2021-07-07 05:31:48 +00:00
|
|
|
const updateExportFolder = (newFolder) => {
|
|
|
|
setExportFolder(newFolder);
|
|
|
|
setData(LS_KEYS.EXPORT, { ...getData(LS_KEYS.EXPORT), folder: newFolder });
|
|
|
|
};
|
|
|
|
const updateExportState = (newState) => {
|
|
|
|
setExportState(newState);
|
2021-07-07 07:45:55 +00:00
|
|
|
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);
|
2021-07-07 05:31:48 +00:00
|
|
|
};
|
2021-07-07 09:20:59 +00:00
|
|
|
|
|
|
|
const selectExportDirectory = async () => {
|
|
|
|
const newFolder = await exportService.selectExportDirectory();
|
|
|
|
newFolder && updateExportFolder(newFolder);
|
|
|
|
};
|
|
|
|
|
|
|
|
const ExportDynamicState = () => {
|
|
|
|
switch (exportState) {
|
|
|
|
case ExportState.INIT:
|
|
|
|
return (
|
|
|
|
<ExportInit {...props}
|
|
|
|
exportFolder={exportFolder}
|
|
|
|
exportSize={exportSize}
|
|
|
|
updateExportFolder={updateExportFolder}
|
|
|
|
exportFiles={startExport}
|
|
|
|
updateExportState={updateExportState}
|
|
|
|
selectExportDirectory={selectExportDirectory}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case ExportState.INPROGRESS:
|
|
|
|
case ExportState.PAUSED:
|
|
|
|
return (
|
|
|
|
<ExportInProgress {...props}
|
|
|
|
exportFolder={exportFolder}
|
|
|
|
exportSize={exportSize}
|
|
|
|
exportState={exportState}
|
|
|
|
updateExportState={updateExportState}
|
|
|
|
exportStats={exportStats}
|
|
|
|
exportFiles={startExport}
|
|
|
|
cancelExport={exportService.cancelExport}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case ExportState.FINISHED:
|
|
|
|
return (
|
|
|
|
<ExportFinished
|
|
|
|
{...props}
|
|
|
|
exportFolder={exportFolder}
|
|
|
|
exportSize={exportSize}
|
|
|
|
updateExportFolder={updateExportFolder}
|
|
|
|
lastExportTime={lastExportTime}
|
|
|
|
exportStats={exportStats}
|
|
|
|
exportFiles={startExport}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
default: return (<></>);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<MessageDialog
|
|
|
|
show={props.show}
|
|
|
|
onHide={props.onHide}
|
|
|
|
attributes={{
|
|
|
|
title: constants.EXPORT_DATA,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div style={{ borderBottom: '1px solid #444', marginBottom: '20px', padding: '0 5%' }}>
|
|
|
|
<Row>
|
|
|
|
<Label width="40%">{constants.DESTINATION}</Label>
|
|
|
|
<Value width="60%">
|
|
|
|
{!exportFolder ?
|
|
|
|
(<Button variant={'outline-success'} onClick={selectExportDirectory}>{constants.SELECT_FOLDER}</Button>) :
|
|
|
|
(<>
|
|
|
|
<span style={{ overflow: 'hidden', direction: 'rtl', height: '1.5rem', width: '90%', whiteSpace: 'nowrap' }}>
|
|
|
|
{exportFolder}
|
|
|
|
</span>
|
2021-07-08 05:44:54 +00:00
|
|
|
<FolderIconWrapper onClick={selectExportDirectory} >
|
2021-07-07 09:20:59 +00:00
|
|
|
<FolderIcon />
|
2021-07-08 05:44:54 +00:00
|
|
|
</FolderIconWrapper>
|
2021-07-07 09:20:59 +00:00
|
|
|
</>)
|
|
|
|
}
|
|
|
|
</Value>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<Label width="40%">{constants.TOTAL_EXPORT_SIZE} </Label><Value width="60%">{exportSize ? `${exportSize} GB` : <InProgressIcon />}</Value>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
<ExportDynamicState />
|
|
|
|
</MessageDialog >
|
|
|
|
);
|
2021-07-06 09:20:05 +00:00
|
|
|
}
|