Convert IncomingSasDialog to TS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/dialogs/IncomingSasDialog.tsx

@@ -15,12 +15,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import VerificationComplete from "../verification/VerificationComplete";
+import VerificationCancelled from "../verification/VerificationCancelled";
+import BaseAvatar from "../avatars/BaseAvatar";
+import Spinner from "../elements/Spinner";
+import VerificationShowSas from "../verification/VerificationShowSas";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
 
 const PHASE_START = 0;
 const PHASE_SHOW_SAS = 1;
@@ -28,13 +33,28 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
 const PHASE_VERIFIED = 3;
 const PHASE_CANCELLED = 4;
 
-@replaceableComponent("views.dialogs.IncomingSasDialog")
+interface IProps {
-export default class IncomingSasDialog extends React.Component {
+    verifier: any; // TODO types
-    static propTypes = {
+    onFinished: (confirmed: boolean) => void;
-        verifier: PropTypes.object.isRequired,
+}
-    };
 
-    constructor(props) {
+interface IState {
+    phase: number;
+    sasVerified: boolean;
+    opponentProfile: {
+        // eslint-disable-next-line camelcase
+        avatar_url?: string;
+        displayname?: string;
+    };
+    opponentProfileError: Error;
+    sas: any; // TODO types
+}
+
+@replaceableComponent("views.dialogs.IncomingSasDialog")
+export default class IncomingSasDialog extends React.Component<IProps, IState> {
+    private showSasEvent: any; // TODO: Types
+
+    constructor(props: IProps) {
         super(props);
 
         let phase = PHASE_START;
@@ -43,26 +63,27 @@ export default class IncomingSasDialog extends React.Component {
             phase = PHASE_CANCELLED;
         }
 
-        this._showSasEvent = null;
+        this.showSasEvent = null;
         this.state = {
             phase: phase,
             sasVerified: false,
             opponentProfile: null,
             opponentProfileError: null,
+            sas: null,
         };
-        this.props.verifier.on('show_sas', this._onVerifierShowSas);
+        this.props.verifier.on('show_sas', this.onVerifierShowSas);
-        this.props.verifier.on('cancel', this._onVerifierCancel);
+        this.props.verifier.on('cancel', this.onVerifierCancel);
-        this._fetchOpponentProfile();
+        this.fetchOpponentProfile();
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) {
             this.props.verifier.cancel('User cancel');
         }
-        this.props.verifier.removeListener('show_sas', this._onVerifierShowSas);
+        this.props.verifier.removeListener('show_sas', this.onVerifierShowSas);
     }
 
-    async _fetchOpponentProfile() {
+    private async fetchOpponentProfile(): Promise<void> {
         try {
             const prof = await MatrixClientPeg.get().getProfileInfo(
                 this.props.verifier.userId,
@@ -77,53 +98,51 @@ export default class IncomingSasDialog extends React.Component {
         }
     }
 
-    _onFinished = () => {
+    private onFinished = (): void => {
         this.props.onFinished(this.state.phase === PHASE_VERIFIED);
-    }
+    };
 
-    _onCancelClick = () => {
+    private onCancelClick = (): void => {
         this.props.onFinished(this.state.phase === PHASE_VERIFIED);
-    }
+    };
 
-    _onContinueClick = () => {
+    private onContinueClick = (): void => {
         this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM });
         this.props.verifier.verify().then(() => {
             this.setState({ phase: PHASE_VERIFIED });
         }).catch((e) => {
             console.log("Verification failed", e);
         });
-    }
+    };
 
-    _onVerifierShowSas = (e) => {
+    // TODO: Types
-        this._showSasEvent = e;
+    private onVerifierShowSas = (e): void => {
+        this.showSasEvent = e;
         this.setState({
             phase: PHASE_SHOW_SAS,
             sas: e.sas,
         });
-    }
+    };
 
-    _onVerifierCancel = (e) => {
+    // TODO: Types
+    private onVerifierCancel = (e): void => {
         this.setState({
             phase: PHASE_CANCELLED,
         });
-    }
+    };
 
-    _onSasMatchesClick = () => {
+    private onSasMatchesClick = (): void => {
-        this._showSasEvent.confirm();
+        this.showSasEvent.confirm();
         this.setState({
             phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
         });
-    }
+    };
 
-    _onVerifiedDoneClick = () => {
+    private onVerifiedDoneClick = (): void => {
         this.props.onFinished(true);
-    }
+    };
-
-    _renderPhaseStart() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Spinner = sdk.getComponent("views.elements.Spinner");
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
+    private renderPhaseStart(): JSX.Element {
         const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId();
 
         let profile;
@@ -190,27 +209,24 @@ export default class IncomingSasDialog extends React.Component {
                 <DialogButtons
                     primaryButton={_t('Continue')}
                     hasCancel={true}
-                    onPrimaryButtonClick={this._onContinueClick}
+                    onPrimaryButtonClick={this.onContinueClick}
-                    onCancel={this._onCancelClick}
+                    onCancel={this.onCancelClick}
                 />
             </div>
         );
     }
 
-    _renderPhaseShowSas() {
+    private renderPhaseShowSas(): JSX.Element {
-        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
         return <VerificationShowSas
-            sas={this._showSasEvent.sas}
+            sas={this.showSasEvent.sas}
-            onCancel={this._onCancelClick}
+            onCancel={this.onCancelClick}
-            onDone={this._onSasMatchesClick}
+            onDone={this.onSasMatchesClick}
             isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
             inDialog={true}
         />;
     }
 
-    _renderPhaseWaitForPartnerToConfirm() {
+    private renderPhaseWaitForPartnerToConfirm(): JSX.Element {
-        const Spinner = sdk.getComponent("views.elements.Spinner");
-
         return (
             <div>
                 <Spinner />
@@ -219,41 +235,38 @@ export default class IncomingSasDialog extends React.Component {
         );
     }
 
-    _renderPhaseVerified() {
+    private renderPhaseVerified(): JSX.Element {
-        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
+        return <VerificationComplete onDone={this.onVerifiedDoneClick} />;
-        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
     }
 
-    _renderPhaseCancelled() {
+    private renderPhaseCancelled(): JSX.Element {
-        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
+        return <VerificationCancelled onDone={this.onCancelClick} />;
-        return <VerificationCancelled onDone={this._onCancelClick} />;
     }
 
-    render() {
+    public render(): JSX.Element {
         let body;
         switch (this.state.phase) {
             case PHASE_START:
-                body = this._renderPhaseStart();
+                body = this.renderPhaseStart();
                 break;
             case PHASE_SHOW_SAS:
-                body = this._renderPhaseShowSas();
+                body = this.renderPhaseShowSas();
                 break;
             case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
-                body = this._renderPhaseWaitForPartnerToConfirm();
+                body = this.renderPhaseWaitForPartnerToConfirm();
                 break;
             case PHASE_VERIFIED:
-                body = this._renderPhaseVerified();
+                body = this.renderPhaseVerified();
                 break;
             case PHASE_CANCELLED:
-                body = this._renderPhaseCancelled();
+                body = this.renderPhaseCancelled();
                 break;
         }
 
-        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
         return (
             <BaseDialog
                 title={_t("Incoming Verification Request")}
-                onFinished={this._onFinished}
+                onFinished={this.onFinished}
                 fixedWidth={false}
             >
                 { body }