Merge pull request #5912 from matrix-org/jryans/convert-flow-to-ts

Convert some Flow-typed files to TypeScript

src/@types/global.d.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -40,6 +40,8 @@ import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
 import {SpaceStoreClass} from "../stores/SpaceStore";
 import {VoiceRecording} from "../voice/VoiceRecording";
+import TypingStore from "../stores/TypingStore";
+import { EventIndexPeg } from "../indexing/EventIndexPeg";
 
 declare global {
     interface Window {
@@ -72,11 +74,15 @@ declare global {
         mxVoipUserMapper: VoipUserMapper;
         mxSpaceStore: SpaceStoreClass;
         mxVoiceRecorder: typeof VoiceRecording;
+        mxTypingStore: TypingStore;
+        mxEventIndexPeg: EventIndexPeg;
     }
 
     interface Document {
         // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
         hasStorageAccess?: () => Promise<boolean>;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccess
+        requestStorageAccess?: () => Promise<undefined>;
 
         // Safari & IE11 only have this prefixed: we used prefixed versions
         // previously so let's continue to support them for now

src/CallHandler.tsx

@@ -673,7 +673,7 @@ export default class CallHandler {
             call.placeScreenSharingCall(
                 remoteElement,
                 localElement,
-                async () : Promise<DesktopCapturerSource> => {
+                async (): Promise<DesktopCapturerSource> => {
                     const {finished} = Modal.createDialog(DesktopCapturerSourcePicker);
                     const [source] = await finished;
                     return source;

src/KeyBindingsManager.ts

@@ -231,8 +231,10 @@ export class KeyBindingsManager {
     /**
      * Finds a matching KeyAction for a given KeyboardEvent
      */
-    private getAction<T extends string>(getters: KeyBindingGetter<T>[], ev: KeyboardEvent | React.KeyboardEvent)
+    private getAction<T extends string>(
-        : T | undefined {
+        getters: KeyBindingGetter<T>[],
+        ev: KeyboardEvent | React.KeyboardEvent,
+    ): T | undefined {
         for (const getter of getters) {
             const bindings = getter();
             const binding = bindings.find(it => isKeyComboMatch(ev, it.keyCombo, isMac));

src/Login.ts

@@ -1,9 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -59,7 +56,7 @@ export type LoginFlow = ISSOFlow | IPasswordFlow;
 // TODO: Move this to JS SDK
 /* eslint-disable camelcase */
 interface ILoginParams {
-    identifier?: string;
+    identifier?: object;
     password?: string;
     token?: string;
     device_id?: string;

src/ScalarAuthClient.ts

@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2016, 2019, 2021 The Matrix.org Foundation C.I.C.
-Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,13 +16,14 @@ limitations under the License.
 
 import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
-import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
+import { Service, startTermsFlow, TermsInteractionCallback, TermsNotSignedError } from './Terms';
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import request from "browser-request";
 
 import SdkConfig from "./SdkConfig";
 import {WidgetType} from "./widgets/WidgetType";
 import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
@@ -31,9 +31,11 @@ const imApiVersion = "1.1";
 // TODO: Generify the name of this class and all components within - it's not just for Scalar.
 
 export default class ScalarAuthClient {
-    constructor(apiUrl, uiUrl) {
+    private scalarToken: string;
-        this.apiUrl = apiUrl;
+    private termsInteractionCallback: TermsInteractionCallback;
-        this.uiUrl = uiUrl;
+    private isDefaultManager: boolean;
+
+    constructor(private apiUrl: string, private uiUrl: string) {
         this.scalarToken = null;
         // `undefined` to allow `startTermsFlow` to fallback to a default
         // callback if this is unset.
@@ -46,7 +48,7 @@ export default class ScalarAuthClient {
         this.isDefaultManager = apiUrl === configApiUrl && configUiUrl === uiUrl;
     }
 
-    _writeTokenToStore() {
+    private writeTokenToStore() {
         window.localStorage.setItem("mx_scalar_token_at_" + this.apiUrl, this.scalarToken);
         if (this.isDefaultManager) {
             // We remove the old token from storage to migrate upwards. This is safe
@@ -56,7 +58,7 @@ export default class ScalarAuthClient {
         }
     }
 
-    _readTokenFromStore() {
+    private readTokenFromStore(): string {
         let token = window.localStorage.getItem("mx_scalar_token_at_" + this.apiUrl);
         if (!token && this.isDefaultManager) {
             token = window.localStorage.getItem("mx_scalar_token");
@@ -64,33 +66,33 @@ export default class ScalarAuthClient {
         return token;
     }
 
-    _readToken() {
+    private readToken(): string {
         if (this.scalarToken) return this.scalarToken;
-        return this._readTokenFromStore();
+        return this.readTokenFromStore();
     }
 
     setTermsInteractionCallback(callback) {
         this.termsInteractionCallback = callback;
     }
 
-    connect() {
+    connect(): Promise<void> {
         return this.getScalarToken().then((tok) => {
             this.scalarToken = tok;
         });
     }
 
-    hasCredentials() {
+    hasCredentials(): boolean {
         return this.scalarToken != null; // undef or null
     }
 
     // Returns a promise that resolves to a scalar_token string
-    getScalarToken() {
+    getScalarToken(): Promise<string> {
-        const token = this._readToken();
+        const token = this.readToken();
 
         if (!token) {
             return this.registerForToken();
         } else {
-            return this._checkToken(token).catch((e) => {
+            return this.checkToken(token).catch((e) => {
                 if (e instanceof TermsNotSignedError) {
                     // retrying won't help this
                     throw e;
@@ -100,7 +102,7 @@ export default class ScalarAuthClient {
         }
     }
 
-    _getAccountName(token) {
+    private getAccountName(token: string): Promise<string> {
         const url = this.apiUrl + "/account";
 
         return new Promise(function(resolve, reject) {
@@ -125,8 +127,8 @@ export default class ScalarAuthClient {
         });
     }
 
-    _checkToken(token) {
+    private checkToken(token: string): Promise<string> {
-        return this._getAccountName(token).then(userId => {
+        return this.getAccountName(token).then(userId => {
             const me = MatrixClientPeg.get().getUserId();
             if (userId !== me) {
                 throw new Error("Scalar token is owned by someone else: " + me);
@@ -154,7 +156,7 @@ export default class ScalarAuthClient {
                 parsedImRestUrl.pathname = '';
                 return startTermsFlow([new Service(
                     SERVICE_TYPES.IM,
-                    parsedImRestUrl.format(),
+                    url.format(parsedImRestUrl),
                     token,
                 )], this.termsInteractionCallback).then(() => {
                     return token;
@@ -165,22 +167,22 @@ export default class ScalarAuthClient {
         });
     }
 
-    registerForToken() {
+    registerForToken(): Promise<string> {
         // Get openid bearer token from the HS as the first part of our dance
         return MatrixClientPeg.get().getOpenIdToken().then((tokenObject) => {
             // Now we can send that to scalar and exchange it for a scalar token
             return this.exchangeForScalarToken(tokenObject);
         }).then((token) => {
             // Validate it (this mostly checks to see if the IM needs us to agree to some terms)
-            return this._checkToken(token);
+            return this.checkToken(token);
         }).then((token) => {
             this.scalarToken = token;
-            this._writeTokenToStore();
+            this.writeTokenToStore();
             return token;
         });
     }
 
-    exchangeForScalarToken(openidTokenObject) {
+    exchangeForScalarToken(openidTokenObject: any): Promise<string> {
         const scalarRestUrl = this.apiUrl;
 
         return new Promise(function(resolve, reject) {
@@ -194,7 +196,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body || !body.scalar_token) {
                     reject(new Error("Missing scalar_token in response"));
                 } else {
@@ -204,7 +206,7 @@ export default class ScalarAuthClient {
         });
     }
 
-    getScalarPageTitle(url) {
+    getScalarPageTitle(url: string): Promise<string> {
         let scalarPageLookupUrl = this.apiUrl + '/widgets/title_lookup';
         scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
         scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
@@ -218,7 +220,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body) {
                     reject(new Error("Missing page title in response"));
                 } else {
@@ -240,10 +242,10 @@ export default class ScalarAuthClient {
      * @param  {string} widgetId   The widget ID to disable assets for
      * @return {Promise}           Resolves on completion
      */
-    disableWidgetAssets(widgetType: WidgetType, widgetId) {
+    disableWidgetAssets(widgetType: WidgetType, widgetId: string): Promise<void> {
         let url = this.apiUrl + '/widgets/set_assets_state';
         url = this.getStarterLink(url);
-        return new Promise((resolve, reject) => {
+        return new Promise<void>((resolve, reject) => {
             request({
                 method: 'GET', // XXX: Actions shouldn't be GET requests
                 uri: url,
@@ -257,7 +259,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body) {
                     reject(new Error("Failed to set widget assets state"));
                 } else {
@@ -267,7 +269,7 @@ export default class ScalarAuthClient {
         });
     }
 
-    getScalarInterfaceUrlForRoom(room, screen, id) {
+    getScalarInterfaceUrlForRoom(room: Room, screen: string, id: string): string {
         const roomId = room.roomId;
         const roomName = room.name;
         let url = this.uiUrl;
@@ -284,7 +286,7 @@ export default class ScalarAuthClient {
         return url;
     }
 
-    getStarterLink(starterLinkUrl) {
+    getStarterLink(starterLinkUrl: string): string {
         return starterLinkUrl + "?scalar_token=" + encodeURIComponent(this.scalarToken);
     }
 }

src/Terms.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from 'classnames';
 
 import {MatrixClientPeg} from './MatrixClientPeg';
-import * as sdk from './';
+import * as sdk from '.';
 import Modal from './Modal';
 
 export class TermsNotSignedError extends Error {}
@@ -32,13 +32,30 @@ export class Service {
      * @param {string} baseUrl The Base URL of the service (ie. before '/_matrix')
      * @param {string} accessToken The user's access token for the service
      */
-    constructor(serviceType, baseUrl, accessToken) {
+    constructor(public serviceType: string, public baseUrl: string, public accessToken: string) {
-        this.serviceType = serviceType;
-        this.baseUrl = baseUrl;
-        this.accessToken = accessToken;
     }
 }
 
+interface Policy {
+    // @ts-ignore: No great way to express indexed types together with other keys
+    version: string;
+    [lang: string]: {
+        url: string;
+    };
+}
+type Policies = {
+    [policy: string]: Policy,
+};
+
+export type TermsInteractionCallback = (
+    policiesAndServicePairs: {
+        service: Service,
+        policies: Policies,
+    }[],
+    agreedUrls: string[],
+    extraClassNames?: string,
+) => Promise<string[]>;
+
 /**
  * Start a flow where the user is presented with terms & conditions for some services
  *
@@ -51,8 +68,8 @@ export class Service {
  *     if they cancel.
  */
 export async function startTermsFlow(
-    services,
+    services: Service[],
-    interactionCallback = dialogTermsInteractionCallback,
+    interactionCallback: TermsInteractionCallback = dialogTermsInteractionCallback,
 ) {
     const termsPromises = services.map(
         (s) => MatrixClientPeg.get().getTerms(s.serviceType, s.baseUrl),
@@ -77,7 +94,7 @@ export async function startTermsFlow(
      * }
      */
 
-    const terms = await Promise.all(termsPromises);
+    const terms: { policies: Policies }[] = await Promise.all(termsPromises);
     const policiesAndServicePairs = terms.map((t, i) => { return { 'service': services[i], 'policies': t.policies }; });
 
     // fetch the set of agreed policy URLs from account data
@@ -158,10 +175,13 @@ export async function startTermsFlow(
 }
 
 export function dialogTermsInteractionCallback(
-    policiesAndServicePairs,
+    policiesAndServicePairs: {
-    agreedUrls,
+        service: Service,
-    extraClassNames,
+        policies: { [policy: string]: Policy },
-) {
+    }[],
+    agreedUrls: string[],
+    extraClassNames?: string,
+): Promise<string[]> {
     return new Promise((resolve, reject) => {
         console.log("Terms that need agreement", policiesAndServicePairs);
         const TermsDialog = sdk.getComponent("views.dialogs.TermsDialog");

src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../../index';
-import PropTypes from 'prop-types';
 import { _t } from '../../../../languageHandler';
 import SdkConfig from '../../../../SdkConfig';
 import SettingsStore from "../../../../settings/SettingsStore";
@@ -26,14 +25,23 @@ import {formatBytes, formatCountLong} from "../../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../../indexing/EventIndexPeg";
 import {SettingLevel} from "../../../../settings/SettingLevel";
 
+interface IProps {
+    onFinished: (confirmed: boolean) => void;
+}
+
+interface IState {
+    eventIndexSize: number;
+    eventCount: number;
+    crawlingRoomsCount: number;
+    roomCount: number;
+    currentRoom: string;
+    crawlerSleepTime: number;
+}
+
 /*
  * Allows the user to introspect the event index state and disable it.
  */
-export default class ManageEventIndexDialog extends React.Component {
+export default class ManageEventIndexDialog extends React.Component<IProps, IState> {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
     constructor(props) {
         super(props);
 
@@ -84,7 +92,7 @@ export default class ManageEventIndexDialog extends React.Component {
         }
     }
 
-    async componentDidMount(): void {
+    async componentDidMount(): Promise<void> {
         let eventIndexSize = 0;
         let crawlingRoomsCount = 0;
         let roomCount = 0;
@@ -123,14 +131,14 @@ export default class ManageEventIndexDialog extends React.Component {
         });
     }
 
-    _onDisable = async () => {
+    private onDisable = async () => {
         Modal.createTrackedDialogAsync("Disable message search", "Disable message search",
             import("./DisableEventIndexDialog"),
             null, null, /* priority = */ false, /* static = */ true,
         );
     };
 
-    _onCrawlerSleepTimeChange = (e) => {
+    private onCrawlerSleepTimeChange = (e) => {
         this.setState({crawlerSleepTime: e.target.value});
         SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
     };
@@ -144,7 +152,7 @@ export default class ManageEventIndexDialog extends React.Component {
             crawlerState = _t("Not currently indexing messages for any room.");
         } else {
             crawlerState = (
-                    _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
+                _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
             );
         }
 
@@ -169,7 +177,7 @@ export default class ManageEventIndexDialog extends React.Component {
                         label={_t('Message downloading sleep time(ms)')}
                         type='number'
                         value={this.state.crawlerSleepTime}
-                        onChange={this._onCrawlerSleepTimeChange} />
+                        onChange={this.onCrawlerSleepTimeChange} />
                 </div>
             </div>
         );
@@ -188,7 +196,7 @@ export default class ManageEventIndexDialog extends React.Component {
                     onPrimaryButtonClick={this.props.onFinished}
                     primaryButtonClass="primary"
                     cancelButton={_t("Disable")}
-                    onCancel={this._onDisable}
+                    onCancel={this.onDisable}
                     cancelButtonClass="danger"
                 />
             </BaseDialog>

src/components/structures/auth/Login.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2017, 2018, 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -94,7 +94,7 @@ interface IState {
     // be seeing.
     serverIsAlive: boolean;
     serverErrorIsFatal: boolean;
-    serverDeadError: string;
+    serverDeadError?: ReactNode;
 }
 
 /*

src/components/structures/auth/Registration.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2017, 2018, 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -95,7 +95,7 @@ interface IState {
     // be seeing.
     serverIsAlive: boolean;
     serverErrorIsFatal: boolean;
-    serverDeadError: string;
+    serverDeadError?: ReactNode;
 
     // Our matrix client - part of state because we can't render the UI auth
     // component without it.

src/components/structures/auth/SoftLogout.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,14 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t} from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import * as Lifecycle from '../../../Lifecycle';
 import Modal from '../../../Modal';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {sendLoginRequest} from "../../../Login";
+import {ISSOFlow, LoginFlow, sendLoginRequest} from "../../../Login";
 import AuthPage from "../../views/auth/AuthPage";
 import {SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY} from "../../../BasePlatform";
 import SSOButtons from "../../views/elements/SSOButtons";
@@ -42,26 +41,38 @@ const FLOWS_TO_VIEWS = {
     "m.login.sso": LOGIN_VIEW.SSO,
 };
 
-@replaceableComponent("structures.auth.SoftLogout")
+interface IProps {
-export default class SoftLogout extends React.Component {
+    // Query parameters from MatrixChat
-    static propTypes = {
+    realQueryParams: {
-        // Query parameters from MatrixChat
+        loginToken?: string;
-        realQueryParams: PropTypes.object, // {loginToken}
-
-        // Called when the SSO login completes
-        onTokenLoginCompleted: PropTypes.func,
     };
+    fragmentAfterLogin?: string;
 
-    constructor() {
+    // Called when the SSO login completes
-        super();
+    onTokenLoginCompleted: () => void,
+}
+
+interface IState {
+    loginView: number;
+    keyBackupNeeded: boolean;
+    busy: boolean;
+    password: string;
+    errorText: string;
+    flows: LoginFlow[];
+}
+
+@replaceableComponent("structures.auth.SoftLogout")
+export default class SoftLogout extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             loginView: LOGIN_VIEW.LOADING,
             keyBackupNeeded: true, // assume we do while we figure it out (see componentDidMount)
-
             busy: false,
             password: "",
             errorText: "",
+            flows: [],
         };
     }
 
@@ -72,7 +83,7 @@ export default class SoftLogout extends React.Component {
             return;
         }
 
-        this._initLogin();
+        this.initLogin();
 
         const cli = MatrixClientPeg.get();
         if (cli.isCryptoEnabled()) {
@@ -94,7 +105,7 @@ export default class SoftLogout extends React.Component {
         });
     };
 
-    async _initLogin() {
+    private async initLogin() {
         const queryParams = this.props.realQueryParams;
         const hasAllParams = queryParams && queryParams['loginToken'];
         if (hasAllParams) {
@@ -189,7 +200,7 @@ export default class SoftLogout extends React.Component {
         });
     }
 
-    _renderSignInSection() {
+    private renderSignInSection() {
         if (this.state.loginView === LOGIN_VIEW.LOADING) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return <Spinner />;
@@ -247,7 +258,7 @@ export default class SoftLogout extends React.Component {
             } // else we already have a message and should use it (key backup warning)
 
             const loginType = this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso";
-            const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType);
+            const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType) as ISSOFlow;
 
             return (
                 <div>
@@ -289,7 +300,7 @@ export default class SoftLogout extends React.Component {
 
                     <h3>{_t("Sign in")}</h3>
                     <div>
-                        {this._renderSignInSection()}
+                        {this.renderSignInSection()}
                     </div>
 
                     <h3>{_t("Clear personal data")}</h3>

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -110,7 +110,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                 console.error(e);
 
                 const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
-                if (stateForError.isFatalError) {
+                if (stateForError.serverErrorIsFatal) {
                     let error = _t("Unable to validate homeserver");
                     if (e.translatedMessage) {
                         error = e.translatedMessage;
@@ -168,7 +168,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
             text = _t("Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.");
         }
 
-        let defaultServerName = this.defaultServer.hsName;
+        let defaultServerName: React.ReactNode = this.defaultServer.hsName;
         if (this.defaultServer.hsNameIsDifferent) {
             defaultServerName = (
                 <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={this.defaultServer.hsUrl}>

src/components/views/elements/ServerPicker.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -67,7 +67,7 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
         </AccessibleButton>;
     }
 
-    let serverName = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
+    let serverName: React.ReactNode = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
     if (serverConfig.hsNameIsDifferent) {
         serverName = <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
             {serverConfig.hsName}

src/components/views/rooms/EventTile.tsx

@@ -1,6 +1,6 @@
 /*
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,11 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from "classnames";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Relations } from "matrix-js-sdk/src/models/relations";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
@@ -27,7 +29,7 @@ import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout, LayoutPropType} from "../../../settings/Layout";
+import {Layout} from "../../../settings/Layout";
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
@@ -40,6 +42,8 @@ import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStor
 import {objectHasDiff} from "../../../utils/objects";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import Tooltip from "../elements/Tooltip";
+import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "./NotificationBadge";
 
@@ -171,101 +175,130 @@ const MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
+interface IReadReceiptProps {
+    userId: string;
+    roomMember: RoomMember;
+    ts: number;
+}
+
+interface IProps {
+    // the MatrixEvent to show
+    mxEvent: MatrixEvent;
+
+    // true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
+    // might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
+    // references the same this.props.mxEvent.
+    isRedacted?: boolean;
+
+    // true if this is a continuation of the previous event (which has the
+    // effect of not showing another avatar/displayname
+    continuation?: boolean;
+
+    // true if this is the last event in the timeline (which has the effect
+    // of always showing the timestamp)
+    last?: boolean;
+
+    // true if the event is the last event in a section (adds a css class for
+    // targeting)
+    lastInSection?: boolean;
+
+    // True if the event is the last successful (sent) event.
+    lastSuccessful?: boolean;
+
+    // true if this is search context (which has the effect of greying out
+    // the text
+    contextual?: boolean;
+
+    // a list of words to highlight, ordered by longest first
+    highlights?: string[];
+
+    // link URL for the highlights
+    highlightLink?: string;
+
+    // should show URL previews for this event
+    showUrlPreview?: boolean;
+
+    // is this the focused event
+    isSelectedEvent?: boolean;
+
+    // callback called when dynamic content in events are loaded
+    onHeightChanged?: () => void;
+
+    // a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'.
+    readReceipts?: IReadReceiptProps[];
+
+    // opaque readreceipt info for each userId; used by ReadReceiptMarker
+    // to manage its animations. Should be an empty object when the room
+    // first loads
+    readReceiptMap?: any;
+
+    // A function which is used to check if the parent panel is being
+    // unmounted, to avoid unnecessary work. Should return true if we
+    // are being unmounted.
+    checkUnmounting?: () => boolean;
+
+    // the status of this event - ie, mxEvent.status. Denormalised to here so
+    // that we can tell when it changes.
+    eventSendStatus?: string;
+
+    // the shape of the tile. by default, the layout is intended for the
+    // normal room timeline.  alternative values are: "file_list", "file_grid"
+    // and "notif".  This could be done by CSS, but it'd be horribly inefficient.
+    // It could also be done by subclassing EventTile, but that'd be quite
+    // boiilerplatey.  So just make the necessary render decisions conditional
+    // for now.
+    tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+
+    // show twelve hour timestamps
+    isTwelveHour?: boolean;
+
+    // helper function to access relations for this event
+    getRelationsForEvent?: (eventId: string, relationType: string, eventType: string) => Relations;
+
+    // whether to show reactions for this event
+    showReactions?: boolean;
+
+    // which layout to use
+    layout: Layout;
+
+    // whether or not to show flair at all
+    enableFlair?: boolean;
+
+    // whether or not to show read receipts
+    showReadReceipts?: boolean;
+
+    // Used while editing, to pass the event, and to preserve editor state
+    // from one editor instance to another when remounting the editor
+    // upon receiving the remote echo for an unsent event.
+    editState?: EditorStateTransfer;
+
+    // Event ID of the event replacing the content of this event, if any
+    replacingEventId?: string;
+
+    // Helper to build permalinks for the room
+    permalinkCreator?: RoomPermalinkCreator;
+}
+
+interface IState {
+    // Whether the action bar is focused.
+    actionBarFocused: boolean;
+    // Whether all read receipts are being displayed. If not, only display
+    // a truncation of them.
+    allReadAvatars: boolean;
+    // Whether the event's sender has been verified.
+    verified: string;
+    // Whether onRequestKeysClick has been called since mounting.
+    previouslyRequestedKeys: boolean;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions: Relations;
+}
+
 @replaceableComponent("views.rooms.EventTile")
-export default class EventTile extends React.Component {
+export default class EventTile extends React.Component<IProps, IState> {
-    static propTypes = {
+    private suppressReadReceiptAnimation: boolean;
-        /* the MatrixEvent to show */
+    private isListeningForReceipts: boolean;
-        mxEvent: PropTypes.object.isRequired,
+    private tile = React.createRef();
-
+    private replyThread = React.createRef();
-        /* true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
-         * might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
-         * references the same this.props.mxEvent.
-         */
-        isRedacted: PropTypes.bool,
-
-        /* true if this is a continuation of the previous event (which has the
-         * effect of not showing another avatar/displayname
-         */
-        continuation: PropTypes.bool,
-
-        /* true if this is the last event in the timeline (which has the effect
-         * of always showing the timestamp)
-         */
-        last: PropTypes.bool,
-
-        // true if the event is the last event in a section (adds a css class for
-        // targeting)
-        lastInSection: PropTypes.bool,
-
-        // True if the event is the last successful (sent) event.
-        isLastSuccessful: PropTypes.bool,
-
-        /* true if this is search context (which has the effect of greying out
-         * the text
-         */
-        contextual: PropTypes.bool,
-
-        /* a list of words to highlight, ordered by longest first */
-        highlights: PropTypes.array,
-
-        /* link URL for the highlights */
-        highlightLink: PropTypes.string,
-
-        /* should show URL previews for this event */
-        showUrlPreview: PropTypes.bool,
-
-        /* is this the focused event */
-        isSelectedEvent: PropTypes.bool,
-
-        /* callback called when dynamic content in events are loaded */
-        onHeightChanged: PropTypes.func,
-
-        /* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
-        readReceipts: PropTypes.arrayOf(PropTypes.object),
-
-        /* opaque readreceipt info for each userId; used by ReadReceiptMarker
-         * to manage its animations. Should be an empty object when the room
-         * first loads
-         */
-        readReceiptMap: PropTypes.object,
-
-        /* A function which is used to check if the parent panel is being
-         * unmounted, to avoid unnecessary work. Should return true if we
-         * are being unmounted.
-         */
-        checkUnmounting: PropTypes.func,
-
-        /* the status of this event - ie, mxEvent.status. Denormalised to here so
-         * that we can tell when it changes. */
-        eventSendStatus: PropTypes.string,
-
-        /* the shape of the tile. by default, the layout is intended for the
-         * normal room timeline.  alternative values are: "file_list", "file_grid"
-         * and "notif".  This could be done by CSS, but it'd be horribly inefficient.
-         * It could also be done by subclassing EventTile, but that'd be quite
-         * boiilerplatey.  So just make the necessary render decisions conditional
-         * for now.
-         */
-        tileShape: PropTypes.string,
-
-        // show twelve hour timestamps
-        isTwelveHour: PropTypes.bool,
-
-        // helper function to access relations for this event
-        getRelationsForEvent: PropTypes.func,
-
-        // whether to show reactions for this event
-        showReactions: PropTypes.bool,
-
-        // which layout to use
-        layout: LayoutPropType,
-
-        // whether or not to show flair at all
-        enableFlair: PropTypes.bool,
-
-        // whether or not to show read receipts
-        showReadReceipts: PropTypes.bool,
-    };
 
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
@@ -292,26 +325,22 @@ export default class EventTile extends React.Component {
         };
 
         // don't do RR animations until we are mounted
-        this._suppressReadReceiptAnimation = true;
+        this.suppressReadReceiptAnimation = true;
-
-        this._tile = createRef();
-        this._replyThread = createRef();
 
         // Throughout the component we manage a read receipt listener to see if our tile still
         // qualifies for a "sent" or "sending" state (based on their relevant conditions). We
         // don't want to over-subscribe to the read receipt events being fired, so we use a flag
         // to determine if we've already subscribed and use a combination of other flags to find
         // out if we should even be subscribed at all.
-        this._isListeningForReceipts = false;
+        this.isListeningForReceipts = false;
     }
 
     /**
      * When true, the tile qualifies for some sort of special read receipt. This could be a 'sending'
      * or 'sent' receipt, for example.
      * @returns {boolean}
-     * @private
      */
-    get _isEligibleForSpecialReceipt() {
+    private get isEligibleForSpecialReceipt() {
         // First, if there are other read receipts then just short-circuit this.
         if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
         if (!this.props.mxEvent) return false;
@@ -340,9 +369,9 @@ export default class EventTile extends React.Component {
         return true;
     }
 
-    get _shouldShowSentReceipt() {
+    private get shouldShowSentReceipt() {
         // If we're not even eligible, don't show the receipt.
-        if (!this._isEligibleForSpecialReceipt) return false;
+        if (!this.isEligibleForSpecialReceipt) return false;
 
         // We only show the 'sent' receipt on the last successful event.
         if (!this.props.lastSuccessful) return false;
@@ -360,9 +389,9 @@ export default class EventTile extends React.Component {
         return true;
     }
 
-    get _shouldShowSendingReceipt() {
+    private get shouldShowSendingReceipt() {
         // If we're not even eligible, don't show the receipt.
-        if (!this._isEligibleForSpecialReceipt) return false;
+        if (!this.isEligibleForSpecialReceipt) return false;
 
         // Check the event send status to see if we are pending. Null/undefined status means the
         // message was sent, so check for that and 'sent' explicitly.
@@ -376,22 +405,22 @@ export default class EventTile extends React.Component {
     // TODO: [REACT-WARNING] Move into constructor
     // eslint-disable-next-line camelcase
     UNSAFE_componentWillMount() {
-        this._verifyEvent(this.props.mxEvent);
+        this.verifyEvent(this.props.mxEvent);
     }
 
     componentDidMount() {
-        this._suppressReadReceiptAnimation = false;
+        this.suppressReadReceiptAnimation = false;
         const client = this.context;
         client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.on("userTrustStatusChanged", this.onUserVerificationChanged);
-        this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
+        this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
         if (this.props.showReactions) {
-            this.props.mxEvent.on("Event.relationsCreated", this._onReactionsCreated);
+            this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
         }
 
-        if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) {
+        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
-            client.on("Room.receipt", this._onRoomReceipt);
+            client.on("Room.receipt", this.onRoomReceipt);
-            this._isListeningForReceipts = true;
+            this.isListeningForReceipts = true;
         }
     }
 
@@ -401,7 +430,7 @@ export default class EventTile extends React.Component {
         // re-check the sender verification as outgoing events progress through
         // the send process.
         if (nextProps.eventSendStatus !== this.props.eventSendStatus) {
-            this._verifyEvent(nextProps.mxEvent);
+            this.verifyEvent(nextProps.mxEvent);
         }
     }
 
@@ -410,35 +439,35 @@ export default class EventTile extends React.Component {
             return true;
         }
 
-        return !this._propsEqual(this.props, nextProps);
+        return !this.propsEqual(this.props, nextProps);
     }
 
     componentWillUnmount() {
         const client = this.context;
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
-        client.removeListener("Room.receipt", this._onRoomReceipt);
+        client.removeListener("Room.receipt", this.onRoomReceipt);
-        this._isListeningForReceipts = false;
+        this.isListeningForReceipts = false;
-        this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
+        this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
         if (this.props.showReactions) {
-            this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+            this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         }
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
         // If we're not listening for receipts and expect to be, register a listener.
-        if (!this._isListeningForReceipts && (this._shouldShowSentReceipt || this._shouldShowSendingReceipt)) {
+        if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
-            this.context.on("Room.receipt", this._onRoomReceipt);
+            this.context.on("Room.receipt", this.onRoomReceipt);
-            this._isListeningForReceipts = true;
+            this.isListeningForReceipts = true;
         }
     }
 
-    _onRoomReceipt = (ev, room) => {
+    private onRoomReceipt = (ev, room) => {
         // ignore events for other rooms
         const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         if (room !== tileRoom) return;
 
-        if (!this._shouldShowSentReceipt && !this._shouldShowSendingReceipt && !this._isListeningForReceipts) {
+        if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) {
             return;
         }
 
@@ -446,36 +475,36 @@ export default class EventTile extends React.Component {
         // the getters we use here to determine what needs rendering.
         this.forceUpdate(() => {
             // Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
-            if (!this._shouldShowSentReceipt && !this._shouldShowSendingReceipt) {
+            if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
-                this.context.removeListener("Room.receipt", this._onRoomReceipt);
+                this.context.removeListener("Room.receipt", this.onRoomReceipt);
-                this._isListeningForReceipts = false;
+                this.isListeningForReceipts = false;
             }
         });
     };
 
     /** called when the event is decrypted after we show it.
      */
-    _onDecrypted = () => {
+    private onDecrypted = () => {
         // we need to re-verify the sending device.
-        // (we call onHeightChanged in _verifyEvent to handle the case where decryption
+        // (we call onHeightChanged in verifyEvent to handle the case where decryption
         // has caused a change in size of the event tile)
-        this._verifyEvent(this.props.mxEvent);
+        this.verifyEvent(this.props.mxEvent);
         this.forceUpdate();
     };
 
-    onDeviceVerificationChanged = (userId, device) => {
+    private onDeviceVerificationChanged = (userId, device) => {
         if (userId === this.props.mxEvent.getSender()) {
-            this._verifyEvent(this.props.mxEvent);
+            this.verifyEvent(this.props.mxEvent);
         }
     };
 
-    onUserVerificationChanged = (userId, _trustStatus) => {
+    private onUserVerificationChanged = (userId, _trustStatus) => {
         if (userId === this.props.mxEvent.getSender()) {
-            this._verifyEvent(this.props.mxEvent);
+            this.verifyEvent(this.props.mxEvent);
         }
     };
 
-    async _verifyEvent(mxEvent) {
+    private async verifyEvent(mxEvent) {
         if (!mxEvent.isEncrypted()) {
             return;
         }
@@ -529,7 +558,7 @@ export default class EventTile extends React.Component {
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     }
 
-    _propsEqual(objA, objB) {
+    private propsEqual(objA, objB) {
         const keysA = Object.keys(objA);
         const keysB = Object.keys(objB);
 
@@ -596,7 +625,7 @@ export default class EventTile extends React.Component {
     };
 
     getReadAvatars() {
-        if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) {
+        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
             return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
         }
 
@@ -643,7 +672,7 @@ export default class EventTile extends React.Component {
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
                     checkUnmounting={this.props.checkUnmounting}
-                    suppressAnimation={this._suppressReadReceiptAnimation}
+                    suppressAnimation={this.suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                     timestamp={receipt.ts}
                     showTwelveHour={this.props.isTwelveHour}
@@ -700,7 +729,7 @@ export default class EventTile extends React.Component {
         });
     };
 
-    _renderE2EPadlock() {
+    private renderE2EPadlock() {
         const ev = this.props.mxEvent;
 
         // event could not be decrypted
@@ -749,9 +778,9 @@ export default class EventTile extends React.Component {
         });
     };
 
-    getTile = () => this._tile.current;
+    getTile = () => this.tile.current;
 
-    getReplyThread = () => this._replyThread.current;
+    getReplyThread = () => this.replyThread.current;
 
     getReactions = () => {
         if (
@@ -771,11 +800,11 @@ export default class EventTile extends React.Component {
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     };
 
-    _onReactionsCreated = (relationType, eventType) => {
+    private onReactionsCreated = (relationType, eventType) => {
         if (relationType !== "m.annotation" || eventType !== "m.reaction") {
             return;
         }
-        this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+        this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         this.setState({
             reactions: this.getReactions(),
         });
@@ -896,7 +925,7 @@ export default class EventTile extends React.Component {
             // so that the correct avatar is shown as the text is
             // `$target accepted the invitation for $email`
             if (this.props.mxEvent.getContent().third_party_invite) {
-               member = this.props.mxEvent.target;
+                member = this.props.mxEvent.target;
             } else {
                 member = this.props.mxEvent.sender;
             }
@@ -913,8 +942,9 @@ export default class EventTile extends React.Component {
         if (needsSenderProfile) {
             if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
-                                        mxEvent={this.props.mxEvent}
+                    mxEvent={this.props.mxEvent}
-                                        enableFlair={this.props.enableFlair} />;
+                    enableFlair={this.props.enableFlair}
+                />;
             } else {
                 sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
             }
@@ -977,18 +1007,18 @@ export default class EventTile extends React.Component {
         }
 
         const linkedTimestamp = <a
-                href={permalink}
+            href={permalink}
-                onClick={this.onPermalinkClicked}
+            onClick={this.onPermalinkClicked}
-                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+            aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
-            >
+        >
-                { timestamp }
+            { timestamp }
-            </a>;
+        </a>;
 
         const useIRCLayout = this.props.layout == Layout.IRC;
         const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
         const ircTimestamp = useIRCLayout ? linkedTimestamp : null;
-        const groupPadlock = !useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
+        const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
-        const ircPadlock = useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
+        const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
 
         let msgOption;
         if (this.props.showReadReceipts) {
@@ -1019,12 +1049,13 @@ export default class EventTile extends React.Component {
                             </a>
                         </div>
                         <div className="mx_EventTile_line">
-                            <EventTileType ref={this._tile}
+                            <EventTileType ref={this.tile}
-                                           mxEvent={this.props.mxEvent}
+                                mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
+                                highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
+                                highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
+                                showUrlPreview={this.props.showUrlPreview}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                         </div>
                     </div>
                 );
@@ -1033,13 +1064,14 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_line">
-                            <EventTileType ref={this._tile}
+                            <EventTileType ref={this.tile}
-                                           mxEvent={this.props.mxEvent}
+                                mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
+                                highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
+                                highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
+                                showUrlPreview={this.props.showUrlPreview}
-                                           tileShape={this.props.tileShape}
+                                tileShape={this.props.tileShape}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                         </div>
                         <a
                             className="mx_EventTile_senderDetailsLink"
@@ -1063,7 +1095,7 @@ export default class EventTile extends React.Component {
                         this.props.mxEvent,
                         this.props.onHeightChanged,
                         this.props.permalinkCreator,
-                        this._replyThread,
+                        this.replyThread,
                     );
                 }
                 return (
@@ -1076,13 +1108,14 @@ export default class EventTile extends React.Component {
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
-                            <EventTileType ref={this._tile}
+                            <EventTileType ref={this.tile}
-                                           mxEvent={this.props.mxEvent}
+                                mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
+                                highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
+                                highlightLink={this.props.highlightLink}
-                                           onHeightChanged={this.props.onHeightChanged}
+                                onHeightChanged={this.props.onHeightChanged}
-                                           replacingEventId={this.props.replacingEventId}
+                                replacingEventId={this.props.replacingEventId}
-                                           showUrlPreview={false} />
+                                showUrlPreview={false}
+                            />
                         </div>
                     </div>
                 );
@@ -1092,7 +1125,7 @@ export default class EventTile extends React.Component {
                     this.props.mxEvent,
                     this.props.onHeightChanged,
                     this.props.permalinkCreator,
-                    this._replyThread,
+                    this.replyThread,
                     this.props.layout,
                 );
 
@@ -1106,15 +1139,16 @@ export default class EventTile extends React.Component {
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
-                            <EventTileType ref={this._tile}
+                            <EventTileType ref={this.tile}
-                                           mxEvent={this.props.mxEvent}
+                                mxEvent={this.props.mxEvent}
-                                           replacingEventId={this.props.replacingEventId}
+                                replacingEventId={this.props.replacingEventId}
-                                           editState={this.props.editState}
+                                editState={this.props.editState}
-                                           highlights={this.props.highlights}
+                                highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
+                                highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
+                                showUrlPreview={this.props.showUrlPreview}
-                                           permalinkCreator={this.props.permalinkCreator}
+                                permalinkCreator={this.props.permalinkCreator}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                             { keyRequestInfo }
                             { reactionsRow }
                             { actionBar }
@@ -1183,18 +1217,26 @@ function E2ePadlockUnknown(props) {
 
 function E2ePadlockUnauthenticated(props) {
     return (
-        <E2ePadlock title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")} icon="unauthenticated" {...props} />
+        <E2ePadlock
+            title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")}
+            icon="unauthenticated"
+            {...props}
+        />
     );
 }
 
-class E2ePadlock extends React.Component {
+interface IE2ePadlockProps {
-    static propTypes = {
+    icon: string;
-        icon: PropTypes.string.isRequired,
+    title: string;
-        title: PropTypes.string.isRequired,
+}
-    };
 
-    constructor() {
+interface IE2ePadlockState {
-        super();
+    hover: boolean;
+}
+
+class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             hover: false,
@@ -1212,14 +1254,13 @@ class E2ePadlock extends React.Component {
     render() {
         let tooltip = null;
         if (this.state.hover) {
-            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
+            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} />;
         }
 
         const classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
         return (
             <div
                 className={classes}
-                onClick={this.onClick}
                 onMouseEnter={this.onHoverStart}
                 onMouseLeave={this.onHoverEnd}
             >{tooltip}</div>
@@ -1236,8 +1277,8 @@ interface ISentReceiptState {
 }
 
 class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptState> {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
 
         this.state = {
             hover: false,

src/components/views/rooms/MessageComposer.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2015-2018, 2020, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,15 +13,18 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React, {createRef} from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 import dis from '../../../dispatcher/dispatcher';
+import { ActionPayload } from "../../../dispatcher/payloads";
 import Stickerpicker from './Stickerpicker';
-import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
+import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -35,19 +38,26 @@ import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
 import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 import {RecordingState} from "../../../voice/VoiceRecording";
 import Tooltip, {Alignment} from "../elements/Tooltip";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
+import { E2EStatus } from '../../../utils/ShieldUtils';
+import SendMessageComposer from "./SendMessageComposer";
 
-function ComposerAvatar(props) {
+interface IComposerAvatarProps {
+    me: object;
+}
+
+function ComposerAvatar(props: IComposerAvatarProps) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
     return <div className="mx_MessageComposer_avatar">
         <MemberStatusMessageAvatar member={props.me} width={24} height={24} />
     </div>;
 }
 
-ComposerAvatar.propTypes = {
+interface ISendButtonProps {
-    me: PropTypes.object.isRequired,
+    onClick: () => void;
-};
+}
 
-function SendButton(props) {
+function SendButton(props: ISendButtonProps) {
     return (
         <AccessibleTooltipButton
             className="mx_MessageComposer_sendMessage"
@@ -57,10 +67,6 @@ function SendButton(props) {
     );
 }
 
-SendButton.propTypes = {
-    onClick: PropTypes.func.isRequired,
-};
-
 const EmojiButton = ({addEmoji}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
@@ -68,7 +74,7 @@ const EmojiButton = ({addEmoji}) => {
     if (menuDisplayed) {
         const buttonRect = button.current.getBoundingClientRect();
         const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker');
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
             <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
         </ContextMenu>;
     }
@@ -98,39 +104,39 @@ const EmojiButton = ({addEmoji}) => {
     </React.Fragment>;
 };
 
-class UploadButton extends React.Component {
+interface IUploadButtonProps {
-    static propTypes = {
+    roomId: string;
-        roomId: PropTypes.string.isRequired,
+}
-    }
+
+class UploadButton extends React.Component<IUploadButtonProps> {
+    private uploadInput = React.createRef<HTMLInputElement>();
+    private dispatcherRef: string;
 
     constructor(props) {
         super(props);
-        this.onUploadClick = this.onUploadClick.bind(this);
-        this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
 
-        this._uploadInput = createRef();
+        this.dispatcherRef = dis.register(this.onAction);
-        this._dispatcherRef = dis.register(this.onAction);
     }
 
     componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
+        dis.unregister(this.dispatcherRef);
     }
 
-    onAction = payload => {
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === "upload_file") {
             this.onUploadClick();
         }
     };
 
-    onUploadClick(ev) {
+    private onUploadClick = () => {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;
         }
-        this._uploadInput.current.click();
+        this.uploadInput.current.click();
     }
 
-    onUploadFileInputChange(ev) {
+    private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
         if (ev.target.files.length === 0) return;
 
         // take a copy so we can safely reset the value of the form control
@@ -160,7 +166,7 @@ class UploadButton extends React.Component {
                 title={_t('Upload file')}
             >
                 <input
-                    ref={this._uploadInput}
+                    ref={this.uploadInput}
                     type="file"
                     style={uploadInputStyle}
                     multiple
@@ -171,19 +177,34 @@ class UploadButton extends React.Component {
     }
 }
 
+interface IProps {
+    room: Room;
+    resizeNotifier: ResizeNotifier;
+    permalinkCreator: RoomPermalinkCreator;
+    replyToEvent?: MatrixEvent;
+    e2eStatus?: E2EStatus;
+}
+
+interface IState {
+    tombstone: MatrixEvent;
+    canSendMessages: boolean;
+    isComposerEmpty: boolean;
+    haveRecording: boolean;
+    recordingTimeLeftSeconds?: number;
+    me?: RoomMember;
+}
+
 @replaceableComponent("views.rooms.MessageComposer")
-export default class MessageComposer extends React.Component {
+export default class MessageComposer extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private messageComposerInput: SendMessageComposer;
+
     constructor(props) {
         super(props);
-        this.onInputStateChanged = this.onInputStateChanged.bind(this);
+        VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate);
-        this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
-        this._onTombstoneClick = this._onTombstoneClick.bind(this);
-        this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
-        VoiceRecordingStore.instance.on(UPDATE_EVENT, this._onVoiceStoreUpdate);
-        this._dispatcherRef = null;
 
         this.state = {
-            tombstone: this._getRoomTombstone(),
+            tombstone: this.getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
             isComposerEmpty: true,
             haveRecording: false,
@@ -191,7 +212,13 @@ export default class MessageComposer extends React.Component {
         };
     }
 
-    onAction = (payload) => {
+    componentDidMount() {
+        this.dispatcherRef = dis.register(this.onAction);
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+        this.waitForOwnMember();
+    }
+
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === 'reply_to_event') {
             // add a timeout for the reply preview to be rendered, so
             // that the ScrollPanel listening to the resizeNotifier can
@@ -203,13 +230,7 @@ export default class MessageComposer extends React.Component {
         }
     };
 
-    componentDidMount() {
+    private waitForOwnMember() {
-        this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-        this._waitForOwnMember();
-    }
-
-    _waitForOwnMember() {
         // if we have the member already, do that
         const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
         if (me) {
@@ -227,34 +248,28 @@ export default class MessageComposer extends React.Component {
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
-        VoiceRecordingStore.instance.off(UPDATE_EVENT, this._onVoiceStoreUpdate);
+        VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
     }
 
-    _onRoomStateEvents(ev, state) {
+    private onRoomStateEvents = (ev, state) => {
         if (ev.getRoomId() !== this.props.room.roomId) return;
 
         if (ev.getType() === 'm.room.tombstone') {
-            this.setState({tombstone: this._getRoomTombstone()});
+            this.setState({tombstone: this.getRoomTombstone()});
         }
         if (ev.getType() === 'm.room.power_levels') {
             this.setState({canSendMessages: this.props.room.maySendMessage()});
         }
     }
 
-    _getRoomTombstone() {
+    private getRoomTombstone() {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
     }
 
-    onInputStateChanged(inputState) {
+    private onTombstoneClick = (ev) => {
-        // Merge the new input state with old to support partial updates
-        inputState = Object.assign({}, this.state.inputState, inputState);
-        this.setState({inputState});
-    }
-
-    _onTombstoneClick(ev) {
         ev.preventDefault();
 
         const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
@@ -284,7 +299,7 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    renderPlaceholderText() {
+    private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
             if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
@@ -317,7 +332,7 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    _onVoiceStoreUpdate = () => {
+    private onVoiceStoreUpdate = () => {
         const recording = VoiceRecordingStore.instance.activeRecording;
         this.setState({haveRecording: !!recording});
         if (recording) {
@@ -386,7 +401,7 @@ export default class MessageComposer extends React.Component {
             const continuesLink = replacementRoomId ? (
                 <a href={makeRoomPermalink(replacementRoomId)}
                     className="mx_MessageComposer_roomReplaced_link"
-                    onClick={this._onTombstoneClick}
+                    onClick={this.onTombstoneClick}
                 >
                     {_t("The conversation continues here.")}
                 </a>
@@ -394,7 +409,9 @@ export default class MessageComposer extends React.Component {
 
             controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
-                    <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
+                    <img className="mx_MessageComposer_roomReplaced_icon"
+                        src={require("../../../../res/img/room_replaced.svg")}
+                    />
                     <span className="mx_MessageComposer_roomReplaced_header">
                         {_t("This room has been replaced and is no longer active.")}
                     </span><br />
@@ -431,14 +448,3 @@ export default class MessageComposer extends React.Component {
         );
     }
 }
-
-MessageComposer.propTypes = {
-    // js-sdk Room object
-    room: PropTypes.object.isRequired,
-
-    // string representing the current voip call state
-    callState: PropTypes.string,
-
-    // string representing the current room app drawer state
-    showApps: PropTypes.bool,
-};

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
 import {_t} from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
@@ -27,11 +27,22 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    event: MatrixEvent;
+}
+
+interface IState {
+    stateKey: string;
+    roomId: string;
+    displayName: string;
+    invited: boolean;
+    canKick: boolean;
+    senderName: string;
+}
+
 @replaceableComponent("views.rooms.ThirdPartyMemberInfo")
-export default class ThirdPartyMemberInfo extends React.Component {
+export default class ThirdPartyMemberInfo extends React.Component<IProps, IState> {
-    static propTypes = {
+    private room: Room;
-        event: PropTypes.instanceOf(MatrixEvent).isRequired,
-    };
 
     constructor(props) {
         super(props);

src/components/views/settings/EventIndexPanel.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -28,10 +28,17 @@ import {SettingLevel} from "../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import SeshatResetDialog from '../dialogs/SeshatResetDialog';
 
+interface IState {
+    enabling: boolean;
+    eventIndexSize: number;
+    roomCount: number;
+    eventIndexingEnabled: boolean;
+}
+
 @replaceableComponent("views.settings.EventIndexPanel")
-export default class EventIndexPanel extends React.Component {
+export default class EventIndexPanel extends React.Component<{}, IState> {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
 
         this.state = {
             enabling: false,
@@ -68,7 +75,7 @@ export default class EventIndexPanel extends React.Component {
         }
     }
 
-    async componentDidMount(): void {
+    componentDidMount(): void {
         this.updateState();
     }
 
@@ -102,8 +109,10 @@ export default class EventIndexPanel extends React.Component {
         });
     }
 
-    _onManage = async () => {
+    private onManage = async () => {
         Modal.createTrackedDialogAsync('Message search', 'Message search',
+            // @ts-ignore: TS doesn't seem to like the type of this now that it
+            // has also been converted to TS as well, but I can't figure out why...
             import('../../../async-components/views/dialogs/eventindex/ManageEventIndexDialog'),
             {
                 onFinished: () => {},
@@ -111,7 +120,7 @@ export default class EventIndexPanel extends React.Component {
         );
     }
 
-    _onEnable = async () => {
+    private onEnable = async () => {
         this.setState({
             enabling: true,
         });
@@ -123,14 +132,13 @@ export default class EventIndexPanel extends React.Component {
         await this.updateState();
     }
 
-    _confirmEventStoreReset = () => {
+    private confirmEventStoreReset = () => {
-        const self = this;
         const { close } = Modal.createDialog(SeshatResetDialog, {
             onFinished: async (success) => {
                 if (success) {
                     await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
                     await EventIndexPeg.deleteEventIndex();
-                    await self._onEnable();
+                    await this.onEnable();
                     close();
                 }
             },
@@ -145,20 +153,19 @@ export default class EventIndexPanel extends React.Component {
         if (EventIndexPeg.get() !== null) {
             eventIndexingSettings = (
                 <div>
-                    <div className='mx_SettingsTab_subsectionText'>
+                    <div className='mx_SettingsTab_subsectionText'>{_t(
-                        {_t("Securely cache encrypted messages locally for them " +
+                        "Securely cache encrypted messages locally for them " +
-                            "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
+                        "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
-                            {
+                        {
-                                size: formatBytes(this.state.eventIndexSize, 0),
+                            size: formatBytes(this.state.eventIndexSize, 0),
-                                // This drives the singular / plural string
+                            // This drives the singular / plural string
-                                // selection for "room" / "rooms" only.
+                            // selection for "room" / "rooms" only.
-                                count: this.state.roomCount,
+                            count: this.state.roomCount,
-                                rooms: formatCountLong(this.state.roomCount),
+                            rooms: formatCountLong(this.state.roomCount),
-                            },
+                        },
-                        )}
+                    )}</div>
-                    </div>
                     <div>
-                        <AccessibleButton kind="primary" onClick={this._onManage}>
+                        <AccessibleButton kind="primary" onClick={this.onManage}>
                             {_t("Manage")}
                         </AccessibleButton>
                     </div>
@@ -167,13 +174,13 @@ export default class EventIndexPanel extends React.Component {
         } else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
             eventIndexingSettings = (
                 <div>
-                    <div className='mx_SettingsTab_subsectionText'>
+                    <div className='mx_SettingsTab_subsectionText'>{_t(
-                        {_t( "Securely cache encrypted messages locally for them to " +
+                        "Securely cache encrypted messages locally for them to " +
-                             "appear in search results.")}
+                        "appear in search results.",
-                    </div>
+                    )}</div>
                     <div>
                         <AccessibleButton kind="primary" disabled={this.state.enabling}
-                            onClick={this._onEnable}>
+                            onClick={this.onEnable}>
                             {_t("Enable")}
                         </AccessibleButton>
                         {this.state.enabling ? <InlineSpinner /> : <div />}
@@ -188,40 +195,36 @@ export default class EventIndexPanel extends React.Component {
             );
 
             eventIndexingSettings = (
-                <div className='mx_SettingsTab_subsectionText'>
+                <div className='mx_SettingsTab_subsectionText'>{_t(
+                    "%(brand)s is missing some components required for securely " +
+                    "caching encrypted messages locally. If you'd like to " +
+                    "experiment with this feature, build a custom %(brand)s Desktop " +
+                    "with <nativeLink>search components added</nativeLink>.",
                     {
-                        _t( "%(brand)s is missing some components required for securely " +
+                        brand,
-                            "caching encrypted messages locally. If you'd like to " +
+                    },
-                            "experiment with this feature, build a custom %(brand)s Desktop " +
+                    {
-                            "with <nativeLink>search components added</nativeLink>.",
+                        nativeLink: sub => <a href={nativeLink}
-                            {
+                            target="_blank" rel="noreferrer noopener"
-                                brand,
+                        >{sub}</a>,
-                            },
+                    },
-                            {
+                )}</div>
-                                'nativeLink': (sub) => <a href={nativeLink} target="_blank"
-                                    rel="noreferrer noopener">{sub}</a>,
-                            },
-                        )
-                    }
-                </div>
             );
         } else if (!EventIndexPeg.platformHasSupport()) {
             eventIndexingSettings = (
-                <div className='mx_SettingsTab_subsectionText'>
+                <div className='mx_SettingsTab_subsectionText'>{_t(
+                    "%(brand)s can't securely cache encrypted messages locally " +
+                    "while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
+                    "for encrypted messages to appear in search results.",
                     {
-                        _t( "%(brand)s can't securely cache encrypted messages locally " +
+                        brand,
-                            "while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
+                    },
-                            "for encrypted messages to appear in search results.",
+                    {
-                            {
+                        desktopLink: sub => <a href="https://element.io/get-started"
-                                brand,
+                            target="_blank" rel="noreferrer noopener"
-                            },
+                        >{sub}</a>,
-                            {
+                    },
-                                'desktopLink': (sub) => <a href="https://element.io/get-started"
+                )}</div>
-                                    target="_blank" rel="noreferrer noopener">{sub}</a>,
-                            },
-                        )
-                    }
-                </div>
             );
         } else {
             eventIndexingSettings = (
@@ -233,19 +236,18 @@ export default class EventIndexPanel extends React.Component {
                         }
                     </p>
                     {EventIndexPeg.error && (
-                    <details>
+                        <details>
-                        <summary>{_t("Advanced")}</summary>
+                            <summary>{_t("Advanced")}</summary>
-                        <code>
+                            <code>
-                            {EventIndexPeg.error.message}
+                                {EventIndexPeg.error.message}
-                        </code>
+                            </code>
-                        <p>
+                            <p>
-                            <AccessibleButton key="delete" kind="danger" onClick={this._confirmEventStoreReset}>
+                                <AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
-                                {_t("Reset")}
+                                    {_t("Reset")}
-                            </AccessibleButton>
+                                </AccessibleButton>
-                        </p>
+                            </p>
-                    </details>
+                        </details>
                     )}
-
                 </div>
             );
         }

src/components/views/settings/SetIdServer.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,7 +16,6 @@ limitations under the License.
 
 import url from 'url';
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -28,6 +27,7 @@ import {abbreviateUrl, unabbreviateUrl} from "../../../utils/UrlUtils";
 import { getDefaultIdentityServerUrl, doesIdentityServerHaveTerms } from '../../../utils/IdentityServerUtils';
 import {timeout} from "../../../utils/promise";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ActionPayload } from '../../../dispatcher/payloads';
 
 // We'll wait up to this long when checking for 3PID bindings on the IS.
 const REACHABILITY_TIMEOUT = 10000; // ms
@@ -59,16 +59,28 @@ async function checkIdentityServerUrl(u) {
     }
 }
 
-@replaceableComponent("views.settings.SetIdServer")
+interface IProps {
-export default class SetIdServer extends React.Component {
+    // Whether or not the ID server is missing terms. This affects the text
-    static propTypes = {
+    // shown to the user.
-        // Whether or not the ID server is missing terms. This affects the text
+    missingTerms: boolean;
-        // shown to the user.
+}
-        missingTerms: PropTypes.bool,
-    };
 
-    constructor() {
+interface IState {
-        super();
+    defaultIdServer?: string;
+    currentClientIdServer: string;
+    idServer?: string;
+    error?: string;
+    busy: boolean;
+    disconnectBusy: boolean;
+    checking: boolean;
+}
+
+@replaceableComponent("views.settings.SetIdServer")
+export default class SetIdServer extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+
+    constructor(props) {
+        super(props);
 
         let defaultIdServer = '';
         if (!MatrixClientPeg.get().getIdentityServerUrl() && getDefaultIdentityServerUrl()) {
@@ -96,7 +108,7 @@ export default class SetIdServer extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
-    onAction = (payload) => {
+    private onAction = (payload: ActionPayload) => {
         // We react to changes in the ID server in the event the user is staring at this form
         // when changing their identity server on another device.
         if (payload.action !== "id_server_changed") return;
@@ -106,13 +118,13 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _onIdentityServerChanged = (ev) => {
+    private onIdentityServerChanged = (ev) => {
         const u = ev.target.value;
 
         this.setState({idServer: u});
     };
 
-    _getTooltip = () => {
+    private getTooltip = () => {
         if (this.state.checking) {
             const InlineSpinner = sdk.getComponent('views.elements.InlineSpinner');
             return <div>
@@ -126,11 +138,11 @@ export default class SetIdServer extends React.Component {
         }
     };
 
-    _idServerChangeEnabled = () => {
+    private idServerChangeEnabled = () => {
         return !!this.state.idServer && !this.state.busy;
     };
 
-    _saveIdServer = (fullUrl) => {
+    private saveIdServer = (fullUrl) => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.get().setAccountData("m.identity_server", {
             base_url: fullUrl,
@@ -143,7 +155,7 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _checkIdServer = async (e) => {
+    private checkIdServer = async (e) => {
         e.preventDefault();
         const { idServer, currentClientIdServer } = this.state;
 
@@ -166,14 +178,14 @@ export default class SetIdServer extends React.Component {
                 // Double check that the identity server even has terms of service.
                 const hasTerms = await doesIdentityServerHaveTerms(fullUrl);
                 if (!hasTerms) {
-                    const [confirmed] = await this._showNoTermsWarning(fullUrl);
+                    const [confirmed] = await this.showNoTermsWarning(fullUrl);
                     save = confirmed;
                 }
 
                 // Show a general warning, possibly with details about any bound
                 // 3PIDs that would be left behind.
                 if (save && currentClientIdServer && fullUrl !== currentClientIdServer) {
-                    const [confirmed] = await this._showServerChangeWarning({
+                    const [confirmed] = await this.showServerChangeWarning({
                         title: _t("Change identity server"),
                         unboundMessage: _t(
                             "Disconnect from the identity server <current /> and " +
@@ -189,7 +201,7 @@ export default class SetIdServer extends React.Component {
                 }
 
                 if (save) {
-                    this._saveIdServer(fullUrl);
+                    this.saveIdServer(fullUrl);
                 }
             } catch (e) {
                 console.error(e);
@@ -204,7 +216,7 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _showNoTermsWarning(fullUrl) {
+    private showNoTermsWarning(fullUrl) {
         const QuestionDialog = sdk.getComponent("views.dialogs.QuestionDialog");
         const { finished } = Modal.createTrackedDialog('No Terms Warning', '', QuestionDialog, {
             title: _t("Identity server has no terms of service"),
@@ -223,10 +235,10 @@ export default class SetIdServer extends React.Component {
         return finished;
     }
 
-    _onDisconnectClicked = async () => {
+    private onDisconnectClicked = async () => {
         this.setState({disconnectBusy: true});
         try {
-            const [confirmed] = await this._showServerChangeWarning({
+            const [confirmed] = await this.showServerChangeWarning({
                 title: _t("Disconnect identity server"),
                 unboundMessage: _t(
                     "Disconnect from the identity server <idserver />?", {},
@@ -235,14 +247,14 @@ export default class SetIdServer extends React.Component {
                 button: _t("Disconnect"),
             });
             if (confirmed) {
-                this._disconnectIdServer();
+                this.disconnectIdServer();
             }
         } finally {
             this.setState({disconnectBusy: false});
         }
     };
 
-    async _showServerChangeWarning({ title, unboundMessage, button }) {
+    private async showServerChangeWarning({ title, unboundMessage, button }) {
         const { currentClientIdServer } = this.state;
 
         let threepids = [];
@@ -318,7 +330,7 @@ export default class SetIdServer extends React.Component {
         return finished;
     }
 
-    _disconnectIdServer = () => {
+    private disconnectIdServer = () => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.get().setAccountData("m.identity_server", {
             base_url: null, // clear
@@ -371,7 +383,7 @@ export default class SetIdServer extends React.Component {
 
         let discoSection;
         if (idServerUrl) {
-            let discoButtonContent = _t("Disconnect");
+            let discoButtonContent: React.ReactNode = _t("Disconnect");
             let discoBodyText = _t(
                 "Disconnecting from your identity server will mean you " +
                 "won't be discoverable by other users and you won't be " +
@@ -391,14 +403,14 @@ export default class SetIdServer extends React.Component {
             }
             discoSection = <div>
                 <span className="mx_SettingsTab_subsectionText">{discoBodyText}</span>
-                <AccessibleButton onClick={this._onDisconnectClicked} kind="danger_sm">
+                <AccessibleButton onClick={this.onDisconnectClicked} kind="danger_sm">
                     {discoButtonContent}
                 </AccessibleButton>
             </div>;
         }
 
         return (
-            <form className="mx_SettingsTab_section mx_SetIdServer" onSubmit={this._checkIdServer}>
+            <form className="mx_SettingsTab_section mx_SetIdServer" onSubmit={this.checkIdServer}>
                 <span className="mx_SettingsTab_subheading">
                     {sectionTitle}
                 </span>
@@ -411,15 +423,15 @@ export default class SetIdServer extends React.Component {
                     autoComplete="off"
                     placeholder={this.state.defaultIdServer}
                     value={this.state.idServer}
-                    onChange={this._onIdentityServerChanged}
+                    onChange={this.onIdentityServerChanged}
-                    tooltipContent={this._getTooltip()}
+                    tooltipContent={this.getTooltip()}
                     tooltipClassName="mx_SetIdServer_tooltip"
                     disabled={this.state.busy}
                     forceValidity={this.state.error ? false : null}
                 />
                 <AccessibleButton type="submit" kind="primary_sm"
-                    onClick={this._checkIdServer}
+                    onClick={this.checkIdServer}
-                    disabled={!this._idServerChangeEnabled()}
+                    disabled={!this.idServerChangeEnabled()}
                 >{_t("Change")}</AccessibleButton>
                 {discoSection}
             </form>

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, _td} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
@@ -23,6 +22,9 @@ import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
 import {EventType} from "matrix-js-sdk/src/@types/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
 
 const plEventsToLabels = {
     // These will be translated for us later.
@@ -63,15 +65,15 @@ function parseIntWithDefault(val, def) {
     return isNaN(res) ? def : res;
 }
 
-export class BannedUser extends React.Component {
+interface IBannedUserProps {
-    static propTypes = {
+    canUnban?: boolean;
-        canUnban: PropTypes.bool,
+    member: RoomMember;
-        member: PropTypes.object.isRequired, // js-sdk RoomMember
+    by: string;
-        by: PropTypes.string.isRequired,
+    reason?: string;
-        reason: PropTypes.string,
+}
-    };
 
-    _onUnbanClick = (e) => {
+export class BannedUser extends React.Component<IBannedUserProps> {
+    private onUnbanClick = (e) => {
         MatrixClientPeg.get().unban(this.props.member.roomId, this.props.member.userId).catch((err) => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to unban: " + err);
@@ -87,8 +89,10 @@ export class BannedUser extends React.Component {
 
         if (this.props.canUnban) {
             unbanButton = (
-                <AccessibleButton kind='danger_sm' onClick={this._onUnbanClick}
+                <AccessibleButton className='mx_RolesRoomSettingsTab_unbanBtn'
-                                  className='mx_RolesRoomSettingsTab_unbanBtn'>
+                    kind='danger_sm'
+                    onClick={this.onUnbanClick}
+                >
                     { _t('Unban') }
                 </AccessibleButton>
             );
@@ -107,29 +111,29 @@ export class BannedUser extends React.Component {
     }
 }
 
-@replaceableComponent("views.settings.tabs.room.RolesRoomSettingsTab")
+interface IProps {
-export default class RolesRoomSettingsTab extends React.Component {
+    roomId: string;
-    static propTypes = {
+}
-        roomId: PropTypes.string.isRequired,
-    };
 
-    componentDidMount(): void {
+@replaceableComponent("views.settings.tabs.room.RolesRoomSettingsTab")
-        MatrixClientPeg.get().on("RoomState.members", this._onRoomMembership);
+export default class RolesRoomSettingsTab extends React.Component<IProps> {
+    componentDidMount() {
+        MatrixClientPeg.get().on("RoomState.members", this.onRoomMembership);
     }
 
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         const client = MatrixClientPeg.get();
         if (client) {
-            client.removeListener("RoomState.members", this._onRoomMembership);
+            client.removeListener("RoomState.members", this.onRoomMembership);
         }
     }
 
-    _onRoomMembership = (event, state, member) => {
+    private onRoomMembership = (event: MatrixEvent, state: RoomState, member: RoomMember) => {
         if (state.roomId !== this.props.roomId) return;
         this.forceUpdate();
     };
 
-    _populateDefaultPlEvents(eventsSection, stateLevel, eventsLevel) {
+    private populateDefaultPlEvents(eventsSection: Record<string, number>, stateLevel: number, eventsLevel: number) {
         for (const desiredEvent of Object.keys(plEventsToShow)) {
             if (!(desiredEvent in eventsSection)) {
                 eventsSection[desiredEvent] = (plEventsToShow[desiredEvent].isState ? stateLevel : eventsLevel);
@@ -137,7 +141,7 @@ export default class RolesRoomSettingsTab extends React.Component {
         }
     }
 
-    _onPowerLevelsChanged = (value, powerLevelKey) => {
+    private onPowerLevelsChanged = (inputValue: string, powerLevelKey: string) => {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
@@ -148,7 +152,7 @@ export default class RolesRoomSettingsTab extends React.Component {
 
         const eventsLevelPrefix = "event_levels_";
 
-        value = parseInt(value);
+        const value = parseInt(inputValue);
 
         if (powerLevelKey.startsWith(eventsLevelPrefix)) {
             // deep copy "events" object, Object.assign itself won't deep copy
@@ -182,7 +186,7 @@ export default class RolesRoomSettingsTab extends React.Component {
         });
     };
 
-    _onUserPowerLevelChanged = (value, powerLevelKey) => {
+    private onUserPowerLevelChanged = (value: string, powerLevelKey: string) => {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
@@ -266,7 +270,7 @@ export default class RolesRoomSettingsTab extends React.Component {
             currentUserLevel = defaultUserLevel;
         }
 
-        this._populateDefaultPlEvents(
+        this.populateDefaultPlEvents(
             eventsLevels,
             parseIntWithDefault(plContent.state_default, powerLevelDescriptors.state_default.defaultValue),
             parseIntWithDefault(plContent.events_default, powerLevelDescriptors.events_default.defaultValue),
@@ -288,7 +292,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             label={user}
                             key={user}
                             powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this._onUserPowerLevelChanged}
+                            onChange={this.onUserPowerLevelChanged}
                         />,
                     );
                 } else if (userLevels[user] < defaultUserLevel) { // muted
@@ -299,7 +303,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             label={user}
                             key={user}
                             powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this._onUserPowerLevelChanged}
+                            onChange={this.onUserPowerLevelChanged}
                         />,
                     );
                 }
@@ -345,8 +349,9 @@ export default class RolesRoomSettingsTab extends React.Component {
                             if (sender) bannedBy = sender.name;
                             return (
                                 <BannedUser key={member.userId} canUnban={canBanUsers}
-                                            member={member} reason={banEvent.reason}
+                                    member={member} reason={banEvent.reason}
-                                            by={bannedBy} />
+                                    by={bannedBy}
+                                />
                             );
                         })}
                     </ul>
@@ -373,7 +378,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                     usersDefault={defaultUserLevel}
                     disabled={!canChangeLevels || currentUserLevel < value}
                     powerLevelKey={key} // Will be sent as the second parameter to `onChange`
-                    onChange={this._onPowerLevelsChanged}
+                    onChange={this.onPowerLevelsChanged}
                 />
             </div>;
         });
@@ -398,7 +403,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                         usersDefault={defaultUserLevel}
                         disabled={!canChangeLevels || currentUserLevel < eventsLevels[eventType]}
                         powerLevelKey={"event_levels_" + eventType}
-                        onChange={this._onPowerLevelsChanged}
+                        onChange={this.onPowerLevelsChanged}
                     />
                 </div>
             );

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import {_t} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
@@ -26,64 +26,92 @@ import StyledRadioGroup from '../../../elements/StyledRadioGroup';
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import {UIFeature} from "../../../../../settings/UIFeature";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+// Knock and private are reserved keywords which are not yet implemented.
+enum JoinRule {
+    Public = "public",
+    Knock = "knock",
+    Invite = "invite",
+    Private = "private",
+}
+
+enum GuestAccess {
+    CanJoin = "can_join",
+    Forbidden = "forbidden",
+}
+
+enum HistoryVisibility {
+    Invited = "invited",
+    Joined = "joined",
+    Shared = "shared",
+    WorldReadable = "world_readable",
+}
+
+interface IProps {
+    roomId: string;
+}
+
+interface IState {
+    joinRule: JoinRule;
+    guestAccess: GuestAccess;
+    history: HistoryVisibility;
+    hasAliases: boolean;
+    encrypted: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab")
-export default class SecurityRoomSettingsTab extends React.Component {
+export default class SecurityRoomSettingsTab extends React.Component<IProps, IState> {
-    static propTypes = {
+    constructor(props) {
-        roomId: PropTypes.string.isRequired,
+        super(props);
-    };
-
-    constructor() {
-        super();
 
         this.state = {
-            joinRule: "invite",
+            joinRule: JoinRule.Invite,
-            guestAccess: "can_join",
+            guestAccess: GuestAccess.CanJoin,
-            history: "shared",
+            history: HistoryVisibility.Shared,
             hasAliases: false,
             encrypted: false,
         };
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
-    async UNSAFE_componentWillMount(): void { // eslint-disable-line camelcase
+    async UNSAFE_componentWillMount() { // eslint-disable-line camelcase
-        MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
+        MatrixClientPeg.get().on("RoomState.events", this.onStateEvent);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         const state = room.currentState;
 
-        const joinRule = this._pullContentPropertyFromEvent(
+        const joinRule: JoinRule = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.join_rules", ""),
             'join_rule',
-            'invite',
+            JoinRule.Invite,
         );
-        const guestAccess = this._pullContentPropertyFromEvent(
+        const guestAccess: GuestAccess = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.guest_access", ""),
             'guest_access',
-            'forbidden',
+            GuestAccess.Forbidden,
         );
-        const history = this._pullContentPropertyFromEvent(
+        const history: HistoryVisibility = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.history_visibility", ""),
             'history_visibility',
-            'shared',
+            HistoryVisibility.Shared,
         );
         const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
         this.setState({joinRule, guestAccess, history, encrypted});
-        const hasAliases = await this._hasAliases();
+        const hasAliases = await this.hasAliases();
         this.setState({hasAliases});
     }
 
-    _pullContentPropertyFromEvent(event, key, defaultValue) {
+    private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T {
         if (!event || !event.getContent()) return defaultValue;
         return event.getContent()[key] || defaultValue;
     }
 
-    componentWillUnmount(): void {
+    componentWillUnmount() {
-        MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent);
+        MatrixClientPeg.get().removeListener("RoomState.events", this.onStateEvent);
     }
 
-    _onStateEvent = (e) => {
+    private onStateEvent = (e: MatrixEvent) => {
         const refreshWhenTypes = [
             'm.room.join_rules',
             'm.room.guest_access',
@@ -93,7 +121,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
     };
 
-    _onEncryptionChange = (e) => {
+    private onEncryptionChange = (e: React.ChangeEvent) => {
         Modal.createTrackedDialog('Enable encryption', '', QuestionDialog, {
             title: _t('Enable encryption?'),
             description: _t(
@@ -102,10 +130,9 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 "may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>",
                 {},
                 {
-                    'a': (sub) => {
+                    a: sub => <a href="https://element.io/help#encryption"
-                        return <a rel='noreferrer noopener' target='_blank'
+                        rel="noreferrer noopener" target="_blank"
-                                  href='https://element.io/help#encryption'>{sub}</a>;
+                    >{sub}</a>,
-                    },
                 },
             ),
             onFinished: (confirm) => {
@@ -127,12 +154,12 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _fixGuestAccess = (e) => {
+    private fixGuestAccess = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
-        const joinRule = "invite";
+        const joinRule = JoinRule.Invite;
-        const guestAccess = "can_join";
+        const guestAccess = GuestAccess.CanJoin;
 
         const beforeJoinRule = this.state.joinRule;
         const beforeGuestAccess = this.state.guestAccess;
@@ -149,7 +176,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _onRoomAccessRadioToggle = (roomAccess) => {
+    private onRoomAccessRadioToggle = (roomAccess: string) => {
         //                         join_rule
         //                      INVITE  |  PUBLIC
         //        ----------------------+----------------
@@ -163,20 +190,20 @@ export default class SecurityRoomSettingsTab extends React.Component {
         // invite them, you clearly want them to join, whether they're a
         // guest or not.  In practice, guest_access should probably have
         // been implemented as part of the join_rules enum.
-        let joinRule = "invite";
+        let joinRule = JoinRule.Invite;
-        let guestAccess = "can_join";
+        let guestAccess = GuestAccess.CanJoin;
 
         switch (roomAccess) {
             case "invite_only":
                 // no change - use defaults above
                 break;
             case "public_no_guests":
-                joinRule = "public";
+                joinRule = JoinRule.Public;
-                guestAccess = "forbidden";
+                guestAccess = GuestAccess.Forbidden;
                 break;
             case "public_with_guests":
-                joinRule = "public";
+                joinRule = JoinRule.Public;
-                guestAccess = "can_join";
+                guestAccess = GuestAccess.CanJoin;
                 break;
         }
 
@@ -195,7 +222,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _onHistoryRadioToggle = (history) => {
+    private onHistoryRadioToggle = (history: HistoryVisibility) => {
         const beforeHistory = this.state.history;
         this.setState({history: history});
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
@@ -206,11 +233,11 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _updateBlacklistDevicesFlag = (checked) => {
+    private updateBlacklistDevicesFlag = (checked: boolean) => {
         MatrixClientPeg.get().getRoom(this.props.roomId).setBlacklistUnverifiedDevices(checked);
     };
 
-    async _hasAliases() {
+    private async hasAliases(): Promise<boolean> {
         const cli = MatrixClientPeg.get();
         if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
             const response = await cli.unstableGetLocalAliases(this.props.roomId);
@@ -224,7 +251,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         }
     }
 
-    _renderRoomAccess() {
+    private renderRoomAccess() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const joinRule = this.state.joinRule;
@@ -240,7 +267,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                     <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
                     <span>
                         {_t("Guests cannot join this room even if explicitly invited.")}&nbsp;
-                        <a href="" onClick={this._fixGuestAccess}>{_t("Click here to fix")}</a>
+                        <a href="" onClick={this.fixGuestAccess}>{_t("Click here to fix")}</a>
                     </span>
                 </div>
             );
@@ -265,7 +292,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 <StyledRadioGroup
                     name="roomVis"
                     value={joinRule}
-                    onChange={this._onRoomAccessRadioToggle}
+                    onChange={this.onRoomAccessRadioToggle}
                     definitions={[
                         {
                             value: "invite_only",
@@ -291,7 +318,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         );
     }
 
-    _renderHistory() {
+    private renderHistory() {
         const client = MatrixClientPeg.get();
         const history = this.state.history;
         const state = client.getRoom(this.props.roomId).currentState;
@@ -306,25 +333,25 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 <StyledRadioGroup
                     name="historyVis"
                     value={history}
-                    onChange={this._onHistoryRadioToggle}
+                    onChange={this.onHistoryRadioToggle}
                     definitions={[
                         {
-                            value: "world_readable",
+                            value: HistoryVisibility.WorldReadable,
                             disabled: !canChangeHistory,
                             label: _t("Anyone"),
                         },
                         {
-                            value: "shared",
+                            value: HistoryVisibility.Shared,
                             disabled: !canChangeHistory,
                             label: _t('Members only (since the point in time of selecting this option)'),
                         },
                         {
-                            value: "invited",
+                            value: HistoryVisibility.Invited,
                             disabled: !canChangeHistory,
                             label: _t('Members only (since they were invited)'),
                         },
                         {
-                            value: "joined",
+                            value: HistoryVisibility.Joined,
                             disabled: !canChangeHistory,
                             label: _t('Members only (since they joined)'),
                         },
@@ -348,7 +375,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
             encryptionSettings = <SettingsFlag
                 name="blacklistUnverifiedDevices"
                 level={SettingLevel.ROOM_DEVICE}
-                onChange={this._updateBlacklistDevicesFlag}
+                onChange={this.updateBlacklistDevicesFlag}
                 roomId={this.props.roomId}
             />;
         }
@@ -356,7 +383,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         let historySection = (<>
             <span className='mx_SettingsTab_subheading'>{_t("Who can read history?")}</span>
             <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                {this._renderHistory()}
+                {this.renderHistory()}
             </div>
         </>);
         if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
@@ -373,15 +400,16 @@ export default class SecurityRoomSettingsTab extends React.Component {
                         <div className='mx_SettingsTab_subsectionText'>
                             <span>{_t("Once enabled, encryption cannot be disabled.")}</span>
                         </div>
-                        <LabelledToggleSwitch value={isEncrypted} onChange={this._onEncryptionChange}
+                        <LabelledToggleSwitch value={isEncrypted} onChange={this.onEncryptionChange}
-                                              label={_t("Encrypted")} disabled={!canEnableEncryption} />
+                            label={_t("Encrypted")} disabled={!canEnableEncryption}
+                        />
                     </div>
                     {encryptionSettings}
                 </div>
 
                 <span className='mx_SettingsTab_subheading'>{_t("Who can access this room?")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    {this._renderRoomAccess()}
+                    {this.renderRoomAccess()}
                 </div>
 
                 {historySection}

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
-Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,27 +15,31 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, getCurrentLanguage} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
 import Modal from "../../../../../Modal";
-import * as sdk from "../../../../../";
+import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import UpdateCheckButton from "../../UpdateCheckButton";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+interface IProps {
+    closeSettingsFn: () => {};
+}
+
+interface IState {
+    appVersion: string;
+    canUpdate: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
-export default class HelpUserSettingsTab extends React.Component {
+export default class HelpUserSettingsTab extends React.Component<IProps, IState> {
-    static propTypes = {
+    constructor(props) {
-        closeSettingsFn: PropTypes.func.isRequired,
+        super(props);
-    };
-
-    constructor() {
-        super();
 
         this.state = {
             appVersion: null,
@@ -53,7 +56,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     }
 
-    _onClearCacheAndReload = (e) => {
+    private onClearCacheAndReload = (e) => {
         if (!PlatformPeg.get()) return;
 
         // Dev note: please keep this log line, it's useful when troubleshooting a MatrixClient suddenly
@@ -65,7 +68,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     };
 
-    _onBugReport = (e) => {
+    private onBugReport = (e) => {
         const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         if (!BugReportDialog) {
             return;
@@ -73,7 +76,7 @@ export default class HelpUserSettingsTab extends React.Component {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
     };
 
-    _onStartBotChat = (e) => {
+    private onStartBotChat = (e) => {
         this.props.closeSettingsFn();
         createRoom({
             dmUserId: SdkConfig.get().welcomeUserId,
@@ -81,7 +84,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     };
 
-    _showSpoiler = (event) => {
+    private showSpoiler = (event) => {
         const target = event.target;
         target.innerHTML = target.getAttribute('data-spoiler');
 
@@ -93,7 +96,7 @@ export default class HelpUserSettingsTab extends React.Component {
         selection.addRange(range);
     };
 
-    _renderLegal() {
+    private renderLegal() {
         const tocLinks = SdkConfig.get().terms_and_conditions_links;
         if (!tocLinks) return null;
 
@@ -114,7 +117,7 @@ export default class HelpUserSettingsTab extends React.Component {
         );
     }
 
-    _renderCredits() {
+    private renderCredits() {
         // Note: This is not translated because it is legal text.
         // Also, &nbsp; is ugly but necessary.
         return (
@@ -122,28 +125,28 @@ export default class HelpUserSettingsTab extends React.Component {
                 <span className='mx_SettingsTab_subheading'>{_t("Credits")}</span>
                 <ul>
                     <li>
-                        The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener" target="_blank">
+                        The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener"
-                        default cover photo</a> is ©&nbsp;
+                            target="_blank">default cover photo</a> is ©&nbsp;
-                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener" target="_blank">Jesús Roncero</a>{' '}
+                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener"
-                        used under the terms of&nbsp;
+                            target="_blank">Jesús Roncero</a> used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener" target="_blank">
+                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener"
-                        CC-BY-SA 4.0</a>.
+                            target="_blank">CC-BY-SA 4.0</a>.
                     </li>
                     <li>
                         The <a href="https://github.com/matrix-org/twemoji-colr" rel="noreferrer noopener"
-                               target="_blank"> twemoji-colr</a> font is ©&nbsp;
+                            target="_blank">twemoji-colr</a> font is ©&nbsp;
-                        <a href="https://mozilla.org" rel="noreferrer noopener" target="_blank">Mozilla Foundation</a>{' '}
+                        <a href="https://mozilla.org" rel="noreferrer noopener"
-                        used under the terms of&nbsp;
+                            target="_blank">Mozilla Foundation</a> used under the terms of&nbsp;
-                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">
+                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener"
-                        Apache 2.0</a>.
+                            target="_blank">Apache 2.0</a>.
                     </li>
                     <li>
-                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">
+                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener"
-                        Twemoji</a> emoji art is ©&nbsp;
+                            target="_blank">Twemoji</a> emoji art is ©&nbsp;
-                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">Twitter, Inc and other
+                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener"
-                        contributors</a> used under the terms of&nbsp;
+                            target="_blank">Twitter, Inc and other contributors</a> used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener" target="_blank">
+                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener"
-                        CC-BY 4.0</a>.
+                            target="_blank">CC-BY 4.0</a>.
                     </li>
                 </ul>
             </div>
@@ -188,7 +191,7 @@ export default class HelpUserSettingsTab extends React.Component {
                         },
                     )}
                     <div>
-                        <AccessibleButton onClick={this._onStartBotChat} kind='primary'>
+                        <AccessibleButton onClick={this.onStartBotChat} kind='primary'>
                             {_t("Chat with %(brand)s Bot", { brand })}
                         </AccessibleButton>
                     </div>
@@ -212,28 +215,27 @@ export default class HelpUserSettingsTab extends React.Component {
                 <div className="mx_SettingsTab_section">
                     <span className='mx_SettingsTab_subheading'>{_t('Bug reporting')}</span>
                     <div className='mx_SettingsTab_subsectionText'>
-                        {
+                        {_t(
-                            _t( "If you've submitted a bug via GitHub, debug logs can help " +
+                            "If you've submitted a bug via GitHub, debug logs can help " +
-                                "us track down the problem. Debug logs contain application " +
+                            "us track down the problem. Debug logs contain application " +
-                                "usage data including your username, the IDs or aliases of " +
+                            "usage data including your username, the IDs or aliases of " +
-                                "the rooms or groups you have visited and the usernames of " +
+                            "the rooms or groups you have visited and the usernames of " +
-                                "other users. They do not contain messages.",
+                            "other users. They do not contain messages.",
-                            )
+                        )}
-                        }
                         <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this._onBugReport} kind='primary'>
+                            <AccessibleButton onClick={this.onBugReport} kind='primary'>
                                 {_t("Submit debug logs")}
                             </AccessibleButton>
                         </div>
-                        {
+                        {_t(
-                            _t( "To report a Matrix-related security issue, please read the Matrix.org " +
+                            "To report a Matrix-related security issue, please read the Matrix.org " +
-                                "<a>Security Disclosure Policy</a>.", {},
+                            "<a>Security Disclosure Policy</a>.", {},
-                                {
+                            {
-                                    'a': (sub) =>
+                                a: sub => <a href="https://matrix.org/security-disclosure-policy/"
-                                        <a href="https://matrix.org/security-disclosure-policy/"
+                                    rel="noreferrer noopener" target="_blank"
-                                           rel="noreferrer noopener" target="_blank">{sub}</a>,
+                                >{sub}</a>,
-                                })
+                            },
-                        }
+                        )}
                     </div>
                 </div>
             );
@@ -260,20 +262,21 @@ export default class HelpUserSettingsTab extends React.Component {
                         {updateButton}
                     </div>
                 </div>
-                {this._renderLegal()}
+                {this.renderLegal()}
-                {this._renderCredits()}
+                {this.renderCredits()}
                 <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
                     <span className='mx_SettingsTab_subheading'>{_t("Advanced")}</span>
                     <div className='mx_SettingsTab_subsectionText'>
                         {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code><br />
                         {_t("Identity Server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code><br />
                         {_t("Access Token:") + ' '}
-                        <AccessibleButton element="span" onClick={this._showSpoiler}
+                        <AccessibleButton element="span" onClick={this.showSpoiler}
-                                          data-spoiler={MatrixClientPeg.get().getAccessToken()}>
+                            data-spoiler={MatrixClientPeg.get().getAccessToken()}
+                        >
                             &lt;{ _t("click to reveal") }&gt;
                         </AccessibleButton>
                         <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this._onClearCacheAndReload} kind='danger'>
+                            <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
                                 {_t("Clear cache and reload")}
                             </AccessibleButton>
                         </div>

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,10 +25,16 @@ import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
 
+interface IState {
+    busy: boolean;
+    newPersonalRule: string;
+    newList: string;
+}
+
 @replaceableComponent("views.settings.tabs.user.MjolnirUserSettingsTab")
-export default class MjolnirUserSettingsTab extends React.Component {
+export default class MjolnirUserSettingsTab extends React.Component<{}, IState> {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
 
         this.state = {
             busy: false,
@@ -37,15 +43,15 @@ export default class MjolnirUserSettingsTab extends React.Component {
         };
     }
 
-    _onPersonalRuleChanged = (e) => {
+    private onPersonalRuleChanged = (e) => {
         this.setState({newPersonalRule: e.target.value});
     };
 
-    _onNewListChanged = (e) => {
+    private onNewListChanged = (e) => {
         this.setState({newList: e.target.value});
     };
 
-    _onAddPersonalRule = async (e) => {
+    private onAddPersonalRule = async (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -72,7 +78,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     };
 
-    _onSubscribeList = async (e) => {
+    private onSubscribeList = async (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -94,7 +100,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     };
 
-    async _removePersonalRule(rule: ListRule) {
+    private async removePersonalRule(rule: ListRule) {
         this.setState({busy: true});
         try {
             const list = Mjolnir.sharedInstance().getPersonalList();
@@ -112,7 +118,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     }
 
-    async _unsubscribeFromList(list: BanList) {
+    private async unsubscribeFromList(list: BanList) {
         this.setState({busy: true});
         try {
             await Mjolnir.sharedInstance().unsubscribeFromList(list.roomId);
@@ -130,7 +136,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     }
 
-    _viewListRules(list: BanList) {
+    private viewListRules(list: BanList) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         const room = MatrixClientPeg.get().getRoom(list.roomId);
@@ -161,7 +167,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         });
     }
 
-    _renderPersonalBanListRules() {
+    private renderPersonalBanListRules() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const list = Mjolnir.sharedInstance().getPersonalList();
@@ -174,7 +180,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
                 <li key={rule.entity} className="mx_MjolnirUserSettingsTab_listItem">
                     <AccessibleButton
                         kind="danger_sm"
-                        onClick={() => this._removePersonalRule(rule)}
+                        onClick={() => this.removePersonalRule(rule)}
                         disabled={this.state.busy}
                     >
                         {_t("Remove")}
@@ -192,7 +198,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         );
     }
 
-    _renderSubscribedBanLists() {
+    private renderSubscribedBanLists() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const personalList = Mjolnir.sharedInstance().getPersonalList();
@@ -209,14 +215,14 @@ export default class MjolnirUserSettingsTab extends React.Component {
                 <li key={list.roomId} className="mx_MjolnirUserSettingsTab_listItem">
                     <AccessibleButton
                         kind="danger_sm"
-                        onClick={() => this._unsubscribeFromList(list)}
+                        onClick={() => this.unsubscribeFromList(list)}
                         disabled={this.state.busy}
                     >
                         {_t("Unsubscribe")}
                     </AccessibleButton>&nbsp;
                     <AccessibleButton
                         kind="primary_sm"
-                        onClick={() => this._viewListRules(list)}
+                        onClick={() => this.viewListRules(list)}
                         disabled={this.state.busy}
                     >
                         {_t("View rules")}
@@ -271,21 +277,21 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         )}
                     </div>
                     <div>
-                        {this._renderPersonalBanListRules()}
+                        {this.renderPersonalBanListRules()}
                     </div>
                     <div>
-                        <form onSubmit={this._onAddPersonalRule} autoComplete="off">
+                        <form onSubmit={this.onAddPersonalRule} autoComplete="off">
                             <Field
                                 type="text"
                                 label={_t("Server or user ID to ignore")}
                                 placeholder={_t("eg: @bot:* or example.org")}
                                 value={this.state.newPersonalRule}
-                                onChange={this._onPersonalRuleChanged}
+                                onChange={this.onPersonalRuleChanged}
                             />
                             <AccessibleButton
                                 type="submit"
                                 kind="primary"
-                                onClick={this._onAddPersonalRule}
+                                onClick={this.onAddPersonalRule}
                                 disabled={this.state.busy}
                             >
                                 {_t("Ignore")}
@@ -303,20 +309,20 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         )}</span>
                     </div>
                     <div>
-                        {this._renderSubscribedBanLists()}
+                        {this.renderSubscribedBanLists()}
                     </div>
                     <div>
-                        <form onSubmit={this._onSubscribeList} autoComplete="off">
+                        <form onSubmit={this.onSubscribeList} autoComplete="off">
                             <Field
                                 type="text"
                                 label={_t("Room ID or address of ban list")}
                                 value={this.state.newList}
-                                onChange={this._onNewListChanged}
+                                onChange={this.onNewListChanged}
                             />
                             <AccessibleButton
                                 type="submit"
                                 kind="primary"
-                                onClick={this._onSubscribeList}
+                                onClick={this.onSubscribeList}
                                 disabled={this.state.busy}
                             >
                                 {_t("Subscribe")}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,10 +23,24 @@ import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+interface IState {
+    autoLaunch: boolean;
+    autoLaunchSupported: boolean;
+    warnBeforeExit: boolean;
+    warnBeforeExitSupported: boolean;
+    alwaysShowMenuBarSupported: boolean;
+    alwaysShowMenuBar: boolean;
+    minimizeToTraySupported: boolean;
+    minimizeToTray: boolean;
+    autocompleteDelay: string;
+    readMarkerInViewThresholdMs: string;
+    readMarkerOutOfViewThresholdMs: string;
+}
 
 @replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component {
+export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
     static ROOM_LIST_SETTINGS = [
         'breadcrumbs',
     ];
@@ -68,8 +82,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         // Autocomplete delay (niche text box)
     ];
 
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
 
         this.state = {
             autoLaunch: false,
@@ -89,7 +103,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         };
     }
 
-    async componentDidMount(): void {
+    async componentDidMount() {
         const platform = PlatformPeg.get();
 
         const autoLaunchSupported = await platform.supportsAutoLaunch();
@@ -128,38 +142,38 @@ export default class PreferencesUserSettingsTab extends React.Component {
         });
     }
 
-    _onAutoLaunchChange = (checked) => {
+    private onAutoLaunchChange = (checked: boolean) => {
         PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
     };
 
-    _onWarnBeforeExitChange = (checked) => {
+    private onWarnBeforeExitChange = (checked: boolean) => {
         PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
     }
 
-    _onAlwaysShowMenuBarChange = (checked) => {
+    private onAlwaysShowMenuBarChange = (checked: boolean) => {
         PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
     };
 
-    _onMinimizeToTrayChange = (checked) => {
+    private onMinimizeToTrayChange = (checked: boolean) => {
         PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({minimizeToTray: checked}));
     };
 
-    _onAutocompleteDelayChange = (e) => {
+    private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({autocompleteDelay: e.target.value});
         SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onReadMarkerInViewThresholdMs = (e) => {
+    private onReadMarkerInViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({readMarkerInViewThresholdMs: e.target.value});
         SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onReadMarkerOutOfViewThresholdMs = (e) => {
+    private onReadMarkerOutOfViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _renderGroup(settingIds) {
+    private renderGroup(settingIds: string[]): React.ReactNodeArray {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         return settingIds.filter(SettingsStore.isEnabled).map(i => {
             return <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />;
@@ -171,7 +185,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.autoLaunchSupported) {
             autoLaunchOption = <LabelledToggleSwitch
                 value={this.state.autoLaunch}
-                onChange={this._onAutoLaunchChange}
+                onChange={this.onAutoLaunchChange}
                 label={_t('Start automatically after system login')} />;
         }
 
@@ -179,7 +193,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.warnBeforeExitSupported) {
             warnBeforeExitOption = <LabelledToggleSwitch
                 value={this.state.warnBeforeExit}
-                onChange={this._onWarnBeforeExitChange}
+                onChange={this.onWarnBeforeExitChange}
                 label={_t('Warn before quitting')} />;
         }
 
@@ -187,7 +201,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.alwaysShowMenuBarSupported) {
             autoHideMenuOption = <LabelledToggleSwitch
                 value={this.state.alwaysShowMenuBar}
-                onChange={this._onAlwaysShowMenuBarChange}
+                onChange={this.onAlwaysShowMenuBarChange}
                 label={_t('Always show the window menu bar')} />;
         }
 
@@ -195,7 +209,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.minimizeToTraySupported) {
             minimizeToTrayOption = <LabelledToggleSwitch
                 value={this.state.minimizeToTray}
-                onChange={this._onMinimizeToTrayChange}
+                onChange={this.onMinimizeToTrayChange}
                 label={_t('Show tray icon and minimize window to it on close')} />;
         }
 
@@ -205,22 +219,22 @@ export default class PreferencesUserSettingsTab extends React.Component {
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("General")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
                     {minimizeToTrayOption}
                     {autoHideMenuOption}
                     {autoLaunchOption}
@@ -229,17 +243,17 @@ export default class PreferencesUserSettingsTab extends React.Component {
                         label={_t('Autocomplete delay (ms)')}
                         type='number'
                         value={this.state.autocompleteDelay}
-                        onChange={this._onAutocompleteDelayChange} />
+                        onChange={this.onAutocompleteDelayChange} />
                     <Field
                         label={_t('Read Marker lifetime (ms)')}
                         type='number'
                         value={this.state.readMarkerInViewThresholdMs}
-                        onChange={this._onReadMarkerInViewThresholdMs} />
+                        onChange={this.onReadMarkerInViewThresholdMs} />
                     <Field
                         label={_t('Read Marker off-screen lifetime (ms)')}
                         type='number'
                         value={this.state.readMarkerOutOfViewThresholdMs}
-                        onChange={this._onReadMarkerOutOfViewThresholdMs} />
+                        onChange={this.onReadMarkerOutOfViewThresholdMs} />
                 </div>
             </div>
         );

src/indexing/BaseEventIndexManager.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -133,6 +133,10 @@ export default abstract class BaseEventIndexManager {
         throw new Error("Unimplemented");
     }
 
+    async isEventIndexEmpty(): Promise<boolean> {
+        throw new Error("Unimplemented");
+    }
+
     /**
      * Check if our event index is empty.
      */

src/indexing/EventIndexPeg.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,12 +27,11 @@ import {SettingLevel} from "../settings/SettingLevel";
 
 const INDEX_VERSION = 1;
 
-class EventIndexPeg {
+export class EventIndexPeg {
-    constructor() {
+    public index: EventIndex = null;
-        this.index = null;
+    public error: Error = null;
-        this._supportIsInstalled = false;
+
-        this.error = null;
+    private _supportIsInstalled = false;
-    }
 
     /**
      * Initialize the EventIndexPeg and if event indexing is enabled initialize
@@ -181,7 +180,7 @@ class EventIndexPeg {
     }
 }
 
-if (!global.mxEventIndexPeg) {
+if (!window.mxEventIndexPeg) {
-    global.mxEventIndexPeg = new EventIndexPeg();
+    window.mxEventIndexPeg = new EventIndexPeg();
 }
-export default global.mxEventIndexPeg;
+export default window.mxEventIndexPeg;

src/stores/TypingStore.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,15 +25,23 @@ const TYPING_SERVER_TIMEOUT = 30000;
  * Tracks typing state for users.
  */
 export default class TypingStore {
+    private typingStates: {
+        [roomId: string]: {
+            isTyping: boolean,
+            userTimer: Timer,
+            serverTimer: Timer,
+        },
+    };
+
     constructor() {
         this.reset();
     }
 
     static sharedInstance(): TypingStore {
-        if (global.mxTypingStore === undefined) {
+        if (window.mxTypingStore === undefined) {
-            global.mxTypingStore = new TypingStore();
+            window.mxTypingStore = new TypingStore();
         }
-        return global.mxTypingStore;
+        return window.mxTypingStore;
     }
 
     /**
@@ -41,7 +49,7 @@ export default class TypingStore {
      * MatrixClientPeg client changes.
      */
     reset() {
-        this._typingStates = {
+        this.typingStates = {
             // "roomId": {
             //     isTyping: bool,     // Whether the user is typing or not
             //     userTimer: Timer,   // Local timeout for "user has stopped typing"
@@ -59,14 +67,14 @@ export default class TypingStore {
         if (!SettingsStore.getValue('sendTypingNotifications')) return;
         if (SettingsStore.getValue('lowBandwidth')) return;
 
-        let currentTyping = this._typingStates[roomId];
+        let currentTyping = this.typingStates[roomId];
         if ((!isTyping && !currentTyping) || (currentTyping && currentTyping.isTyping === isTyping)) {
             // No change in state, so don't do anything. We'll let the timer run its course.
             return;
         }
 
         if (!currentTyping) {
-            currentTyping = this._typingStates[roomId] = {
+            currentTyping = this.typingStates[roomId] = {
                 isTyping: isTyping,
                 serverTimer: new Timer(TYPING_SERVER_TIMEOUT),
                 userTimer: new Timer(TYPING_USER_TIMEOUT),
@@ -78,7 +86,7 @@ export default class TypingStore {
         if (isTyping) {
             if (!currentTyping.serverTimer.isRunning()) {
                 currentTyping.serverTimer.restart().finished().then(() => {
-                    const currentTyping = this._typingStates[roomId];
+                    const currentTyping = this.typingStates[roomId];
                     if (currentTyping) currentTyping.isTyping = false;
 
                     // The server will (should) time us out on typing, so we don't

src/stores/WidgetEchoStore.ts

@@ -1,6 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
-Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,6 +15,8 @@ limitations under the License.
 */
 
 import EventEmitter from 'events';
+import { IWidget } from 'matrix-widget-api';
+import MatrixEvent from "matrix-js-sdk/src/models/event";
 import {WidgetType} from "../widgets/WidgetType";
 
 /**
@@ -23,14 +24,20 @@ import {WidgetType} from "../widgets/WidgetType";
  * proxying through state from the js-sdk.
  */
 class WidgetEchoStore extends EventEmitter {
+    private roomWidgetEcho: {
+        [roomId: string]: {
+            [widgetId: string]: IWidget,
+        },
+    };
+
     constructor() {
         super();
 
-        this._roomWidgetEcho = {
+        this.roomWidgetEcho = {
             // Map as below. Object is the content of the widget state event,
             // so for widgets that have been deleted locally, the object is empty.
             // roomId: {
-            //     widgetId: [object]
+            //     widgetId: IWidget
             // }
         };
     }
@@ -42,14 +49,14 @@ class WidgetEchoStore extends EventEmitter {
      * and we don't really need the actual widget events anyway since we just want to
      * show a spinner / prevent widgets being added twice.
      *
-     * @param {Room} roomId The ID of the room to get widgets for
+     * @param {string} roomId The ID of the room to get widgets for
      * @param {MatrixEvent[]} currentRoomWidgets Current widgets for the room
      * @returns {MatrixEvent[]} List of widgets in the room, minus any pending removal
      */
-    getEchoedRoomWidgets(roomId, currentRoomWidgets) {
+    getEchoedRoomWidgets(roomId: string, currentRoomWidgets: MatrixEvent[]): MatrixEvent[] {
         const echoedWidgets = [];
 
-        const roomEchoState = Object.assign({}, this._roomWidgetEcho[roomId]);
+        const roomEchoState = Object.assign({}, this.roomWidgetEcho[roomId]);
 
         for (const w of currentRoomWidgets) {
             const widgetId = w.getStateKey();
@@ -65,8 +72,8 @@ class WidgetEchoStore extends EventEmitter {
         return echoedWidgets;
     }
 
-    roomHasPendingWidgetsOfType(roomId, currentRoomWidgets, type: WidgetType) {
+    roomHasPendingWidgetsOfType(roomId: string, currentRoomWidgets: MatrixEvent[], type?: WidgetType): boolean {
-        const roomEchoState = Object.assign({}, this._roomWidgetEcho[roomId]);
+        const roomEchoState = Object.assign({}, this.roomWidgetEcho[roomId]);
 
         // any widget IDs that are already in the room are not pending, so
         // echoes for them don't count as pending.
@@ -85,20 +92,20 @@ class WidgetEchoStore extends EventEmitter {
         }
     }
 
-    roomHasPendingWidgets(roomId, currentRoomWidgets) {
+    roomHasPendingWidgets(roomId: string, currentRoomWidgets: MatrixEvent[]): boolean {
         return this.roomHasPendingWidgetsOfType(roomId, currentRoomWidgets);
     }
 
-    setRoomWidgetEcho(roomId, widgetId, state) {
+    setRoomWidgetEcho(roomId: string, widgetId: string, state: IWidget) {
-        if (this._roomWidgetEcho[roomId] === undefined) this._roomWidgetEcho[roomId] = {};
+        if (this.roomWidgetEcho[roomId] === undefined) this.roomWidgetEcho[roomId] = {};
 
-        this._roomWidgetEcho[roomId][widgetId] = state;
+        this.roomWidgetEcho[roomId][widgetId] = state;
         this.emit('update', roomId, widgetId);
     }
 
-    removeRoomWidgetEcho(roomId, widgetId) {
+    removeRoomWidgetEcho(roomId: string, widgetId: string) {
-        delete this._roomWidgetEcho[roomId][widgetId];
+        delete this.roomWidgetEcho[roomId][widgetId];
-        if (Object.keys(this._roomWidgetEcho[roomId]).length === 0) delete this._roomWidgetEcho[roomId];
+        if (Object.keys(this.roomWidgetEcho[roomId]).length === 0) delete this.roomWidgetEcho[roomId];
         this.emit('update', roomId, widgetId);
     }
 }

src/utils/AutoDiscoveryUtils.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
 import {_t, _td, newTranslatableError} from "../languageHandler";
 import {makeType} from "./TypeUtils";
 import SdkConfig from '../SdkConfig';
 
-const LIVELINESS_DISCOVERY_ERRORS = [
+const LIVELINESS_DISCOVERY_ERRORS: string[] = [
     AutoDiscovery.ERROR_INVALID_HOMESERVER,
     AutoDiscovery.ERROR_INVALID_IDENTITY_SERVER,
 ];
@@ -40,17 +39,23 @@ export class ValidatedServerConfig {
     warning: string;
 }
 
+export interface IAuthComponentState {
+    serverIsAlive: boolean;
+    serverErrorIsFatal: boolean;
+    serverDeadError?: ReactNode;
+}
+
 export default class AutoDiscoveryUtils {
     /**
      * Checks if a given error or error message is considered an error
      * relating to the liveliness of the server. Must be an error returned
      * from this AutoDiscoveryUtils class.
-     * @param {string|Error} error The error to check
+     * @param {string | Error} error The error to check
      * @returns {boolean} True if the error is a liveliness error.
      */
-    static isLivelinessError(error: string|Error): boolean {
+    static isLivelinessError(error: string | Error): boolean {
         if (!error) return false;
-        return !!LIVELINESS_DISCOVERY_ERRORS.find(e => e === error || e === error.message);
+        return !!LIVELINESS_DISCOVERY_ERRORS.find(e => typeof error === "string" ? e === error : e === error.message);
     }
 
     /**
@@ -61,7 +66,7 @@ export default class AutoDiscoveryUtils {
      * implementation for known values.
      * @returns {*} The state for the component, given the error.
      */
-    static authComponentStateForError(err: string | Error | null, pageName = "login"): Object {
+    static authComponentStateForError(err: string | Error | null, pageName = "login"): IAuthComponentState {
         if (!err) {
             return {
                 serverIsAlive: true,
@@ -70,7 +75,7 @@ export default class AutoDiscoveryUtils {
             };
         }
         let title = _t("Cannot reach homeserver");
-        let body = _t("Ensure you have a stable internet connection, or get in touch with the server admin");
+        let body: ReactNode = _t("Ensure you have a stable internet connection, or get in touch with the server admin");
         if (!AutoDiscoveryUtils.isLivelinessError(err)) {
             const brand = SdkConfig.get().brand;
             title = _t("Your %(brand)s is misconfigured", { brand });
@@ -92,7 +97,7 @@ export default class AutoDiscoveryUtils {
         }
 
         let isFatalError = true;
-        const errorMessage = err.message ? err.message : err;
+        const errorMessage = typeof err === "string" ? err : err.message;
         if (errorMessage === AutoDiscovery.ERROR_INVALID_IDENTITY_SERVER) {
             isFatalError = false;
             title = _t("Cannot reach identity server");
@@ -141,7 +146,10 @@ export default class AutoDiscoveryUtils {
      * @returns {Promise<ValidatedServerConfig>} Resolves to the validated configuration.
      */
     static async validateServerConfigWithStaticUrls(
-        homeserverUrl: string, identityUrl: string, syntaxOnly = false): ValidatedServerConfig {
+        homeserverUrl: string,
+        identityUrl?: string,
+        syntaxOnly = false,
+    ): Promise<ValidatedServerConfig> {
         if (!homeserverUrl) {
             throw newTranslatableError(_td("No homeserver URL provided"));
         }
@@ -171,7 +179,7 @@ export default class AutoDiscoveryUtils {
      * @param {string} serverName The homeserver domain name (eg: "matrix.org") to validate.
      * @returns {Promise<ValidatedServerConfig>} Resolves to the validated configuration.
      */
-    static async validateServerName(serverName: string): ValidatedServerConfig {
+    static async validateServerName(serverName: string): Promise<ValidatedServerConfig> {
         const result = await AutoDiscovery.findClientConfig(serverName);
         return AutoDiscoveryUtils.buildValidatedConfigFromDiscovery(serverName, result);
     }

src/utils/StorageManager.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -32,15 +32,15 @@ try {
 const SYNC_STORE_NAME = "riot-web-sync";
 const CRYPTO_STORE_NAME = "matrix-js-sdk:crypto";
 
-function log(msg) {
+function log(msg: string) {
     console.log(`StorageManager: ${msg}`);
 }
 
-function error(msg) {
+function error(msg: string, ...args: string[]) {
-    console.error(`StorageManager: ${msg}`);
+    console.error(`StorageManager: ${msg}`, ...args);
 }
 
-function track(action) {
+function track(action: string) {
     Analytics.trackEvent("StorageManager", action);
 }
 
@@ -73,7 +73,7 @@ export async function checkConsistency() {
         dataInLocalStorage = localStorage.length > 0;
         log(`Local storage contains data? ${dataInLocalStorage}`);
 
-        cryptoInited = localStorage.getItem("mx_crypto_initialised");
+        cryptoInited = !!localStorage.getItem("mx_crypto_initialised");
         log(`Crypto initialised? ${cryptoInited}`);
     } else {
         healthy = false;

src/utils/Timer.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,44 +26,48 @@ Once a timer is finished or aborted, it can't be started again
 a new one through `clone()` or `cloneIfRun()`.
 */
 export default class Timer {
-    constructor(timeout) {
+    private timerHandle: NodeJS.Timeout;
-        this._timeout = timeout;
+    private startTs: number;
-        this._onTimeout = this._onTimeout.bind(this);
+    private promise: Promise<void>;
-        this._setNotStarted();
+    private resolve: () => void;
+    private reject: (Error) => void;
+
+    constructor(private timeout: number) {
+        this.setNotStarted();
     }
 
-    _setNotStarted() {
+    private setNotStarted() {
-        this._timerHandle = null;
+        this.timerHandle = null;
-        this._startTs = null;
+        this.startTs = null;
-        this._promise = new Promise((resolve, reject) => {
+        this.promise = new Promise<void>((resolve, reject) => {
-            this._resolve = resolve;
+            this.resolve = resolve;
-            this._reject = reject;
+            this.reject = reject;
         }).finally(() => {
-            this._timerHandle = null;
+            this.timerHandle = null;
         });
     }
 
-    _onTimeout() {
+    private onTimeout = () => {
         const now = Date.now();
-        const elapsed = now - this._startTs;
+        const elapsed = now - this.startTs;
-        if (elapsed >= this._timeout) {
+        if (elapsed >= this.timeout) {
-            this._resolve();
+            this.resolve();
-            this._setNotStarted();
+            this.setNotStarted();
         } else {
-            const delta = this._timeout - elapsed;
+            const delta = this.timeout - elapsed;
-            this._timerHandle = setTimeout(this._onTimeout, delta);
+            this.timerHandle = setTimeout(this.onTimeout, delta);
         }
     }
 
-    changeTimeout(timeout) {
+    changeTimeout(timeout: number) {
-        if (timeout === this._timeout) {
+        if (timeout === this.timeout) {
             return;
         }
-        const isSmallerTimeout = timeout < this._timeout;
+        const isSmallerTimeout = timeout < this.timeout;
-        this._timeout = timeout;
+        this.timeout = timeout;
         if (this.isRunning() && isSmallerTimeout) {
-            clearTimeout(this._timerHandle);
+            clearTimeout(this.timerHandle);
-            this._onTimeout();
+            this.onTimeout();
         }
     }
 
@@ -73,8 +77,8 @@ export default class Timer {
      */
     start() {
         if (!this.isRunning()) {
-            this._startTs = Date.now();
+            this.startTs = Date.now();
-            this._timerHandle = setTimeout(this._onTimeout, this._timeout);
+            this.timerHandle = setTimeout(this.onTimeout, this.timeout);
         }
         return this;
     }
@@ -89,7 +93,7 @@ export default class Timer {
             // can be called in fast succession,
             // instead just take note and compare
             // when the already running timeout expires
-            this._startTs = Date.now();
+            this.startTs = Date.now();
             return this;
         } else {
             return this.start();
@@ -103,9 +107,9 @@ export default class Timer {
      */
     abort() {
         if (this.isRunning()) {
-            clearTimeout(this._timerHandle);
+            clearTimeout(this.timerHandle);
-            this._reject(new Error("Timer was aborted."));
+            this.reject(new Error("Timer was aborted."));
-            this._setNotStarted();
+            this.setNotStarted();
         }
         return this;
     }
@@ -116,10 +120,10 @@ export default class Timer {
      *@return {Promise}
      */
     finished() {
-        return this._promise;
+        return this.promise;
     }
 
     isRunning() {
-        return this._timerHandle !== null;
+        return this.timerHandle !== null;
     }
 }

src/utils/permalinks/ElementPermalinkConstructor.ts

@@ -20,31 +20,31 @@ import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
  * Generates permalinks that self-reference the running webapp
  */
 export default class ElementPermalinkConstructor extends PermalinkConstructor {
-    _elementUrl: string;
+    private elementUrl: string;
 
     constructor(elementUrl: string) {
         super();
-        this._elementUrl = elementUrl;
+        this.elementUrl = elementUrl;
 
-        if (!this._elementUrl.startsWith("http:") && !this._elementUrl.startsWith("https:")) {
+        if (!this.elementUrl.startsWith("http:") && !this.elementUrl.startsWith("https:")) {
             throw new Error("Element prefix URL does not appear to be an HTTP(S) URL");
         }
     }
 
     forEvent(roomId: string, eventId: string, serverCandidates: string[]): string {
-        return `${this._elementUrl}/#/room/${roomId}/${eventId}${this.encodeServerCandidates(serverCandidates)}`;
+        return `${this.elementUrl}/#/room/${roomId}/${eventId}${this.encodeServerCandidates(serverCandidates)}`;
     }
 
-    forRoom(roomIdOrAlias: string, serverCandidates: string[]): string {
+    forRoom(roomIdOrAlias: string, serverCandidates?: string[]): string {
-        return `${this._elementUrl}/#/room/${roomIdOrAlias}${this.encodeServerCandidates(serverCandidates)}`;
+        return `${this.elementUrl}/#/room/${roomIdOrAlias}${this.encodeServerCandidates(serverCandidates)}`;
     }
 
     forUser(userId: string): string {
-        return `${this._elementUrl}/#/user/${userId}`;
+        return `${this.elementUrl}/#/user/${userId}`;
     }
 
     forGroup(groupId: string): string {
-        return `${this._elementUrl}/#/group/${groupId}`;
+        return `${this.elementUrl}/#/group/${groupId}`;
     }
 
     forEntity(entityId: string): string {
@@ -58,11 +58,11 @@ export default class ElementPermalinkConstructor extends PermalinkConstructor {
     }
 
     isPermalinkHost(testHost: string): boolean {
-        const parsedUrl = new URL(this._elementUrl);
+        const parsedUrl = new URL(this.elementUrl);
         return testHost === (parsedUrl.host || parsedUrl.hostname); // one of the hosts should match
     }
 
-    encodeServerCandidates(candidates: string[]) {
+    encodeServerCandidates(candidates?: string[]) {
         if (!candidates || candidates.length === 0) return '';
         return `?via=${candidates.map(c => encodeURIComponent(c)).join("&via=")}`;
     }
@@ -71,11 +71,11 @@ export default class ElementPermalinkConstructor extends PermalinkConstructor {
     // https://github.com/turt2live/matrix-js-bot-sdk/blob/7c4665c9a25c2c8e0fe4e509f2616505b5b66a1c/src/Permalinks.ts#L33-L61
     // Adapted for Element's URL format
     parsePermalink(fullUrl: string): PermalinkParts {
-        if (!fullUrl || !fullUrl.startsWith(this._elementUrl)) {
+        if (!fullUrl || !fullUrl.startsWith(this.elementUrl)) {
             throw new Error("Does not appear to be a permalink");
         }
 
-        const parts = fullUrl.substring(`${this._elementUrl}/#/`.length);
+        const parts = fullUrl.substring(`${this.elementUrl}/#/`.length);
         return ElementPermalinkConstructor.parseAppRoute(parts);
     }
 

src/utils/permalinks/Permalinks.ts

@@ -17,6 +17,9 @@ limitations under the License.
 import isIp from "is-ip";
 import * as utils from "matrix-js-sdk/src/utils";
 import {Room} from "matrix-js-sdk/src/models/room";
+import {EventType} from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import SpecPermalinkConstructor, {baseUrl as matrixtoBaseUrl} from "./SpecPermalinkConstructor";
@@ -74,29 +77,35 @@ const MAX_SERVER_CANDIDATES = 3;
 // the list and magically have the link work.
 
 export class RoomPermalinkCreator {
+    private room: Room;
+    private roomId: string;
+    private highestPlUserId: string;
+    private populationMap: { [serverName: string]: number };
+    private bannedHostsRegexps: RegExp[];
+    private allowedHostsRegexps: RegExp[];
+    private _serverCandidates: string[];
+    private started: boolean;
+
     // We support being given a roomId as a fallback in the event the `room` object
     // doesn't exist or is not healthy for us to rely on. For example, loading a
     // permalink to a room which the MatrixClient doesn't know about.
-    constructor(room, roomId = null) {
+    constructor(room: Room, roomId: string = null) {
-        this._room = room;
+        this.room = room;
-        this._roomId = room ? room.roomId : roomId;
+        this.roomId = room ? room.roomId : roomId;
-        this._highestPlUserId = null;
+        this.highestPlUserId = null;
-        this._populationMap = null;
+        this.populationMap = null;
-        this._bannedHostsRegexps = null;
+        this.bannedHostsRegexps = null;
-        this._allowedHostsRegexps = null;
+        this.allowedHostsRegexps = null;
         this._serverCandidates = null;
-        this._started = false;
+        this.started = false;
 
-        if (!this._roomId) {
+        if (!this.roomId) {
             throw new Error("Failed to resolve a roomId for the permalink creator to use");
         }
-
-        this.onMembership = this.onMembership.bind(this);
-        this.onRoomState = this.onRoomState.bind(this);
     }
 
     load() {
-        if (!this._room || !this._room.currentState) {
+        if (!this.room || !this.room.currentState) {
             // Under rare and unknown circumstances it is possible to have a room with no
             // currentState, at least potentially at the early stages of joining a room.
             // To avoid breaking everything, we'll just warn rather than throw as well as
@@ -104,23 +113,23 @@ export class RoomPermalinkCreator {
             console.warn("Tried to load a permalink creator with no room state");
             return;
         }
-        this._updateAllowedServers();
+        this.updateAllowedServers();
-        this._updateHighestPlUser();
+        this.updateHighestPlUser();
-        this._updatePopulationMap();
+        this.updatePopulationMap();
-        this._updateServerCandidates();
+        this.updateServerCandidates();
     }
 
     start() {
         this.load();
-        this._room.on("RoomMember.membership", this.onMembership);
+        this.room.on("RoomMember.membership", this.onMembership);
-        this._room.on("RoomState.events", this.onRoomState);
+        this.room.on("RoomState.events", this.onRoomState);
-        this._started = true;
+        this.started = true;
     }
 
     stop() {
-        this._room.removeListener("RoomMember.membership", this.onMembership);
+        this.room.removeListener("RoomMember.membership", this.onMembership);
-        this._room.removeListener("RoomState.events", this.onRoomState);
+        this.room.removeListener("RoomState.events", this.onRoomState);
-        this._started = false;
+        this.started = false;
     }
 
     get serverCandidates() {
@@ -128,44 +137,44 @@ export class RoomPermalinkCreator {
     }
 
     isStarted() {
-        return this._started;
+        return this.started;
     }
 
-    forEvent(eventId) {
+    forEvent(eventId: string): string {
-        return getPermalinkConstructor().forEvent(this._roomId, eventId, this._serverCandidates);
+        return getPermalinkConstructor().forEvent(this.roomId, eventId, this._serverCandidates);
     }
 
-    forShareableRoom() {
+    forShareableRoom(): string {
-        if (this._room) {
+        if (this.room) {
             // Prefer to use canonical alias for permalink if possible
-            const alias = this._room.getCanonicalAlias();
+            const alias = this.room.getCanonicalAlias();
             if (alias) {
                 return getPermalinkConstructor().forRoom(alias, this._serverCandidates);
             }
         }
-        return getPermalinkConstructor().forRoom(this._roomId, this._serverCandidates);
+        return getPermalinkConstructor().forRoom(this.roomId, this._serverCandidates);
     }
 
-    forRoom() {
+    forRoom(): string {
-        return getPermalinkConstructor().forRoom(this._roomId, this._serverCandidates);
+        return getPermalinkConstructor().forRoom(this.roomId, this._serverCandidates);
     }
 
-    onRoomState(event) {
+    private onRoomState = (event: MatrixEvent) => {
         switch (event.getType()) {
-            case "m.room.server_acl":
+            case EventType.RoomServerAcl:
-                this._updateAllowedServers();
+                this.updateAllowedServers();
-                this._updateHighestPlUser();
+                this.updateHighestPlUser();
-                this._updatePopulationMap();
+                this.updatePopulationMap();
-                this._updateServerCandidates();
+                this.updateServerCandidates();
                 return;
-            case "m.room.power_levels":
+            case EventType.RoomPowerLevels:
-                this._updateHighestPlUser();
+                this.updateHighestPlUser();
-                this._updateServerCandidates();
+                this.updateServerCandidates();
                 return;
         }
     }
 
-    onMembership(evt, member, oldMembership) {
+    private onMembership = (evt: MatrixEvent, member: RoomMember, oldMembership: string) => {
         const userId = member.userId;
         const membership = member.membership;
         const serverName = getServerName(userId);
@@ -173,17 +182,17 @@ export class RoomPermalinkCreator {
         const hasLeft = oldMembership === "join" && membership !== "join";
 
         if (hasLeft) {
-            this._populationMap[serverName]--;
+            this.populationMap[serverName]--;
         } else if (hasJoined) {
-            this._populationMap[serverName]++;
+            this.populationMap[serverName]++;
         }
 
-        this._updateHighestPlUser();
+        this.updateHighestPlUser();
-        this._updateServerCandidates();
+        this.updateServerCandidates();
     }
 
-    _updateHighestPlUser() {
+    private updateHighestPlUser() {
-        const plEvent = this._room.currentState.getStateEvents("m.room.power_levels", "");
+        const plEvent = this.room.currentState.getStateEvents("m.room.power_levels", "");
         if (plEvent) {
             const content = plEvent.getContent();
             if (content) {
@@ -191,14 +200,14 @@ export class RoomPermalinkCreator {
                 if (users) {
                     const entries = Object.entries(users);
                     const allowedEntries = entries.filter(([userId]) => {
-                        const member = this._room.getMember(userId);
+                        const member = this.room.getMember(userId);
                         if (!member || member.membership !== "join") {
                             return false;
                         }
                         const serverName = getServerName(userId);
                         return !isHostnameIpAddress(serverName) &&
-                            !isHostInRegex(serverName, this._bannedHostsRegexps) &&
+                            !isHostInRegex(serverName, this.bannedHostsRegexps) &&
-                            isHostInRegex(serverName, this._allowedHostsRegexps);
+                            isHostInRegex(serverName, this.allowedHostsRegexps);
                     });
                     const maxEntry = allowedEntries.reduce((max, entry) => {
                         return (entry[1] > max[1]) ? entry : max;
@@ -206,20 +215,20 @@ export class RoomPermalinkCreator {
                     const [userId, powerLevel] = maxEntry;
                     // object wasn't empty, and max entry wasn't a demotion from the default
                     if (userId !== null && powerLevel >= 50) {
-                        this._highestPlUserId = userId;
+                        this.highestPlUserId = userId;
                         return;
                     }
                 }
             }
         }
-        this._highestPlUserId = null;
+        this.highestPlUserId = null;
     }
 
-    _updateAllowedServers() {
+    private updateAllowedServers() {
         const bannedHostsRegexps = [];
         let allowedHostsRegexps = [new RegExp(".*")]; // default allow everyone
-        if (this._room.currentState) {
+        if (this.room.currentState) {
-            const aclEvent = this._room.currentState.getStateEvents("m.room.server_acl", "");
+            const aclEvent = this.room.currentState.getStateEvents("m.room.server_acl", "");
             if (aclEvent && aclEvent.getContent()) {
                 const getRegex = (hostname) => new RegExp("^" + utils.globToRegexp(hostname, false) + "$");
 
@@ -231,35 +240,35 @@ export class RoomPermalinkCreator {
                 allowed.forEach(h => allowedHostsRegexps.push(getRegex(h)));
             }
         }
-        this._bannedHostsRegexps = bannedHostsRegexps;
+        this.bannedHostsRegexps = bannedHostsRegexps;
-        this._allowedHostsRegexps = allowedHostsRegexps;
+        this.allowedHostsRegexps = allowedHostsRegexps;
     }
 
-    _updatePopulationMap() {
+    private updatePopulationMap() {
         const populationMap: { [server: string]: number } = {};
-        for (const member of this._room.getJoinedMembers()) {
+        for (const member of this.room.getJoinedMembers()) {
             const serverName = getServerName(member.userId);
             if (!populationMap[serverName]) {
                 populationMap[serverName] = 0;
             }
             populationMap[serverName]++;
         }
-        this._populationMap = populationMap;
+        this.populationMap = populationMap;
     }
 
-    _updateServerCandidates() {
+    private updateServerCandidates() {
         let candidates = [];
-        if (this._highestPlUserId) {
+        if (this.highestPlUserId) {
-            candidates.push(getServerName(this._highestPlUserId));
+            candidates.push(getServerName(this.highestPlUserId));
         }
 
-        const serversByPopulation = Object.keys(this._populationMap)
+        const serversByPopulation = Object.keys(this.populationMap)
-            .sort((a, b) => this._populationMap[b] - this._populationMap[a])
+            .sort((a, b) => this.populationMap[b] - this.populationMap[a])
             .filter(a => {
                 return !candidates.includes(a) &&
                     !isHostnameIpAddress(a) &&
-                    !isHostInRegex(a, this._bannedHostsRegexps) &&
+                    !isHostInRegex(a, this.bannedHostsRegexps) &&
-                    isHostInRegex(a, this._allowedHostsRegexps);
+                    isHostInRegex(a, this.allowedHostsRegexps);
             });
 
         const remainingServers = serversByPopulation.slice(0, MAX_SERVER_CANDIDATES - candidates.length);
@@ -273,11 +282,11 @@ export function makeGenericPermalink(entityId: string): string {
     return getPermalinkConstructor().forEntity(entityId);
 }
 
-export function makeUserPermalink(userId) {
+export function makeUserPermalink(userId: string): string {
     return getPermalinkConstructor().forUser(userId);
 }
 
-export function makeRoomPermalink(roomId) {
+export function makeRoomPermalink(roomId: string): string {
     if (!roomId) {
         throw new Error("can't permalink a falsey roomId");
     }
@@ -296,7 +305,7 @@ export function makeRoomPermalink(roomId) {
     return permalinkCreator.forRoom();
 }
 
-export function makeGroupPermalink(groupId) {
+export function makeGroupPermalink(groupId: string): string {
     return getPermalinkConstructor().forGroup(groupId);
 }
 
@@ -428,24 +437,24 @@ export function parseAppLocalLink(localLink: string): PermalinkParts {
     return null;
 }
 
-function getServerName(userId) {
+function getServerName(userId: string): string {
     return userId.split(":").splice(1).join(":");
 }
 
-function getHostnameFromMatrixDomain(domain) {
+function getHostnameFromMatrixDomain(domain: string): string {
     if (!domain) return null;
     return new URL(`https://${domain}`).hostname;
 }
 
-function isHostInRegex(hostname, regexps) {
+function isHostInRegex(hostname: string, regexps: RegExp[]) {
     hostname = getHostnameFromMatrixDomain(hostname);
     if (!hostname) return true; // assumed
-    if (regexps.length > 0 && !regexps[0].test) throw new Error(regexps[0]);
+    if (regexps.length > 0 && !regexps[0].test) throw new Error(regexps[0].toString());
 
     return regexps.filter(h => h.test(hostname)).length > 0;
 }
 
-function isHostnameIpAddress(hostname) {
+function isHostnameIpAddress(hostname: string): boolean {
     hostname = getHostnameFromMatrixDomain(hostname);
     if (!hostname) return false;
 

test/ScalarAuthClient-test.js

@@ -29,7 +29,7 @@ describe('ScalarAuthClient', function() {
     it('should request a new token if the old one fails', async function() {
         const sac = new ScalarAuthClient();
 
-        sac._getAccountName = jest.fn((arg) => {
+        sac.getAccountName = jest.fn((arg) => {
             switch (arg) {
                 case "brokentoken":
                     return Promise.reject({