From 5bf64c2075e5e09183e89a392cb9478d703fb197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 5 Sep 2021 12:42:18 +0200
Subject: [PATCH] Convert SetEmailDialog to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../{SetEmailDialog.js => SetEmailDialog.tsx} | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)
 rename src/components/views/dialogs/{SetEmailDialog.js => SetEmailDialog.tsx} (81%)

diff --git a/src/components/views/dialogs/SetEmailDialog.js b/src/components/views/dialogs/SetEmailDialog.tsx
similarity index 81%
rename from src/components/views/dialogs/SetEmailDialog.js
rename to src/components/views/dialogs/SetEmailDialog.tsx
index 3dad3821fb..506399d15d 100644
--- a/src/components/views/dialogs/SetEmailDialog.js
+++ b/src/components/views/dialogs/SetEmailDialog.tsx
@@ -16,13 +16,26 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import * as Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from "../elements/Spinner";
+import ErrorDialog from "./ErrorDialog";
+import QuestionDialog from "./QuestionDialog";
+import BaseDialog from "./BaseDialog";
+import EditableText from "../elements/EditableText";
+
+interface IProps {
+    title: string;
+    onFinished: (confirmed: boolean) => void;
+}
+
+interface IState {
+    emailAddress: string;
+    emailBusy: boolean;
+}
 
 /*
  * Prompt the user to set an email address.
@@ -30,26 +43,25 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
  * On success, `onFinished(true)` is called.
  */
 @replaceableComponent("views.dialogs.SetEmailDialog")
-export default class SetEmailDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class SetEmailDialog extends React.Component<IProps, IState> {
+    private addThreepid: AddThreepid;
 
-    state = {
-        emailAddress: '',
-        emailBusy: false,
-    };
+    constructor(props: IProps) {
+        super(props);
 
-    onEmailAddressChanged = value => {
+        this.state = {
+            emailAddress: '',
+            emailBusy: false,
+        };
+    }
+
+    private onEmailAddressChanged = (value: string): void => {
         this.setState({
             emailAddress: value,
         });
     };
 
-    onSubmit = () => {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
+    private onSubmit = (): void => {
         const emailAddress = this.state.emailAddress;
         if (!Email.looksValid(emailAddress)) {
             Modal.createTrackedDialog('Invalid Email Address', '', ErrorDialog, {
@@ -58,8 +70,8 @@ export default class SetEmailDialog extends React.Component {
             });
             return;
         }
-        this._addThreepid = new AddThreepid();
-        this._addThreepid.addEmailAddress(emailAddress).then(() => {
+        this.addThreepid = new AddThreepid();
+        this.addThreepid.addEmailAddress(emailAddress).then(() => {
             Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
                 title: _t("Verification Pending"),
                 description: _t(
@@ -80,11 +92,11 @@ export default class SetEmailDialog extends React.Component {
         this.setState({ emailBusy: true });
     };
 
-    onCancelled = () => {
+    private onCancelled = (): void => {
         this.props.onFinished(false);
     };
 
-    onEmailDialogFinished = ok => {
+    private onEmailDialogFinished = (ok: boolean): void => {
         if (ok) {
             this.verifyEmailAddress();
         } else {
@@ -92,13 +104,12 @@ export default class SetEmailDialog extends React.Component {
         }
     };
 
-    verifyEmailAddress() {
-        this._addThreepid.checkEmailLinkClicked().then(() => {
+    private verifyEmailAddress(): void {
+        this.addThreepid.checkEmailLinkClicked().then(() => {
             this.props.onFinished(true);
         }, (err) => {
             this.setState({ emailBusy: false });
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 const message = _t("Unable to verify email address.") + " " +
                     _t("Please check your email and click on the link it contains. Once this is done, click continue.");
                 Modal.createTrackedDialog('Verification Pending', '3pid Auth Failed', QuestionDialog, {
@@ -108,7 +119,6 @@ export default class SetEmailDialog extends React.Component {
                     onFinished: this.onEmailDialogFinished,
                 });
             } else {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Unable to verify email address: " + err);
                 Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
                     title: _t("Unable to verify email address."),
@@ -118,11 +128,7 @@ export default class SetEmailDialog extends React.Component {
         });
     }
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const EditableText = sdk.getComponent('elements.EditableText');
-
+    public render(): JSX.Element {
         const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
             initialValue={this.state.emailAddress}
             className="mx_SetEmailDialog_email_input"