From 64b683a0df6639f0013ce79f5bee53db78f0206d Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 28 Jun 2021 12:20:41 +0530 Subject: [PATCH] Add cancel warning and progress completion modals --- src/components/views/dialogs/ExportDialog.tsx | 122 +++++++++++++----- src/i18n/strings/en_EN.json | 10 +- 2 files changed, 97 insertions(+), 35 deletions(-) diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx index ec1e8d4cd9..e5454b1c18 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/src/components/views/dialogs/ExportDialog.tsx @@ -18,25 +18,28 @@ 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; } const ExportDialog: React.FC = ({ room, onFinished }) => { - const [exportFormat, setExportFormat] = useState("HTML"); - const [exportType, setExportType] = useState("TIMELINE"); + const [exportFormat, setExportFormat] = useState(exportFormats.HTML); + const [exportType, setExportType] = useState(exportTypes.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 [displayCancel, setCancelWarning] = useState(false); + const [exportCancelled, setExportCancelled] = useState(false); + const [exportSuccessful, setExportSuccessful] = useState(false); const [Exporter, setExporter] = useStateCallback( null, async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => { - await Exporter?.export().then(() => setExporting(false)); + await Exporter?.export().then(() => { + if (!exportCancelled) setExportSuccessful(true); + }); }, ); @@ -164,31 +167,16 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { }; const onCancel = async () => { - 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(); + if (isExporting) setCancelWarning(true); + else onFinished(false); + }; + + const confirmCanel = async () => { + await Exporter?.cancelExport().then(() => { + setExportCancelled(true); setExporting(false); setExporter(null); - } else onFinished(false); + }); }; const exportFormatOptions = Object.keys(exportFormats).map((format) => ({ @@ -222,6 +210,31 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { const sizePostFix = {_t("MB")}; + const ExportCancelWarning = ( + +

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

+ setCancelWarning(false)} + onPrimaryButtonClick={confirmCanel} + /> + + ); + const ExportSettings = ( = ({ room, onFinished }) => { setExportFormat(key)} + onChange={(key) => setExportFormat(exportFormats[key])} definitions={exportFormatOptions} /> @@ -252,7 +265,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { element="select" value={exportType} onChange={(e) => { - setExportType(e.target.value); + setExportType(exportTypes[e.target.value]); }} > {exportTypeOptions} @@ -291,9 +304,45 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { ); + const ExportSuccessful = ( + +

{_t("Your messages were successfully exported")}

+ + + + ); + + const ExportCancelSuccess = ( + +

{_t("The export was cancelled successfully")}

+ + + + ); + const ExportProgress = ( = ({ room, onFinished }) => { primaryButton={_t("Cancel")} primaryButtonClass="danger" hasCancel={false} - onCancel={onCancel} + onPrimaryButtonClick={onCancel} /> ); - return isExporting ? ExportProgress : ExportSettings; + let componentToDisplay: JSX.Element; + if (exportCancelled) componentToDisplay = ExportCancelSuccess; + else if (exportSuccessful) componentToDisplay = ExportSuccessful; + else if (!isExporting) componentToDisplay = ExportSettings; + else if (displayCancel) componentToDisplay = ExportCancelWarning; + else componentToDisplay = ExportProgress; + + return componentToDisplay; }; export default ExportDialog; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4d8b9806ab..7489846008 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2259,16 +2259,22 @@ "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", + "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", + "Abort export process": "Abort export process", "Export Chat": "Export Chat", "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline", "Format": "Format", "Size Limit": "Size Limit", "Include Attachments": "Include Attachments", "Export": "Export", - "Exporting you data...": "Exporting you data...", + "Export Successful": "Export Successful", + "Your messages were successfully exported": "Your messages were successfully exported", + "Okay": "Okay", + "Export Cancelled": "Export Cancelled", + "The export was cancelled successfully": "The export was cancelled successfully", + "Exporting your data...": "Exporting your 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.",