diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx index ed567c43e1..ec1e8d4cd9 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/src/components/views/dialogs/ExportDialog.tsx @@ -18,6 +18,8 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport"; import JSONExporter from "../../../utils/exportUtils/JSONExport"; import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport"; import { useStateCallback } from "../../../hooks/useStateCallback"; +import Modal from "../../../Modal"; +import QuestionDialog from "./QuestionDialog"; interface IProps extends IDialogProps { room: Room; @@ -27,13 +29,14 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { const [exportFormat, setExportFormat] = useState("HTML"); const [exportType, setExportType] = useState("TIMELINE"); const [includeAttachments, setAttachments] = useState(false); + const [isExporting, setExporting] = useState(false); const [numberOfMessages, setNumberOfMessages] = useState(100); const [sizeLimit, setSizeLimit] = useState(8); const [sizeLimitRef, messageCountRef] = [useRef(), useRef()]; const [Exporter, setExporter] = useStateCallback( null, async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => { - await Exporter?.export(); + await Exporter?.export().then(() => setExporting(false)); }, ); @@ -93,6 +96,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { return; } } + setExporting(true); await startExport(); }; @@ -160,8 +164,31 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { }; const onCancel = async () => { - await Exporter?.cancelExport(); - onFinished(false); + if (isExporting) { + const { finished } = Modal.createTrackedDialog( + "Warning", + "", + QuestionDialog, + { + title: _t("Warning"), + description: ( +
+

+ {_t(`Are you sure you want to stop exporting your data? + If you do, you'll need to start over.`)} +

+
+ ), + danger: true, + button: _t("Yes"), + }, + ); + const [proceed] = await finished; + if (!proceed) return; + await Exporter?.cancelExport(); + setExporting(false); + setExporter(null); + } else onFinished(false); }; const exportFormatOptions = Object.keys(exportFormats).map((format) => ({ @@ -195,7 +222,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { const sizePostFix = {_t("MB")}; - return ( + const ExportSettings = ( = ({ room, onFinished }) => { onFinished(false)} + /> + + ); + + const ExportProgress = ( + + ); + + return isExporting ? ExportProgress : ExportSettings; }; export default ExportDialog; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5e443b1474..4d8b9806ab 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2259,6 +2259,7 @@ "Number of messages must be a number": "Number of messages must be a number", "Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s", "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s", + "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.", "Number of messages": "Number of messages", "MB": "MB", "Export Chat": "Export Chat", @@ -2267,6 +2268,7 @@ "Size Limit": "Size Limit", "Include Attachments": "Include Attachments", "Export": "Export", + "Exporting you data...": "Exporting you data...", "Feedback sent": "Feedback sent", "Rate %(brand)s": "Rate %(brand)s", "Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",