Add validation

src/components/views/dialogs/ExportDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Room } from "matrix-js-sdk/src";
 import { _t } from "../../../languageHandler";
 import { IDialogProps } from "./IDialogProps";
@@ -13,6 +13,7 @@ import exportConversationalHistory, {
     textForFormat,
     textForType,
 } from "../../../utils/exportUtils/exportUtils";
+import { IFieldState, IValidationResult } from "../elements/Validation";
 
 interface IProps extends IDialogProps {
     room: Room;
@@ -22,10 +23,26 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     const [exportFormat, setExportFormat] = useState("HTML");
     const [exportType, setExportType] = useState("TIMELINE");
     const [includeAttachments, setAttachments] = useState(false);
-    const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
+    const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
     const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+    const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
 
     const onExportClick = async () => {
+        const isValidSize = await sizeLimitRef.current.validate({
+            focused: false,
+        });
+        if (!isValidSize) {
+            sizeLimitRef.current.validate({ focused: true });
+            return;
+        }
+        if (exportType === exportTypes.LAST_N_MESSAGES) {
+            const isValidNumberOfMessages =
+                await messageCountRef.current.validate({ focused: false });
+            if (!isValidNumberOfMessages) {
+                messageCountRef.current.validate({ focused: true });
+                return;
+            }
+        }
         await exportConversationalHistory(
             room,
             exportFormats[exportFormat],
@@ -38,6 +55,69 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
         );
     };
 
+    const onValidateSize = async ({
+        value,
+    }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+        const parsedSize = parseFloat(value);
+        const min = 1;
+        const max = 4000;
+
+        if (isNaN(parsedSize)) {
+            return { valid: false, feedback: _t("Size must be a number") };
+        }
+
+        if (!(min <= parsedSize && parsedSize <= max)) {
+            return {
+                valid: false,
+                feedback: _t(
+                    "Size can only be between %(min)s MB and %(max)s MB",
+                    { min, max },
+                ),
+            };
+        }
+
+        return {
+            valid: true,
+            feedback: _t("Enter size between %(min)s MB and %(max)s MB", {
+                min,
+                max,
+            }),
+        };
+    };
+
+    const onValidateNumberOfMessages = async ({
+        value,
+    }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+        const parsedSize = parseFloat(value);
+        const min = 1;
+        const max = 10 ** 8;
+
+        if (isNaN(parsedSize)) {
+            return {
+                valid: false,
+                feedback: _t("Number of messages must be a number"),
+            };
+        }
+
+        if (!(min <= parsedSize && parsedSize <= max)) {
+            return {
+                valid: false,
+                feedback: _t(
+                    "Number of messages can only be between %(min)s and %(max)s",
+                    { min, max },
+                ),
+            };
+        }
+
+        return {
+            valid: true,
+            feedback: _t("Enter a number between %(min)s and %(max)s", {
+                min,
+                max,
+            }),
+        };
+    };
+
     const onCancel = () => {
         onFinished(false);
     };
@@ -54,23 +134,24 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             </option>
         );
     });
-
     let MessageCount = null;
     if (exportType === exportTypes.LAST_N_MESSAGES) {
         MessageCount = (
             <Field
                 element="input"
+                type="number"
                 value={numberOfMessages}
+                ref={messageCountRef}
+                onValidate={onValidateNumberOfMessages}
                 label={_t("Number of messages")}
                 onChange={(e) => {
                     setNumberOfMessages(parseInt(e.target.value));
                 }}
-                type="number"
             />
         );
     }
 
-    const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
+    const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
 
     return (
         <BaseDialog
@@ -107,7 +188,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             >
                 {exportTypeOptions}
             </Field>
-            { MessageCount }
+            {MessageCount}
 
             <span className="mx_ExportDialog_subheading">
                 {_t("Size Limit")}
@@ -116,9 +197,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             <Field
                 type="number"
                 autoComplete="off"
+                onValidate={onValidateSize}
+                element="input"
+                ref={sizeLimitRef}
                 value={sizeLimit}
                 postfixComponent={sizePostFix}
-                onChange={(e) => setSizeLimit(e.target.value)}
+                onChange={(e) => setSizeLimit(parseInt(e.target.value))}
             />
 
             <StyledCheckbox

src/i18n/strings/en_EN.json

@@ -2255,6 +2255,11 @@
     "There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
     "Update community": "Update community",
     "An error has occurred.": "An error has occurred.",
+    "Size can only be between %(min)s MB and %(max)s MB": "Size can only be between %(min)s MB and %(max)s MB",
+    "Enter size between %(min)s MB and %(max)s MB": "Enter size between %(min)s MB and %(max)s MB",
+    "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",
     "Number of messages": "Number of messages",
     "MB": "MB",
     "Export Chat": "Export Chat",