Move export dialog to async-components

src/async-components/views/dialogs/ExportDialog.tsx

@@ -17,27 +17,27 @@ limitations under the License.
 import React, { useRef, useState } from "react";
 import { Room } from "matrix-js-sdk/src";
 import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
+import { IDialogProps } from "../../../components/views/dialogs/IDialogProps";
-import BaseDialog from "./BaseDialog";
+import BaseDialog from "../../../components/views/dialogs/BaseDialog";
-import DialogButtons from "../elements/DialogButtons";
+import DialogButtons from "../../../components/views/elements/DialogButtons";
-import Field from "../elements/Field";
+import Field from "../../../components/views/elements/Field";
-import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledRadioGroup from "../../../components/views/elements/StyledRadioGroup";
-import StyledCheckbox from "../elements/StyledCheckbox";
+import StyledCheckbox from "../../../components/views/elements/StyledCheckbox";
 import {
     ExportFormat,
     ExportType,
     textForFormat,
     textForType,
 } from "../../../utils/exportUtils/exportUtils";
-import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../../../components/views/elements/Validation";
 import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
 import JSONExporter from "../../../utils/exportUtils/JSONExport";
 import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
 import { useStateCallback } from "../../../hooks/useStateCallback";
 import Exporter from "../../../utils/exportUtils/Exporter";
-import Spinner from "../elements/Spinner";
+import Spinner from "../../../components/views/elements/Spinner";
 import Modal from "../../../Modal";
-import InfoDialog from "./InfoDialog";
+import InfoDialog from "../../../components/views/dialogs/InfoDialog";
 
 interface IProps extends IDialogProps {
     room: Room;
@@ -52,7 +52,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     const [sizeLimit, setSizeLimit] = useState<number | null>(8);
     const sizeLimitRef = useRef<Field>();
     const messageCountRef = useRef<Field>();
-    const exportProgressRef = useRef<HTMLParagraphElement>();
+    const [exportProgressText, setExportProgressText] = useState("Processing...");
     const [displayCancel, setCancelWarning] = useState(false);
     const [exportCancelled, setExportCancelled] = useState(false);
     const [exportSuccessful, setExportSuccessful] = useState(false);
@@ -78,7 +78,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                         room,
                         ExportType[exportType],
                         exportOptions,
-                        exportProgressRef,
+                        setExportProgressText,
                     ),
                 );
                 break;
@@ -88,7 +88,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                         room,
                         ExportType[exportType],
                         exportOptions,
-                        exportProgressRef,
+                        setExportProgressText,
                     ),
                 );
                 break;
@@ -98,7 +98,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                         room,
                         ExportType[exportType],
                         exportOptions,
-                        exportProgressRef,
+                        setExportProgressText,
                     ),
                 );
                 break;
@@ -368,8 +368,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                 { isExporting ? (
                     <div className="mx_ExportDialog_progress">
                         <Spinner w={24} h={24} />
-                        <p ref={exportProgressRef}>
+                        <p>
-                            { _t("Processing...") }
+                            { exportProgressText }
                         </p>
                         <DialogButtons
                             primaryButton={_t("Cancel")}

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -234,8 +234,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
     };
 
     const onRoomExportClick = async () => {
-        const { default: ExportDialog } = await import("../dialogs/ExportDialog");
+        const { default: ExportDialog } = await import("../../../async-components/views/dialogs/ExportDialog");
-
         Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
             room,
         });

src/utils/exportUtils/Exporter.ts

@@ -22,7 +22,6 @@ import { decryptFile } from "../DecryptFile";
 import { mediaFromContent } from "../../customisations/Media";
 import { formatFullDateNoDay } from "../../DateUtils";
 import { Direction, MatrixClient } from "matrix-js-sdk";
-import { MutableRefObject } from "react";
 import JSZip from "jszip";
 import { saveAs } from "file-saver";
 import { _t } from "../../languageHandler";
@@ -41,7 +40,7 @@ export default abstract class Exporter {
         protected room: Room,
         protected exportType: ExportType,
         protected exportOptions: IExportOptions,
-        protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
         if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
             exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
@@ -60,7 +59,7 @@ export default abstract class Exporter {
 
     protected updateProgress(progress: string, log = true, show = true): void {
         if (log) console.log(progress);
-        if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress;
+        if (show) this.setProgressText(progress);
     }
 
     protected addFile(filePath: string, blob: Blob): void {

src/utils/exportUtils/HtmlExport.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject } from "react";
+import React from "react";
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -47,9 +47,9 @@ export default class HTMLExporter extends Exporter {
         room: Room,
         exportType: ExportType,
         exportOptions: IExportOptions,
-        exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
-        super(room, exportType, exportOptions, exportProgressRef);
+        super(room, exportType, exportOptions, setProgressText);
         this.avatars = new Map<string, boolean>();
         this.permalinkCreator = new RoomPermalinkCreator(this.room);
         this.totalSize = 0;

src/utils/exportUtils/JSONExport.ts

@@ -32,9 +32,9 @@ export default class JSONExporter extends Exporter {
         room: Room,
         exportType: ExportType,
         exportOptions: IExportOptions,
-        exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
-        super(room, exportType, exportOptions, exportProgressRef);
+        super(room, exportType, exportOptions, setProgressText);
     }
 
     protected createJSONString(): string {

src/utils/exportUtils/PlainTextExport.ts

@@ -33,9 +33,9 @@ export default class PlainTextExporter extends Exporter {
         room: Room,
         exportType: ExportType,
         exportOptions: IExportOptions,
-        exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
-        super(room, exportType, exportOptions, exportProgressRef);
+        super(room, exportType, exportOptions, setProgressText);
         this.totalSize = 0;
         this.mediaOmitText = !this.exportOptions.attachmentsIncluded
             ? _t("Media omitted")

src/utils/exportUtils/exportCSS.ts

@@ -101,28 +101,16 @@ const getExportCSS = async (): Promise<string> => {
     from {bottom: 30px; opacity: 1;}
     to {bottom: 0; opacity: 0;}
   }
-  
+
-  .mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
-    content: '';
-    background-color: ${theme == 'light' ? "#ffffff": "inherit"};
-    width: 13px;
-    height: 15px;
-    position: absolute;
-    top: 8px;
-    left: 9px;
-  }
-  
   * {
     scroll-behavior: smooth !important;
   }
   
-  
   .mx_Export_EventWrapper:target {
     background: ${theme == 'light' ? "white" : "#15191E"};
     animation: mx_event_highlight_animation 2s linear;
   }
   
-  
   @keyframes mx_event_highlight_animation {
     0%,100% {
       background: ${theme == 'light' ? "white" : "#15191E"};
@@ -131,26 +119,16 @@ const getExportCSS = async (): Promise<string> => {
       background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
     }
   }
-  
+
   .mx_ReplyThread_Export {
     margin-top: -5px;
     margin-bottom: 5px;
   }
-  
-  .mx_RedactedBody img.mx_export_trash_icon {
-    height: 14px;
-    width: 14px;
-    background-color: ${theme == 'light' ? "#ffffff": "inherit"};
-    content: '';
-    position: absolute;
-    top: 1px;
-    left: 0;
-  }
 
   .mx_RedactedBody {
     padding-left: unset;
   }
-  
+
   img {
     white-space: nowrap;
     overflow: hidden;