Convert InteractiveAuthDialog to TS

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

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -17,38 +17,37 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
-import { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
+import InteractiveAuth, { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
 import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import BaseDialog from "./BaseDialog";
+import { IAuthData } from "matrix-js-sdk/src/interactive-auth";
 
-@replaceableComponent("views.dialogs.InteractiveAuthDialog")
+interface IProps {
-export default class InteractiveAuthDialog extends React.Component {
-    static propTypes = {
     // matrix client to use for UI auth requests
-        matrixClient: PropTypes.object.isRequired,
+    matrixClient: MatrixClient;
 
     // response from initial request. If not supplied, will do a request on
     // mount.
-        authData: PropTypes.shape({
+    authData?: {
-            flows: PropTypes.array,
+        flows: [];
-            params: PropTypes.object,
+        params: {};
-            session: PropTypes.string,
+        session: string;
-        }),
+    };
 
     // callback
-        makeRequest: PropTypes.func.isRequired,
+    makeRequest: (auth: IAuthData) => Promise<IAuthData>;
 
-        onFinished: PropTypes.func.isRequired,
+    onFinished: (confirmed: boolean, result?) => void;
 
     // Optional title and body to show when not showing a particular stage
-        title: PropTypes.string,
+    title?: string;
-        body: PropTypes.string,
+    body?: string;
 
     // Optional title and body pairs for particular stages and phases within
     // those stages. Object structure/example is:
@@ -68,18 +67,32 @@ export default class InteractiveAuthDialog extends React.Component {
     // }
     //
     // Default is defined in _getDefaultDialogAesthetics()
-        aestheticsForStagePhases: PropTypes.object,
+    aestheticsForStagePhases?: {};
-    };
+}
 
-    state = {
+interface IState {
+    authError: Error;
+
+    // See _onUpdateStagePhase()
+    uiaStage: number;
+    uiaStagePhase: number;
+}
+
+@replaceableComponent("views.dialogs.InteractiveAuthDialog")
+export default class InteractiveAuthDialog extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
             authError: null,
 
             // See _onUpdateStagePhase()
             uiaStage: null,
             uiaStagePhase: null,
         };
+    }
 
-    _getDefaultDialogAesthetics() {
+    private getDefaultDialogAesthetics() {
         const ssoAesthetics = {
             [SSOAuthEntry.PHASE_PREAUTH]: {
                 title: _t("Use Single Sign On to continue"),
@@ -101,7 +114,7 @@ export default class InteractiveAuthDialog extends React.Component {
         };
     }
 
-    _onAuthFinished = (success, result) => {
+    private onAuthFinished = (success: boolean, result: Error): void => {
         if (success) {
             this.props.onFinished(true, result);
         } else {
@@ -115,19 +128,16 @@ export default class InteractiveAuthDialog extends React.Component {
         }
     };
 
-    _onUpdateStagePhase = (newStage, newPhase) => {
+    private onUpdateStagePhase = (newStage, newPhase): void => {
         // We copy the stage and stage phase params into state for title selection in render()
         this.setState({ uiaStage: newStage, uiaStagePhase: newPhase });
     };
 
-    _onDismissClick = () => {
+    private onDismissClick = (): void => {
         this.props.onFinished(false);
     };
 
-    render() {
+    public render(): JSX.Element {
-        const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
         // Let's pick a title, body, and other params text that we'll show to the user. The order
         // is most specific first, so stagePhase > our props > defaults.
 
@@ -135,7 +145,7 @@ export default class InteractiveAuthDialog extends React.Component {
         let body = this.state.authError ? null : this.props.body;
         let continueText = null;
         let continueKind = null;
-        const dialogAesthetics = this.props.aestheticsForStagePhases || this._getDefaultDialogAesthetics();
+        const dialogAesthetics = this.props.aestheticsForStagePhases || this.getDefaultDialogAesthetics();
         if (!this.state.authError && dialogAesthetics) {
             if (dialogAesthetics[this.state.uiaStage]) {
                 const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase];
@@ -152,9 +162,9 @@ export default class InteractiveAuthDialog extends React.Component {
                 <div id='mx_Dialog_content'>
                     <div role="alert">{ this.state.authError.message || this.state.authError.toString() }</div>
                     <br />
-                    <AccessibleButton onClick={this._onDismissClick}
+                    <AccessibleButton onClick={this.onDismissClick}
                         className="mx_GeneralButton"
-                        autoFocus="true"
+                        autoFocus={true}
                     >
                         { _t("Dismiss") }
                     </AccessibleButton>
@@ -165,12 +175,11 @@ export default class InteractiveAuthDialog extends React.Component {
                 <div id='mx_Dialog_content'>
                     { body }
                     <InteractiveAuth
-                        ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
                         makeRequest={this.props.makeRequest}
-                        onAuthFinished={this._onAuthFinished}
+                        onAuthFinished={this.onAuthFinished}
-                        onStagePhaseChange={this._onUpdateStagePhase}
+                        onStagePhaseChange={this.onUpdateStagePhase}
                         continueText={continueText}
                         continueKind={continueKind}
                     />