Iterate PR

res/css/views/dialogs/_ExportDialog.scss

@@ -1,22 +1,24 @@
-.mx_ExportDialog_subheading {
+.mx_ExportDialog {
-    font-size: $font-16px;
+    .mx_ExportDialog_subheading {
-    display: block;
+        font-size: $font-16px;
-    font-family: $font-family;
+        display: block;
-    font-weight: 600;
+        font-family: $font-family;
-    color: $primary-fg-color;
+        font-weight: $font-semi-bold;
-    margin-top: 18px;
+        color: $primary-fg-color;
-    margin-bottom: 12px;
+        margin-top: 18px;
-}
+        margin-bottom: 12px;
+    }
 
-.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
+    .mx_RadioButton > .mx_RadioButton_content {
-    margin-top: 5px;
+        margin-top: 5px;
-    margin-bottom: 5px;
+        margin-bottom: 5px;
-}
+    }
 
-.mx_ExportDialog .mx_Field {
+    .mx_Field {
-    width: 256px;
+        width: 256px;
-}
+    }
 
-.mx_ExportDialog .mx_Field_postfix {
+    .mx_Field_postfix {
-    padding: 9px 10px;
+        padding: 9px 10px;
+    }
 }

src/components/views/avatars/MemberAvatar.tsx

@@ -18,12 +18,13 @@ limitations under the License.
 import React from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+import { omit } from "lodash";
+
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import BaseAvatar from "./BaseAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
-import { omit } from "lodash";
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember;

src/components/views/dialogs/ExportDialog.tsx

@@ -18,6 +18,7 @@ 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";
 
 interface IProps extends IDialogProps {
     room: Room;
@@ -37,8 +38,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     const [exportSuccessful, setExportSuccessful] = useState(false);
     const [Exporter, setExporter] = useStateCallback<Exporter>(
         null,
-        async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
+        async (exporter: Exporter) => {
-            await Exporter?.export().then(() => {
+            await exporter?.export().then(() => {
                 if (!exportCancelled) setExportSuccessful(true);
             });
         },
@@ -115,7 +116,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             return { valid: false, feedback: _t("Size must be a number") };
         }
 
-        if (!(min <= parsedSize && parsedSize <= max)) {
+        if (min >= parsedSize || parsedSize >= max) {
             return {
                 valid: false,
                 feedback: _t(
@@ -148,7 +149,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             };
         }
 
-        if (!(min <= parsedSize && parsedSize <= max)) {
+        if (min >= parsedSize || parsedSize >= max) {
             return {
                 valid: false,
                 feedback: _t(
@@ -192,9 +193,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             </option>
         );
     });
-    let MessageCount = null;
+    let messageCount = null;
     if (exportType === exportTypes.LAST_N_MESSAGES) {
-        MessageCount = (
+        messageCount = (
             <Field
                 element="input"
                 type="number"
@@ -209,34 +210,45 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
         );
     }
 
-    const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
+    const sizePostFix = <span>{ _t("MB") }</span>;
 
-    const ExportCancelWarning = (
+    let componentToDisplay: JSX.Element;
-        <BaseDialog
+    if (exportCancelled) {
-            title={_t("Warning")}
+        // Display successful cancellation message
+        return <BaseDialog
+            title={_t("Export Cancelled")}
             className="mx_ExportDialog"
             contentId="mx_Dialog_content"
             onFinished={onFinished}
             fixedWidth={true}
         >
-            <p>
+            <p>{ _t("The export was cancelled successfully") }</p>
-                {" "}
+
-                {_t(
-                    "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
-                )}{" "}
-            </p>
             <DialogButtons
-                primaryButton={_t("Abort export process")}
+                primaryButton={_t("Okay")}
-                primaryButtonClass="danger"
+                hasCancel={false}
-                hasCancel={true}
+                onPrimaryButtonClick={onFinished}
-                cancelButton={_t("Continue")}
-                onCancel={() => setCancelWarning(false)}
-                onPrimaryButtonClick={confirmCanel}
             />
         </BaseDialog>
-    );
+    } else if (exportSuccessful) {
+        // Display successful export message
+        return <BaseDialog
+            title={_t("Export Successful")}
+            className="mx_ExportDialog"
+            contentId="mx_Dialog_content"
+            onFinished={onFinished}
+            fixedWidth={true}
+        >
+            <p>{ _t("Your messages were successfully exported") }</p>
 
-    const ExportSettings = (
+            <DialogButtons
+                primaryButton={_t("Okay")}
+                hasCancel={false}
+                onPrimaryButtonClick={onFinished}
+            />
+        </BaseDialog>
+    } else if (!isExporting) {
+        // Display export settings
         <BaseDialog
             title={_t("Export Chat")}
             className="mx_ExportDialog"
@@ -271,7 +283,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             >
                 { exportTypeOptions }
             </Field>
-            { MessageCount }
+            { messageCount }
 
             <span className="mx_ExportDialog_subheading">
                 { _t("Size Limit") }
@@ -303,46 +315,32 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                 onCancel={() => onFinished(false)}
             />
         </BaseDialog>
-    );
+    } else if (displayCancel) {
-
+        // Display cancel warning
-    const ExportSuccessful = (
         <BaseDialog
-            title={_t("Export Successful")}
+            title={_t("Warning")}
             className="mx_ExportDialog"
             contentId="mx_Dialog_content"
             onFinished={onFinished}
             fixedWidth={true}
         >
-            <p>{ _t("Your messages were successfully exported") }</p>
+            <p>
-
+                {_t(
+                    "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+                )}
+            </p>
             <DialogButtons
-                primaryButton={_t("Okay")}
+                primaryButton={_t("Abort export process")}
-                hasCancel={false}
+                primaryButtonClass="danger"
-                onPrimaryButtonClick={onFinished}
+                hasCancel={true}
+                cancelButton={_t("Continue")}
+                onCancel={() => setCancelWarning(false)}
+                onPrimaryButtonClick={confirmCanel}
             />
         </BaseDialog>
-    );
+    } else {
-
+        // Display progress dialog
-    const ExportCancelSuccess = (
+        return <BaseDialog
-        <BaseDialog
-            title={_t("Export Cancelled")}
-            className="mx_ExportDialog"
-            contentId="mx_Dialog_content"
-            onFinished={onFinished}
-            fixedWidth={true}
-        >
-            <p>{ _t("The export was cancelled successfully") }</p>
-
-            <DialogButtons
-                primaryButton={_t("Okay")}
-                hasCancel={false}
-                onPrimaryButtonClick={onFinished}
-            />
-        </BaseDialog>
-    );
-
-    const ExportProgress = (
-        <BaseDialog
             title={_t("Exporting your data...")}
             className="mx_ExportDialog"
             contentId="mx_Dialog_content"
@@ -356,14 +354,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                 onPrimaryButtonClick={onCancel}
             />
         </BaseDialog>
-    );
+    }
-
-    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;
 };

src/components/views/elements/EventListSummary.tsx

@@ -77,7 +77,7 @@ const EventListSummary: React.FC<IProps> = ({
         </React.Fragment>;
     } else {
         const avatars = summaryMembers.map((m, idx) =>
-            <MemberAvatar key={m.userId + idx} member={m} width={14} height={14} />);
+            <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
         body = (
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">