Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/6606

Conflicts: src/components/structures/RoomView.tsx src/components/views/right_panel/UserInfo.tsx
2021-06-03 08:42:05 +01:00 · 2021-06-03 08:42:05 +01:00 · 4f50727010
commit 4f50727010
parent 83d223475b 430cfa9c06
101 changed files with 4823 additions and 1420 deletions
--- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2016-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,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import React, { ChangeEvent, createRef, FormEvent, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { MatrixClient } from "matrix-js-sdk/src/client";

 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@ -27,6 +25,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { LocalisedPolicy, Policies } from '../../../Terms';

 /* This file contains a collection of components which are used by the
 * InteractiveAuth to prompt the user to enter the information needed
@ -74,36 +73,72 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 *    focus: set the input focus appropriately in the form.
 */

+enum AuthType {
+    Password = "m.login.password",
+    Recaptcha = "m.login.recaptcha",
+    Terms = "m.login.terms",
+    Email = "m.login.email.identity",
+    Msisdn = "m.login.msisdn",
+    Sso = "m.login.sso",
+    SsoUnstable = "org.matrix.login.sso",
+}
+
+/* eslint-disable camelcase */
+interface IAuthDict {
+    type?: AuthType;
+    // TODO: Remove `user` once servers support proper UIA
+    // See https://github.com/vector-im/element-web/issues/10312
+    user?: string;
+    identifier?: any;
+    password?: string;
+    response?: string;
+    // TODO: Remove `threepid_creds` once servers support proper UIA
+    // See https://github.com/vector-im/element-web/issues/10312
+    // See https://github.com/matrix-org/matrix-doc/issues/2220
+    threepid_creds?: any;
+    threepidCreds?: any;
+}
+/* eslint-enable camelcase */
+
 export const DEFAULT_PHASE = 0;

-@replaceableComponent("views.auth.PasswordAuthEntry")
-export class PasswordAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.password";
+interface IAuthEntryProps {
+    matrixClient: MatrixClient;
+    loginType: string;
+    authSessionId: string;
+    errorText?: string;
+    // Is the auth logic currently waiting for something to happen?
+    busy?: boolean;
+    onPhaseChange: (phase: number) => void;
+    submitAuthDict: (auth: IAuthDict) => void;
+}

-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        // is the auth logic currently waiting for something to
-        // happen?
-        busy: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+interface IPasswordAuthEntryState {
+    password: string;
+}
+
+@replaceableComponent("views.auth.PasswordAuthEntry")
+export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswordAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Password;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            password: "",
+        };
+    }

    componentDidMount() {
        this.props.onPhaseChange(DEFAULT_PHASE);
    }

-    state = {
-        password: "",
-    };
-
-    _onSubmit = e => {
+    private onSubmit = (e: FormEvent) => {
        e.preventDefault();
        if (this.props.busy) return;

        this.props.submitAuthDict({
-            type: PasswordAuthEntry.LOGIN_TYPE,
+            type: AuthType.Password,
            // TODO: Remove `user` once servers support proper UIA
            // See https://github.com/vector-im/element-web/issues/10312
            user: this.props.matrixClient.credentials.userId,
@ -115,7 +150,7 @@ export class PasswordAuthEntry extends React.Component {
        });
    };

-    _onPasswordFieldChange = ev => {
+    private onPasswordFieldChange = (ev: ChangeEvent<HTMLInputElement>) => {
        // enable the submit button iff the password is non-empty
        this.setState({
            password: ev.target.value,
@ -123,7 +158,7 @@ export class PasswordAuthEntry extends React.Component {
    };

    render() {
-        const passwordBoxClass = classnames({
+        const passwordBoxClass = classNames({
            "error": this.props.errorText,
        });

@ -155,7 +190,7 @@ export class PasswordAuthEntry extends React.Component {
        return (
            <div>
                <p>{ _t("Confirm your identity by entering your account password below.") }</p>
-                <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
+                <form onSubmit={this.onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                    <Field
                        className={passwordBoxClass}
                        type="password"
@ -163,7 +198,7 @@ export class PasswordAuthEntry extends React.Component {
                        label={_t('Password')}
                        autoFocus={true}
                        value={this.state.password}
-                        onChange={this._onPasswordFieldChange}
+                        onChange={this.onPasswordFieldChange}
                    />
                    <div className="mx_button_row">
                        { submitButtonOrSpinner }
@ -175,26 +210,26 @@ export class PasswordAuthEntry extends React.Component {
    }
 }

-@replaceableComponent("views.auth.RecaptchaAuthEntry")
-export class RecaptchaAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.recaptcha";
-
-    static propTypes = {
-        submitAuthDict: PropTypes.func.isRequired,
-        stageParams: PropTypes.object.isRequired,
-        errorText: PropTypes.string,
-        busy: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
+/* eslint-disable camelcase */
+interface IRecaptchaAuthEntryProps extends IAuthEntryProps {
+    stageParams?: {
+        public_key?: string;
    };
+}
+/* eslint-enable camelcase */
+
+@replaceableComponent("views.auth.RecaptchaAuthEntry")
+export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps> {
+    static LOGIN_TYPE = AuthType.Recaptcha;

    componentDidMount() {
        this.props.onPhaseChange(DEFAULT_PHASE);
    }

-    _onCaptchaResponse = response => {
+    private onCaptchaResponse = (response: string) => {
        CountlyAnalytics.instance.track("onboarding_grecaptcha_submit");
        this.props.submitAuthDict({
-            type: RecaptchaAuthEntry.LOGIN_TYPE,
+            type: AuthType.Recaptcha,
            response: response,
        });
    };
@ -230,7 +265,7 @@ export class RecaptchaAuthEntry extends React.Component {
        return (
            <div>
                <CaptchaForm sitePublicKey={sitePublicKey}
-                    onCaptchaResponse={this._onCaptchaResponse}
+                    onCaptchaResponse={this.onCaptchaResponse}
                />
                { errorSection }
            </div>
@ -238,18 +273,28 @@ export class RecaptchaAuthEntry extends React.Component {
    }
 }

-@replaceableComponent("views.auth.TermsAuthEntry")
-export class TermsAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.terms";
-
-    static propTypes = {
-        submitAuthDict: PropTypes.func.isRequired,
-        stageParams: PropTypes.object.isRequired,
-        errorText: PropTypes.string,
-        busy: PropTypes.bool,
-        showContinue: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
+interface ITermsAuthEntryProps extends IAuthEntryProps {
+    stageParams?: {
+        policies?: Policies;
    };
+    showContinue: boolean;
+}
+
+interface LocalisedPolicyWithId extends LocalisedPolicy {
+    id: string;
+}
+
+interface ITermsAuthEntryState {
+    policies: LocalisedPolicyWithId[];
+    toggledPolicies: {
+        [policy: string]: boolean;
+    };
+    errorText?: string;
+}
+
+@replaceableComponent("views.auth.TermsAuthEntry")
+export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITermsAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Terms;

    constructor(props) {
        super(props);
@ -294,8 +339,11 @@ export class TermsAuthEntry extends React.Component {

            initToggles[policyId] = false;

-            langPolicy.id = policyId;
-            pickedPolicies.push(langPolicy);
+            pickedPolicies.push({
+                id: policyId,
+                name: langPolicy.name,
+                url: langPolicy.url,
+            });
        }

        this.state = {
@ -311,11 +359,11 @@ export class TermsAuthEntry extends React.Component {
        this.props.onPhaseChange(DEFAULT_PHASE);
    }

-    tryContinue = () => {
-        this._trySubmit();
+    public tryContinue = () => {
+        this.trySubmit();
    };

-    _togglePolicy(policyId) {
+    private togglePolicy(policyId: string) {
        const newToggles = {};
        for (const policy of this.state.policies) {
            let checked = this.state.toggledPolicies[policy.id];
@ -326,7 +374,7 @@ export class TermsAuthEntry extends React.Component {
        this.setState({"toggledPolicies": newToggles});
    }

-    _trySubmit = () => {
+    private trySubmit = () => {
        let allChecked = true;
        for (const policy of this.state.policies) {
            const checked = this.state.toggledPolicies[policy.id];
@ -334,7 +382,7 @@ export class TermsAuthEntry extends React.Component {
        }

        if (allChecked) {
-            this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
+            this.props.submitAuthDict({type: AuthType.Terms});
            CountlyAnalytics.instance.track("onboarding_terms_complete");
        } else {
            this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
@ -356,7 +404,7 @@ export class TermsAuthEntry extends React.Component {
            checkboxes.push(
                // XXX: replace with StyledCheckbox
                <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
-                    <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
+                    <input type="checkbox" onChange={() => this.togglePolicy(policy.id)} checked={checked} />
                    <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
                </label>,
            );
@ -375,7 +423,7 @@ export class TermsAuthEntry extends React.Component {
        if (this.props.showContinue !== false) {
            // XXX: button classes
            submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this.trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
        }

        return (
@ -389,21 +437,18 @@ export class TermsAuthEntry extends React.Component {
    }
 }

-@replaceableComponent("views.auth.EmailIdentityAuthEntry")
-export class EmailIdentityAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.email.identity";
-
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        clientSecret: PropTypes.string.isRequired,
-        inputs: PropTypes.object.isRequired,
-        stageState: PropTypes.object.isRequired,
-        fail: PropTypes.func.isRequired,
-        setEmailSid: PropTypes.func.isRequired,
-        onPhaseChange: PropTypes.func.isRequired,
+interface IEmailIdentityAuthEntryProps extends IAuthEntryProps {
+    inputs?: {
+        emailAddress?: string;
    };
+    stageState?: {
+        emailSid: string;
+    };
+}
+
+@replaceableComponent("views.auth.EmailIdentityAuthEntry")
+export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEntryProps> {
+    static LOGIN_TYPE = AuthType.Email;

    componentDidMount() {
        this.props.onPhaseChange(DEFAULT_PHASE);
@ -427,7 +472,7 @@ export class EmailIdentityAuthEntry extends React.Component {
            return (
                <div className="mx_InteractiveAuthEntryComponents_emailWrapper">
                    <p>{ _t("A confirmation email has been sent to %(emailAddress)s",
-                        { emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
+                        { emailAddress: <b>{ this.props.inputs.emailAddress }</b> },
                    ) }
                    </p>
                    <p>{ _t("Open the link in the email to continue registration.") }</p>
@ -437,37 +482,44 @@ export class EmailIdentityAuthEntry extends React.Component {
    }
 }

+interface IMsisdnAuthEntryProps extends IAuthEntryProps {
+    inputs: {
+        phoneCountry: string;
+        phoneNumber: string;
+    };
+    clientSecret: string;
+    fail: (error: Error) => void;
+}
+
+interface IMsisdnAuthEntryState {
+    token: string;
+    requestingToken: boolean;
+    errorText: string;
+}
+
@replaceableComponent("views.auth.MsisdnAuthEntry")
-export class MsisdnAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.msisdn";
+export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsisdnAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Msisdn;

-    static propTypes = {
-        inputs: PropTypes.shape({
-            phoneCountry: PropTypes.string,
-            phoneNumber: PropTypes.string,
-        }),
-        fail: PropTypes.func,
-        clientSecret: PropTypes.func,
-        submitAuthDict: PropTypes.func.isRequired,
-        matrixClient: PropTypes.object,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+    private submitUrl: string;
+    private sid: string;
+    private msisdn: string;

-    state = {
-        token: '',
-        requestingToken: false,
-    };
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            token: '',
+            requestingToken: false,
+            errorText: '',
+        };
+    }

    componentDidMount() {
        this.props.onPhaseChange(DEFAULT_PHASE);

-        this._submitUrl = null;
-        this._sid = null;
-        this._msisdn = null;
-        this._tokenBox = null;
-
        this.setState({requestingToken: true});
-        this._requestMsisdnToken().catch((e) => {
+        this.requestMsisdnToken().catch((e) => {
            this.props.fail(e);
        }).finally(() => {
            this.setState({requestingToken: false});
@ -477,26 +529,26 @@ export class MsisdnAuthEntry extends React.Component {
    /*
     * Requests a verification token by SMS.
     */
-    _requestMsisdnToken() {
+    private requestMsisdnToken(): Promise<void> {
        return this.props.matrixClient.requestRegisterMsisdnToken(
            this.props.inputs.phoneCountry,
            this.props.inputs.phoneNumber,
            this.props.clientSecret,
            1, // TODO: Multiple send attempts?
        ).then((result) => {
-            this._submitUrl = result.submit_url;
-            this._sid = result.sid;
-            this._msisdn = result.msisdn;
+            this.submitUrl = result.submit_url;
+            this.sid = result.sid;
+            this.msisdn = result.msisdn;
        });
    }

-    _onTokenChange = e => {
+    private onTokenChange = (e: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            token: e.target.value,
        });
    };

-    _onFormSubmit = async e => {
+    private onFormSubmit = async (e: FormEvent) => {
        e.preventDefault();
        if (this.state.token == '') return;

@ -506,20 +558,20 @@ export class MsisdnAuthEntry extends React.Component {

        try {
            let result;
-            if (this._submitUrl) {
+            if (this.submitUrl) {
                result = await this.props.matrixClient.submitMsisdnTokenOtherUrl(
-                    this._submitUrl, this._sid, this.props.clientSecret, this.state.token,
+                    this.submitUrl, this.sid, this.props.clientSecret, this.state.token,
                );
            } else {
                throw new Error("The registration with MSISDN flow is misconfigured");
            }
            if (result.success) {
                const creds = {
-                    sid: this._sid,
+                    sid: this.sid,
                    client_secret: this.props.clientSecret,
                };
                this.props.submitAuthDict({
-                    type: MsisdnAuthEntry.LOGIN_TYPE,
+                    type: AuthType.Msisdn,
                    // TODO: Remove `threepid_creds` once servers support proper UIA
                    // See https://github.com/vector-im/element-web/issues/10312
                    // See https://github.com/matrix-org/matrix-doc/issues/2220
@ -543,7 +595,7 @@ export class MsisdnAuthEntry extends React.Component {
            return <Loader />;
        } else {
            const enableSubmit = Boolean(this.state.token);
-            const submitClasses = classnames({
+            const submitClasses = classNames({
                mx_InteractiveAuthEntryComponents_msisdnSubmit: true,
                mx_GeneralButton: true,
            });
@ -558,16 +610,16 @@ export class MsisdnAuthEntry extends React.Component {
            return (
                <div>
                    <p>{ _t("A text message has been sent to %(msisdn)s",
-                        { msisdn: <i>{ this._msisdn }</i> },
+                        { msisdn: <i>{ this.msisdn }</i> },
                    ) }
                    </p>
                    <p>{ _t("Please enter the code it contains:") }</p>
                    <div className="mx_InteractiveAuthEntryComponents_msisdnWrapper">
-                        <form onSubmit={this._onFormSubmit}>
+                        <form onSubmit={this.onFormSubmit}>
                            <input type="text"
                                className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                value={this.state.token}
-                                onChange={this._onTokenChange}
+                                onChange={this.onTokenChange}
                                aria-label={ _t("Code")}
                            />
                            <br />
@ -584,40 +636,40 @@ export class MsisdnAuthEntry extends React.Component {
    }
 }

-@replaceableComponent("views.auth.SSOAuthEntry")
-export class SSOAuthEntry extends React.Component {
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        loginType: PropTypes.string.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        onPhaseChange: PropTypes.func.isRequired,
-        continueText: PropTypes.string,
-        continueKind: PropTypes.string,
-        onCancel: PropTypes.func,
-    };
+interface ISSOAuthEntryProps extends IAuthEntryProps {
+    continueText?: string;
+    continueKind?: string;
+    onCancel?: () => void;
+}

-    static LOGIN_TYPE = "m.login.sso";
-    static UNSTABLE_LOGIN_TYPE = "org.matrix.login.sso";
+interface ISSOAuthEntryState {
+    phase: number;
+    attemptFailed: boolean;
+}
+
+@replaceableComponent("views.auth.SSOAuthEntry")
+export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Sso;
+    static UNSTABLE_LOGIN_TYPE = AuthType.SsoUnstable;

    static PHASE_PREAUTH = 1; // button to start SSO
    static PHASE_POSTAUTH = 2; // button to confirm SSO completed

-    _ssoUrl: string;
+    private ssoUrl: string;
+    private popupWindow: Window;

    constructor(props) {
        super(props);

        // We actually send the user through fallback auth so we don't have to
        // deal with a redirect back to us, losing application context.
-        this._ssoUrl = props.matrixClient.getFallbackAuthUrl(
+        this.ssoUrl = props.matrixClient.getFallbackAuthUrl(
            this.props.loginType,
            this.props.authSessionId,
        );

-        this._popupWindow = null;
-        window.addEventListener("message", this._onReceiveMessage);
+        this.popupWindow = null;
+        window.addEventListener("message", this.onReceiveMessage);

        this.state = {
            phase: SSOAuthEntry.PHASE_PREAUTH,
@ -625,44 +677,44 @@ export class SSOAuthEntry extends React.Component {
        };
    }

-    componentDidMount(): void {
+    componentDidMount() {
        this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
    }

    componentWillUnmount() {
-        window.removeEventListener("message", this._onReceiveMessage);
-        if (this._popupWindow) {
-            this._popupWindow.close();
-            this._popupWindow = null;
+        window.removeEventListener("message", this.onReceiveMessage);
+        if (this.popupWindow) {
+            this.popupWindow.close();
+            this.popupWindow = null;
        }
    }

-    attemptFailed = () => {
+    public attemptFailed = () => {
        this.setState({
            attemptFailed: true,
        });
    };

-    _onReceiveMessage = event => {
+    private onReceiveMessage = (event: MessageEvent) => {
        if (event.data === "authDone" && event.origin === this.props.matrixClient.getHomeserverUrl()) {
-            if (this._popupWindow) {
-                this._popupWindow.close();
-                this._popupWindow = null;
+            if (this.popupWindow) {
+                this.popupWindow.close();
+                this.popupWindow = null;
            }
        }
    };

-    onStartAuthClick = () => {
+    private onStartAuthClick = () => {
        // Note: We don't use PlatformPeg's startSsoAuth functions because we almost
        // certainly will need to open the thing in a new tab to avoid losing application
        // context.

-        this._popupWindow = window.open(this._ssoUrl, "_blank");
+        this.popupWindow = window.open(this.ssoUrl, "_blank");
        this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
        this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
    };

-    onConfirmClick = () => {
+    private onConfirmClick = () => {
        this.props.submitAuthDict({});
    };

@ -716,46 +768,37 @@ export class SSOAuthEntry extends React.Component {
 }

@replaceableComponent("views.auth.FallbackAuthEntry")
-export class FallbackAuthEntry extends React.Component {
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        loginType: PropTypes.string.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
+    private popupWindow: Window;
+    private fallbackButton = createRef<HTMLAnchorElement>();

    constructor(props) {
        super(props);

        // we have to make the user click a button, as browsers will block
        // the popup if we open it immediately.
-        this._popupWindow = null;
-        window.addEventListener("message", this._onReceiveMessage);
-
-        this._fallbackButton = createRef();
+        this.popupWindow = null;
+        window.addEventListener("message", this.onReceiveMessage);
    }

-
    componentDidMount() {
        this.props.onPhaseChange(DEFAULT_PHASE);
    }

    componentWillUnmount() {
-        window.removeEventListener("message", this._onReceiveMessage);
-        if (this._popupWindow) {
-            this._popupWindow.close();
+        window.removeEventListener("message", this.onReceiveMessage);
+        if (this.popupWindow) {
+            this.popupWindow.close();
        }
    }

-    focus = () => {
-        if (this._fallbackButton.current) {
-            this._fallbackButton.current.focus();
+    public focus = () => {
+        if (this.fallbackButton.current) {
+            this.fallbackButton.current.focus();
        }
    };

-    _onShowFallbackClick = e => {
+    private onShowFallbackClick = (e: MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();

@ -763,10 +806,10 @@ export class FallbackAuthEntry extends React.Component {
            this.props.loginType,
            this.props.authSessionId,
        );
-        this._popupWindow = window.open(url, "_blank");
+        this.popupWindow = window.open(url, "_blank");
    };

-    _onReceiveMessage = event => {
+    private onReceiveMessage = (event: MessageEvent) => {
        if (
            event.data === "authDone" &&
            event.origin === this.props.matrixClient.getHomeserverUrl()
@ -786,27 +829,31 @@ export class FallbackAuthEntry extends React.Component {
        }
        return (
            <div>
-                <a href="" ref={this._fallbackButton} onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
+                <a href="" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>{
+                    _t("Start authentication")
+                }</a>
                {errorSection}
            </div>
        );
    }
 }

-const AuthEntryComponents = [
-    PasswordAuthEntry,
-    RecaptchaAuthEntry,
-    EmailIdentityAuthEntry,
-    MsisdnAuthEntry,
-    TermsAuthEntry,
-    SSOAuthEntry,
-];
-
-export default function getEntryComponentForLoginType(loginType) {
-    for (const c of AuthEntryComponents) {
-        if (c.LOGIN_TYPE === loginType || c.UNSTABLE_LOGIN_TYPE === loginType) {
-            return c;
-        }
+export default function getEntryComponentForLoginType(loginType: AuthType): typeof React.Component {
+    switch (loginType) {
+        case AuthType.Password:
+            return PasswordAuthEntry;
+        case AuthType.Recaptcha:
+            return RecaptchaAuthEntry;
+        case AuthType.Email:
+            return EmailIdentityAuthEntry;
+        case AuthType.Msisdn:
+            return MsisdnAuthEntry;
+        case AuthType.Terms:
+            return TermsAuthEntry;
+        case AuthType.Sso:
+        case AuthType.SsoUnstable:
+            return SSOAuthEntry;
+        default:
+            return FallbackAuthEntry;
    }
-    return FallbackAuthEntry;
 }
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@ -119,7 +119,10 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
        if (this.props.room.roomId !== room.roomId) return;

        if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
-            this.setState({icon: this.calculateIcon()});
+            const newIcon = this.calculateIcon();
+            if (newIcon !== this.state.icon) {
+                this.setState({icon: newIcon});
+            }
        }
    };

--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@ -212,7 +212,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
            autoComplete={true}
            autoFocus={true}
        />
-        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content">
            { rooms.length > 0 ? (
                <div className="mx_AddExistingToSpace_section">
                    <h3>{ _t("Rooms") }</h3>
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@ -1,5 +1,6 @@
 /*
 Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+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.
@ -14,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, {useState, useEffect} from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, ChangeEvent, MouseEvent } from 'react';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";

 import {
    PHASE_UNSENT,
@ -30,27 +30,33 @@ import {
    PHASE_DONE,
    PHASE_STARTED,
    PHASE_CANCELLED,
+    VerificationRequest,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import WidgetStore from "../../../stores/WidgetStore";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import {SETTINGS} from "../../../settings/Settings";
-import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
+import WidgetStore, { IApp } from "../../../stores/WidgetStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import { SETTINGS } from "../../../settings/Settings";
+import SettingsStore, { LEVEL_ORDER } from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { SettingLevel } from '../../../settings/SettingLevel';

-class GenericEditor extends React.PureComponent {
-    // static propTypes = {onBack: PropTypes.func.isRequired};
+interface IGenericEditorProps {
+    onBack: () => void;
+}

-    constructor(props) {
-        super(props);
-        this._onChange = this._onChange.bind(this);
-        this.onBack = this.onBack.bind(this);
-    }
+interface IGenericEditorState {
+    message?: string;
+    [inputId: string]: boolean | string;
+}

-    onBack() {
+abstract class GenericEditor<
+    P extends IGenericEditorProps = IGenericEditorProps,
+    S extends IGenericEditorState = IGenericEditorState,
+> extends React.PureComponent<P, S> {
+    protected onBack = () => {
        if (this.state.message) {
            this.setState({ message: null });
        } else {
@ -58,47 +64,60 @@ class GenericEditor extends React.PureComponent {
        }
    }

-    _onChange(e) {
+    protected onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        // @ts-ignore: Unsure how to convince TS this is okay when the state
+        // type can be extended.
        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
    }

-    _buttons() {
+    protected abstract send();
+
+    protected buttons(): React.ReactNode {
        return <div className="mx_Dialog_buttons">
            <button onClick={this.onBack}>{ _t('Back') }</button>
-            { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+            { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
        </div>;
    }

-    textInput(id, label) {
+    protected textInput(id: string, label: string): React.ReactNode {
        return <Field
            id={id}
            label={label}
-            size="42"
+            size={42}
            autoFocus={true}
            type="text"
            autoComplete="on"
-            value={this.state[id]}
-            onChange={this._onChange}
+            value={this.state[id] as string}
+            onChange={this.onChange}
        />;
    }
 }

-export class SendCustomEvent extends GenericEditor {
-    static getLabel() { return _t('Send Custom Event'); }
-
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-        forceStateEvent: PropTypes.bool,
-        forceGeneralEvent: PropTypes.bool,
-        inputs: PropTypes.object,
+interface ISendCustomEventProps extends IGenericEditorProps {
+    room: Room;
+    forceStateEvent?: boolean;
+    forceGeneralEvent?: boolean;
+    inputs?: {
+        eventType?: string;
+        stateKey?: string;
+        evContent?: string;
    };
+}
+
+interface ISendCustomEventState extends IGenericEditorState {
+    isStateEvent: boolean;
+    eventType: string;
+    stateKey: string;
+    evContent: string;
+}
+
+export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendCustomEventState> {
+    static getLabel() { return _t('Send Custom Event'); }

    static contextType = MatrixClientContext;

    constructor(props) {
        super(props);
-        this._send = this._send.bind(this);

        const {eventType, stateKey, evContent} = Object.assign({
            eventType: '',
@ -115,7 +134,7 @@ export class SendCustomEvent extends GenericEditor {
        };
    }

-    send(content) {
+    private doSend(content: object): Promise<void> {
        const cli = this.context;
        if (this.state.isStateEvent) {
            return cli.sendStateEvent(this.props.room.roomId, this.state.eventType, content, this.state.stateKey);
@ -124,7 +143,7 @@ export class SendCustomEvent extends GenericEditor {
        }
    }

-    async _send() {
+    protected send = async () => {
        if (this.state.eventType === '') {
            this.setState({ message: _t('You must specify an event type!') });
            return;
@ -133,7 +152,7 @@ export class SendCustomEvent extends GenericEditor {
        let message;
        try {
            const content = JSON.parse(this.state.evContent);
-            await this.send(content);
+            await this.doSend(content);
            message = _t('Event sent!');
        } catch (e) {
            message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
@ -147,7 +166,7 @@ export class SendCustomEvent extends GenericEditor {
                <div className="mx_Dialog_content">
                    { this.state.message }
                </div>
-                { this._buttons() }
+                { this.buttons() }
            </div>;
        }

@ -163,35 +182,51 @@ export class SendCustomEvent extends GenericEditor {
                <br />

                <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this.onChange} element="textarea" />
            </div>
            <div className="mx_Dialog_buttons">
                <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
                { showTglFlip && <div style={{float: "right"}}>
-                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
+                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isStateEvent}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Event"
+                        data-tg-on="State Event"
+                        htmlFor="isStateEvent"
+                    />
                </div> }
            </div>
        </div>;
    }
 }

-class SendAccountData extends GenericEditor {
-    static getLabel() { return _t('Send Account Data'); }
-
-    static propTypes = {
-        room: PropTypes.instanceOf(Room).isRequired,
-        isRoomAccountData: PropTypes.bool,
-        forceMode: PropTypes.bool,
-        inputs: PropTypes.object,
+interface ISendAccountDataProps extends IGenericEditorProps {
+    room: Room;
+    isRoomAccountData: boolean;
+    forceMode: boolean;
+    inputs?: {
+        eventType?: string;
+        evContent?: string;
    };
+}
+
+interface ISendAccountDataState extends IGenericEditorState {
+    isRoomAccountData: boolean;
+    eventType: string;
+    evContent: string;
+}
+
+class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountDataState> {
+    static getLabel() { return _t('Send Account Data'); }

    static contextType = MatrixClientContext;

    constructor(props) {
        super(props);
-        this._send = this._send.bind(this);

        const {eventType, evContent} = Object.assign({
            eventType: '',
@ -206,7 +241,7 @@ class SendAccountData extends GenericEditor {
        };
    }

-    send(content) {
+    private doSend(content: object): Promise<void> {
        const cli = this.context;
        if (this.state.isRoomAccountData) {
            return cli.setRoomAccountData(this.props.room.roomId, this.state.eventType, content);
@ -214,7 +249,7 @@ class SendAccountData extends GenericEditor {
        return cli.setAccountData(this.state.eventType, content);
    }

-    async _send() {
+    protected send = async () => {
        if (this.state.eventType === '') {
            this.setState({ message: _t('You must specify an event type!') });
            return;
@ -223,7 +258,7 @@ class SendAccountData extends GenericEditor {
        let message;
        try {
            const content = JSON.parse(this.state.evContent);
-            await this.send(content);
+            await this.doSend(content);
            message = _t('Event sent!');
        } catch (e) {
            message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
@ -237,7 +272,7 @@ class SendAccountData extends GenericEditor {
                <div className="mx_Dialog_content">
                    { this.state.message }
                </div>
-                { this._buttons() }
+                { this.buttons() }
            </div>;
        }

@ -247,14 +282,23 @@ class SendAccountData extends GenericEditor {
                <br />

                <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this.onChange} element="textarea" />
            </div>
            <div className="mx_Dialog_buttons">
                <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
                { !this.state.message && <div style={{float: "right"}}>
-                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isRoomAccountData}
+                        disabled={this.props.forceMode}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Account Data"
+                        data-tg-on="Room Data"
+                        htmlFor="isRoomAccountData"
+                    />
                </div> }
            </div>
        </div>;
@ -264,17 +308,22 @@ class SendAccountData extends GenericEditor {
 const INITIAL_LOAD_TILES = 20;
 const LOAD_TILES_STEP_SIZE = 50;

-class FilteredList extends React.PureComponent {
-    static propTypes = {
-        children: PropTypes.any,
-        query: PropTypes.string,
-        onChange: PropTypes.func,
-    };
+interface IFilteredListProps {
+    children: React.ReactElement[];
+    query: string;
+    onChange: (value: string) => void;
+}

-    static filterChildren(children, query) {
+interface IFilteredListState {
+    filteredChildren: React.ReactElement[];
+    truncateAt: number;
+}
+
+class FilteredList extends React.PureComponent<IFilteredListProps, IFilteredListState> {
+    static filterChildren(children: React.ReactElement[], query: string): React.ReactElement[] {
        if (!query) return children;
        const lcQuery = query.toLowerCase();
-        return children.filter((child) => child.key.toLowerCase().includes(lcQuery));
+        return children.filter((child) => child.key.toString().toLowerCase().includes(lcQuery));
    }

    constructor(props) {
@ -295,27 +344,27 @@ class FilteredList extends React.PureComponent {
        });
    }

-    showAll = () => {
+    private showAll = () => {
        this.setState({
            truncateAt: this.state.truncateAt + LOAD_TILES_STEP_SIZE,
        });
    };

-    createOverflowElement = (overflowCount: number, totalCount: number) => {
+    private createOverflowElement = (overflowCount: number, totalCount: number) => {
        return <button className="mx_DevTools_RoomStateExplorer_button" onClick={this.showAll}>
            { _t("and %(count)s others...", { count: overflowCount }) }
        </button>;
    };

-    onQuery = (ev) => {
+    private onQuery = (ev: ChangeEvent<HTMLInputElement>) => {
        if (this.props.onChange) this.props.onChange(ev.target.value);
    };

-    getChildren = (start: number, end: number) => {
+    private getChildren = (start: number, end: number): React.ReactElement[] => {
        return this.state.filteredChildren.slice(start, end);
    };

-    getChildCount = (): number => {
+    private getChildCount = (): number => {
        return this.state.filteredChildren.length;
    };

@ -336,28 +385,31 @@ class FilteredList extends React.PureComponent {
    }
 }

-class RoomStateExplorer extends React.PureComponent {
-    static getLabel() { return _t('Explore Room State'); }
+interface IExplorerProps {
+    room: Room;
+    onBack: () => void;
+}

-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
+interface IRoomStateExplorerState {
+    eventType?: string;
+    event?: MatrixEvent;
+    editing: boolean;
+    queryEventType: string;
+    queryStateKey: string;
+}
+
+class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateExplorerState> {
+    static getLabel() { return _t('Explore Room State'); }

    static contextType = MatrixClientContext;

-    roomStateEvents: Map<string, Map<string, MatrixEvent>>;
+    private roomStateEvents: Map<string, Map<string, MatrixEvent>>;

    constructor(props) {
        super(props);

        this.roomStateEvents = this.props.room.currentState.events;

-        this.onBack = this.onBack.bind(this);
-        this.editEv = this.editEv.bind(this);
-        this.onQueryEventType = this.onQueryEventType.bind(this);
-        this.onQueryStateKey = this.onQueryStateKey.bind(this);
-
        this.state = {
            eventType: null,
            event: null,
@ -368,19 +420,19 @@ class RoomStateExplorer extends React.PureComponent {
        };
    }

-    browseEventType(eventType) {
+    private browseEventType(eventType: string) {
        return () => {
            this.setState({ eventType });
        };
    }

-    onViewSourceClick(event) {
+    private onViewSourceClick(event: MatrixEvent) {
        return () => {
            this.setState({ event });
        };
    }

-    onBack() {
+    private onBack = () => {
        if (this.state.editing) {
            this.setState({ editing: false });
        } else if (this.state.event) {
@ -392,15 +444,15 @@ class RoomStateExplorer extends React.PureComponent {
        }
    }

-    editEv() {
+    private editEv = () => {
        this.setState({ editing: true });
    }

-    onQueryEventType(filterEventType) {
+    private onQueryEventType = (filterEventType: string) => {
        this.setState({ queryEventType: filterEventType });
    }

-    onQueryStateKey(filterStateKey) {
+    private onQueryStateKey = (filterStateKey: string) => {
        this.setState({ queryStateKey: filterStateKey });
    }

@ -472,24 +524,22 @@ class RoomStateExplorer extends React.PureComponent {
    }
 }

-class AccountDataExplorer extends React.PureComponent {
-    static getLabel() { return _t('Explore Account Data'); }
+interface IAccountDataExplorerState {
+    isRoomAccountData: boolean;
+    event?: MatrixEvent;
+    editing: boolean;
+    queryEventType: string;
+    [inputId: string]: boolean | string;
+}

-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
+class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDataExplorerState> {
+    static getLabel() { return _t('Explore Account Data'); }

    static contextType = MatrixClientContext;

    constructor(props) {
        super(props);

-        this.onBack = this.onBack.bind(this);
-        this.editEv = this.editEv.bind(this);
-        this._onChange = this._onChange.bind(this);
-        this.onQueryEventType = this.onQueryEventType.bind(this);
-
        this.state = {
            isRoomAccountData: false,
            event: null,
@ -499,20 +549,20 @@ class AccountDataExplorer extends React.PureComponent {
        };
    }

-    getData() {
+    private getData(): Record<string, MatrixEvent> {
        if (this.state.isRoomAccountData) {
            return this.props.room.accountData;
        }
        return this.context.store.accountData;
    }

-    onViewSourceClick(event) {
+    private onViewSourceClick(event: MatrixEvent) {
        return () => {
            this.setState({ event });
        };
    }

-    onBack() {
+    private onBack = () => {
        if (this.state.editing) {
            this.setState({ editing: false });
        } else if (this.state.event) {
@ -522,15 +572,15 @@ class AccountDataExplorer extends React.PureComponent {
        }
    }

-    _onChange(e) {
+    private onChange = (e: ChangeEvent<HTMLInputElement>) => {
        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
    }

-    editEv() {
+    private editEv = () => {
        this.setState({ editing: true });
    }

-    onQueryEventType(queryEventType) {
+    private onQueryEventType = (queryEventType: string) => {
        this.setState({ queryEventType });
    }

@ -580,30 +630,39 @@ class AccountDataExplorer extends React.PureComponent {
            </div>
            <div className="mx_Dialog_buttons">
                <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <div style={{float: "right"}}>
-                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
-                </div> }
+                <div style={{float: "right"}}>
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isRoomAccountData}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Account Data"
+                        data-tg-on="Room Data"
+                        htmlFor="isRoomAccountData"
+                    />
+                </div>
            </div>
        </div>;
    }
 }

-class ServersInRoomList extends React.PureComponent {
+interface IServersInRoomListState {
+    query: string;
+}
+
+class ServersInRoomList extends React.PureComponent<IExplorerProps, IServersInRoomListState> {
    static getLabel() { return _t('View Servers in Room'); }

-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
-
    static contextType = MatrixClientContext;

+    private servers: React.ReactElement[];
+
    constructor(props) {
        super(props);

        const room = this.props.room;
-        const servers = new Set();
+        const servers = new Set<string>();
        room.currentState.getStateEvents("m.room.member").forEach(ev => servers.add(ev.getSender().split(":")[1]));
        this.servers = Array.from(servers).map(s =>
            <button key={s} className="mx_DevTools_ServersInRoomList_button">
@ -615,7 +674,7 @@ class ServersInRoomList extends React.PureComponent {
        };
    }

-    onQuery = (query) => {
+    private onQuery = (query: string) => {
        this.setState({ query });
    }

@ -642,7 +701,10 @@ const PHASE_MAP = {
    [PHASE_CANCELLED]: "cancelled",
 };

-function VerificationRequest({txnId, request}) {
+const VerificationRequestExplorer: React.FC<{
+    txnId: string;
+    request: VerificationRequest;
+}> = ({txnId, request}) => {
    const [, updateState] = useState();
    const [timeout, setRequestTimeout] = useState(request.timeout);

@ -679,7 +741,7 @@ function VerificationRequest({txnId, request}) {
    </div>);
 }

-class VerificationExplorer extends React.Component {
+class VerificationExplorer extends React.PureComponent<IExplorerProps> {
    static getLabel() {
        return _t("Verification Requests");
    }
@ -687,7 +749,7 @@ class VerificationExplorer extends React.Component {
    /* Ensure this.context is the cli */
    static contextType = MatrixClientContext;

-    onNewRequest = () => {
+    private onNewRequest = () => {
        this.forceUpdate();
    }

@ -710,7 +772,7 @@ class VerificationExplorer extends React.Component {
        return (<div>
            <div className="mx_Dialog_content">
                {Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
-                    <VerificationRequest txnId={txnId} request={request} key={txnId} />,
+                    <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />,
                )}
            </div>
            <div className="mx_Dialog_buttons">
@ -720,7 +782,12 @@ class VerificationExplorer extends React.Component {
    }
 }

-class WidgetExplorer extends React.Component {
+interface IWidgetExplorerState {
+    query: string;
+    editWidget?: IApp;
+}
+
+class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerState> {
    static getLabel() {
        return _t("Active Widgets");
    }
@ -734,19 +801,19 @@ class WidgetExplorer extends React.Component {
        };
    }

-    onWidgetStoreUpdate = () => {
+    private onWidgetStoreUpdate = () => {
        this.forceUpdate();
    };

-    onQueryChange = (query) => {
+    private onQueryChange = (query: string) => {
        this.setState({query});
    };

-    onEditWidget = (widget) => {
+    private onEditWidget = (widget: IApp) => {
        this.setState({editWidget: widget});
    };

-    onBack = () => {
+    private onBack = () => {
        const widgets = WidgetStore.instance.getApps(this.props.room.roomId);
        if (this.state.editWidget && widgets.includes(this.state.editWidget)) {
            this.setState({editWidget: null});
@ -769,8 +836,11 @@ class WidgetExplorer extends React.Component {
        const editWidget = this.state.editWidget;
        const widgets = WidgetStore.instance.getApps(room.roomId);
        if (editWidget && widgets.includes(editWidget)) {
-            const allState = Array.from(Array.from(room.currentState.events.values()).map(e => e.values()))
-                .reduce((p, c) => {p.push(...c); return p;}, []);
+            const allState = Array.from(
+                Array.from(room.currentState.events.values()).map((e: Map<string, MatrixEvent>) => {
+                    return e.values();
+                }),
+            ).reduce((p, c) => { p.push(...c); return p; }, []);
            const stateEv = allState.find(ev => ev.getId() === editWidget.eventId);
            if (!stateEv) { // "should never happen"
                return <div>
@ -811,7 +881,15 @@ class WidgetExplorer extends React.Component {
    }
 }

-class SettingsExplorer extends React.Component {
+interface ISettingsExplorerState {
+    query: string;
+    editSetting?: string;
+    viewSetting?: string;
+    explicitValues?: string;
+    explicitRoomValues?: string;
+ }
+
+class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExplorerState> {
    static getLabel() {
        return _t("Settings Explorer");
    }
@ -829,19 +907,19 @@ class SettingsExplorer extends React.Component {
        };
    }

-    onQueryChange = (ev) => {
+    private onQueryChange = (ev: ChangeEvent<HTMLInputElement>) => {
        this.setState({query: ev.target.value});
    };

-    onExplValuesEdit = (ev) => {
+    private onExplValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
        this.setState({explicitValues: ev.target.value});
    };

-    onExplRoomValuesEdit = (ev) => {
+    private onExplRoomValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
        this.setState({explicitRoomValues: ev.target.value});
    };

-    onBack = () => {
+    private onBack = () => {
        if (this.state.editSetting) {
            this.setState({editSetting: null});
        } else if (this.state.viewSetting) {
@ -851,12 +929,12 @@ class SettingsExplorer extends React.Component {
        }
    };

-    onViewClick = (ev, settingId) => {
+    private onViewClick = (ev: MouseEvent, settingId: string) => {
        ev.preventDefault();
        this.setState({viewSetting: settingId});
    };

-    onEditClick = (ev, settingId) => {
+    private onEditClick = (ev: MouseEvent, settingId: string) => {
        ev.preventDefault();
        this.setState({
            editSetting: settingId,
@ -865,7 +943,7 @@ class SettingsExplorer extends React.Component {
        });
    };

-    onSaveClick = async () => {
+    private onSaveClick = async () => {
        try {
            const settingId = this.state.editSetting;
            const parsedExplicit = JSON.parse(this.state.explicitValues);
@ -874,7 +952,7 @@ class SettingsExplorer extends React.Component {
                console.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
                try {
                    const val = parsedExplicit[level];
-                    await SettingsStore.setValue(settingId, null, level, val);
+                    await SettingsStore.setValue(settingId, null, level as SettingLevel, val);
                } catch (e) {
                    console.warn(e);
                }
@ -884,7 +962,7 @@ class SettingsExplorer extends React.Component {
                console.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
                try {
                    const val = parsedExplicitRoom[level];
-                    await SettingsStore.setValue(settingId, roomId, level, val);
+                    await SettingsStore.setValue(settingId, roomId, level as SettingLevel, val);
                } catch (e) {
                    console.warn(e);
                }
@ -901,7 +979,7 @@ class SettingsExplorer extends React.Component {
        }
    };

-    renderSettingValue(val) {
+    private renderSettingValue(val: any): string {
        // Note: we don't .toString() a string because we want JSON.stringify to inject quotes for us
        const toStringTypes = ['boolean', 'number'];
        if (toStringTypes.includes(typeof(val))) {
@ -911,7 +989,7 @@ class SettingsExplorer extends React.Component {
        }
    }

-    renderExplicitSettingValues(setting, roomId) {
+    private renderExplicitSettingValues(setting: string, roomId: string): string {
        const vals = {};
        for (const level of LEVEL_ORDER) {
            try {
@ -926,7 +1004,7 @@ class SettingsExplorer extends React.Component {
        return JSON.stringify(vals, null, 4);
    }

-    renderCanEditLevel(roomId, level) {
+    private renderCanEditLevel(roomId: string, level: SettingLevel): React.ReactNode {
        const canEdit = SettingsStore.canSetValue(this.state.editSetting, roomId, level);
        const className = canEdit ? 'mx_DevTools_SettingsExplorer_mutable' : 'mx_DevTools_SettingsExplorer_immutable';
        return <td className={className}><code>{canEdit.toString()}</code></td>;
@ -1062,27 +1140,37 @@ class SettingsExplorer extends React.Component {

                        <div>
                            {_t("Value:")}&nbsp;
-                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting))}</code>
+                            <code>{this.renderSettingValue(
+                                SettingsStore.getValue(this.state.viewSetting),
+                            )}</code>
                        </div>

                        <div>
                            {_t("Value in this room:")}&nbsp;
-                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting, room.roomId))}</code>
+                            <code>{this.renderSettingValue(
+                                SettingsStore.getValue(this.state.viewSetting, room.roomId),
+                            )}</code>
                        </div>

                        <div>
                            {_t("Values at explicit levels:")}
-                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, null)}</code></pre>
+                            <pre><code>{this.renderExplicitSettingValues(
+                                this.state.viewSetting, null,
+                            )}</code></pre>
                        </div>

                        <div>
                            {_t("Values at explicit levels in this room:")}
-                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, room.roomId)}</code></pre>
+                            <pre><code>{this.renderExplicitSettingValues(
+                                this.state.viewSetting, room.roomId,
+                            )}</code></pre>
                        </div>

                    </div>
                    <div className="mx_Dialog_buttons">
-                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{_t("Edit Values")}</button>
+                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{
+                            _t("Edit Values")
+                        }</button>
                        <button onClick={this.onBack}>{_t("Back")}</button>
                    </div>
                </div>
@ -1091,7 +1179,11 @@ class SettingsExplorer extends React.Component {
    }
 }

-const Entries = [
+type DevtoolsDialogEntry = React.JSXElementConstructor<any> & {
+    getLabel: () => string;
+};
+
+const Entries: DevtoolsDialogEntry[] = [
    SendCustomEvent,
    RoomStateExplorer,
    SendAccountData,
@ -1102,43 +1194,36 @@ const Entries = [
    SettingsExplorer,
 ];

-@replaceableComponent("views.dialogs.DevtoolsDialog")
-export default class DevtoolsDialog extends React.PureComponent {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    roomId: string;
+    onFinished: (finished: boolean) => void;
+}

+interface IState {
+    mode?: DevtoolsDialogEntry;
+}
+
+@replaceableComponent("views.dialogs.DevtoolsDialog")
+export default class DevtoolsDialog extends React.PureComponent<IProps, IState> {
    constructor(props) {
        super(props);
-        this.onBack = this.onBack.bind(this);
-        this.onCancel = this.onCancel.bind(this);

        this.state = {
            mode: null,
        };
    }

-    componentWillUnmount() {
-        this._unmounted = true;
-    }
-
-    _setMode(mode) {
+    private setMode(mode: DevtoolsDialogEntry) {
        return () => {
            this.setState({ mode });
        };
    }

-    onBack() {
-        if (this.prevMode) {
-            this.setState({ mode: this.prevMode });
-            this.prevMode = null;
-        } else {
-            this.setState({ mode: null });
-        }
+    private onBack = () => {
+        this.setState({ mode: null });
    }

-    onCancel() {
+    private onCancel = () => {
        this.props.onFinished(false);
    }

@ -1165,7 +1250,7 @@ export default class DevtoolsDialog extends React.PureComponent {
                    <div className="mx_Dialog_content">
                        { Entries.map((Entry) => {
                            const label = Entry.getLabel();
-                            const onClick = this._setMode(Entry);
+                            const onClick = this.setMode(Entry);
                            return <button className={classes} key={label} onClick={onClick}>{ label }</button>;
                        }) }
                    </div>
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@ -47,10 +47,19 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
 import {getAddressType} from "../../../UserAddress";
+import BaseAvatar from '../avatars/BaseAvatar';
+import AccessibleButton from '../elements/AccessibleButton';
+import { compare } from '../../../utils/strings';

 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */

+interface IRecentUser {
+    userId: string,
+    user: RoomMember,
+    lastActive: number,
+}
+
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
 export const KIND_CALL_TRANSFER = "call_transfer";
@ -61,43 +70,41 @@ const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is c
 // This is the interface that is expected by various components in this file. It is a bit
 // awkward because it also matches the RoomMember class from the js-sdk with some extra support
 // for 3PIDs/email addresses.
-//
-// XXX: We should use TypeScript interfaces instead of this weird "abstract" class.
-class Member {
+abstract class Member {
    /**
     * The display name of this Member. For users this should be their profile's display
     * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
     */
-    get name(): string { throw new Error("Member class not implemented"); }
+    public abstract get name(): string;

    /**
     * The ID of this Member. For users this should be their user ID. For 3PIDs this should
     * be the 3PID address (email).
     */
-    get userId(): string { throw new Error("Member class not implemented"); }
+    public abstract get userId(): string;

    /**
     * Gets the MXC URL of this Member's avatar. For users this should be their profile's
     * avatar MXC URL or null if none set. For 3PIDs this should always be null.
     */
-    getMxcAvatarUrl(): string { throw new Error("Member class not implemented"); }
+    public abstract getMxcAvatarUrl(): string;
 }

 class DirectoryMember extends Member {
-    _userId: string;
-    _displayName: string;
-    _avatarUrl: string;
+    private readonly _userId: string;
+    private readonly displayName: string;
+    private readonly avatarUrl: string;

    constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
        super();
        this._userId = userDirResult.user_id;
-        this._displayName = userDirResult.display_name;
-        this._avatarUrl = userDirResult.avatar_url;
+        this.displayName = userDirResult.display_name;
+        this.avatarUrl = userDirResult.avatar_url;
    }

    // These next class members are for the Member interface
    get name(): string {
-        return this._displayName || this._userId;
+        return this.displayName || this._userId;
    }

    get userId(): string {
@ -105,32 +112,32 @@ class DirectoryMember extends Member {
    }

    getMxcAvatarUrl(): string {
-        return this._avatarUrl;
+        return this.avatarUrl;
    }
 }

 class ThreepidMember extends Member {
-    _id: string;
+    private readonly id: string;

    constructor(id: string) {
        super();
-        this._id = id;
+        this.id = id;
    }

    // This is a getter that would be falsey on all other implementations. Until we have
    // better type support in the react-sdk we can use this trick to determine the kind
    // of 3PID we're dealing with, if any.
    get isEmail(): boolean {
-        return this._id.includes('@');
+        return this.id.includes('@');
    }

    // These next class members are for the Member interface
    get name(): string {
-        return this._id;
+        return this.id;
    }

    get userId(): string {
-        return this._id;
+        return this.id;
    }

    getMxcAvatarUrl(): string {
@ -140,11 +147,11 @@ class ThreepidMember extends Member {

 interface IDMUserTileProps {
    member: RoomMember;
-    onRemove: (RoomMember) => any;
+    onRemove(member: RoomMember): void;
 }

 class DMUserTile extends React.PureComponent<IDMUserTileProps> {
-    _onRemove = (e) => {
+    private onRemove = (e) => {
        // Stop the browser from highlighting text
        e.preventDefault();
        e.stopPropagation();
@ -153,9 +160,6 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
    };

    render() {
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
        const avatarSize = 20;
        const avatar = this.props.member.isEmail
            ? <img
@ -177,7 +181,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
            closeButton = (
                <AccessibleButton
                    className='mx_InviteDialog_userTile_remove'
-                    onClick={this._onRemove}
+                    onClick={this.onRemove}
                >
                    <img src={require("../../../../res/img/icon-pill-remove.svg")}
                        alt={_t('Remove')} width={8} height={8}
@ -201,13 +205,13 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
 interface IDMRoomTileProps {
    member: RoomMember;
    lastActiveTs: number;
-    onToggle: (RoomMember) => any;
+    onToggle(member: RoomMember): void;
    highlightWord: string;
    isSelected: boolean;
 }

 class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
-    _onClick = (e) => {
+    private onClick = (e) => {
        // Stop the browser from highlighting text
        e.preventDefault();
        e.stopPropagation();
@ -215,7 +219,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
        this.props.onToggle(this.props.member);
    };

-    _highlightName(str: string) {
+    private highlightName(str: string) {
        if (!this.props.highlightWord) return str;

        // We convert things to lowercase for index searching, but pull substrings from
@ -252,8 +256,6 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
    }

    render() {
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-
        let timestamp = null;
        if (this.props.lastActiveTs) {
            const humanTs = humanizeTime(this.props.lastActiveTs);
@ -291,13 +293,13 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {

        const caption = this.props.member.isEmail
            ? _t("Invite by email")
-            : this._highlightName(this.props.member.userId);
+            : this.highlightName(this.props.member.userId);

        return (
-            <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
+            <div className='mx_InviteDialog_roomTile' onClick={this.onClick}>
                {stackedAvatar}
                <span className="mx_InviteDialog_roomTile_nameStack">
-                    <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
+                    <div className='mx_InviteDialog_roomTile_name'>{this.highlightName(this.props.member.name)}</div>
                    <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
                </span>
                {timestamp}
@ -308,7 +310,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {

 interface IInviteDialogProps {
    // Takes an array of user IDs/emails to invite.
-    onFinished: (toInvite?: string[]) => any;
+    onFinished: (toInvite?: string[]) => void;

    // The kind of invite being performed. Assumed to be KIND_DM if
    // not provided.
@ -349,8 +351,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        initialText: "",
    };

-    _debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
-    _editorRef: any = null;
+    private debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
+    private editorRef = createRef<HTMLInputElement>();
+    private unmounted = false;

    constructor(props) {
        super(props);
@ -378,7 +381,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
            filterText: this.props.initialText,
            recents: InviteDialog.buildRecents(alreadyInvited),
            numRecentsShown: INITIAL_ROOMS_SHOWN,
-            suggestions: this._buildSuggestions(alreadyInvited),
+            suggestions: this.buildSuggestions(alreadyInvited),
            numSuggestionsShown: INITIAL_ROOMS_SHOWN,
            serverResultsMixin: [],
            threepidResultsMixin: [],
@ -390,21 +393,23 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
            busy: false,
            errorText: null,
        };
-
-        this._editorRef = createRef();
    }

    componentDidMount() {
        if (this.props.initialText) {
-            this._updateSuggestions(this.props.initialText);
+            this.updateSuggestions(this.props.initialText);
        }
    }

+    componentWillUnmount() {
+        this.unmounted = true;
+    }
+
    private onConsultFirstChange = (ev) => {
        this.setState({consultFirst: ev.target.checked});
    }

-    static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number}[] {
+    public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
        const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room

        // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
@ -467,7 +472,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        return recents;
    }

-    _buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember}[] {
+    private buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember}[] {
        const maxConsideredMembers = 200;
        const joinedRooms = MatrixClientPeg.get().getRooms()
            .filter(r => r.getMyMembership() === 'join' && r.getJoinedMemberCount() <= maxConsideredMembers);
@ -574,7 +579,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        members.sort((a, b) => {
            if (a.score === b.score) {
                if (a.numRooms === b.numRooms) {
-                    return a.member.userId.localeCompare(b.member.userId);
+                    return compare(a.member.userId, b.member.userId);
                }

                return b.numRooms - a.numRooms;
@ -585,7 +590,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        return members.map(m => ({userId: m.member.userId, user: m.member}));
    }

-    _shouldAbortAfterInviteError(result): boolean {
+    private shouldAbortAfterInviteError(result): boolean {
        const failedUsers = Object.keys(result.states).filter(a => result.states[a] === 'error');
        if (failedUsers.length > 0) {
            console.log("Failed to invite users: ", result);
@ -600,7 +605,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        return false;
    }

-    _convertFilter(): Member[] {
+    private convertFilter(): Member[] {
        // Check to see if there's anything to convert first
        if (!this.state.filterText || !this.state.filterText.includes('@')) return this.state.targets || [];

@ -617,10 +622,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        return newTargets;
    }

-    _startDm = async () => {
+    private startDm = async () => {
        this.setState({busy: true});
        const client = MatrixClientPeg.get();
-        const targets = this._convertFilter();
+        const targets = this.convertFilter();
        const targetIds = targets.map(t => t.userId);

        // Check if there is already a DM with these people and reuse it if possible.
@ -694,11 +699,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        }
    };

-    _inviteUsers = async () => {
+    private inviteUsers = async () => {
        const startTime = CountlyAnalytics.getTimestamp();
        this.setState({busy: true});
-        this._convertFilter();
-        const targets = this._convertFilter();
+        this.convertFilter();
+        const targets = this.convertFilter();
        const targetIds = targets.map(t => t.userId);

        const cli = MatrixClientPeg.get();
@ -715,7 +720,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        try {
            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
            CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
-            if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
+            if (!this.shouldAbortAfterInviteError(result)) { // handles setting error message too
                this.props.onFinished();
            }

@ -749,9 +754,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        }
    };

-    _transferCall = async () => {
-        this._convertFilter();
-        const targets = this._convertFilter();
+    private transferCall = async () => {
+        this.convertFilter();
+        const targets = this.convertFilter();
        const targetIds = targets.map(t => t.userId);
        if (targetIds.length > 1) {
            this.setState({
@ -790,26 +795,26 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        }
    };

-    _onKeyDown = (e) => {
+    private onKeyDown = (e) => {
        if (this.state.busy) return;
        const value = e.target.value.trim();
        const hasModifiers = e.ctrlKey || e.shiftKey || e.metaKey;
        if (!value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !hasModifiers) {
            // when the field is empty and the user hits backspace remove the right-most target
            e.preventDefault();
-            this._removeMember(this.state.targets[this.state.targets.length - 1]);
+            this.removeMember(this.state.targets[this.state.targets.length - 1]);
        } else if (value && e.key === Key.ENTER && !hasModifiers) {
            // when the user hits enter with something in their field try to convert it
            e.preventDefault();
-            this._convertFilter();
+            this.convertFilter();
        } else if (value && e.key === Key.SPACE && !hasModifiers && value.includes("@") && !value.includes(" ")) {
            // when the user hits space and their input looks like an e-mail/MXID then try to convert it
            e.preventDefault();
-            this._convertFilter();
+            this.convertFilter();
        }
    };

-    _updateSuggestions = async (term) => {
+    private updateSuggestions = async (term) => {
        MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
            if (term !== this.state.filterText) {
                // Discard the results - we were probably too slow on the server-side to make
@ -918,30 +923,30 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        }
    };

-    _updateFilter = (e) => {
+    private updateFilter = (e) => {
        const term = e.target.value;
        this.setState({filterText: term});

        // Debounce server lookups to reduce spam. We don't clear the existing server
        // results because they might still be vaguely accurate, likewise for races which
        // could happen here.
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
        }
-        this._debounceTimer = setTimeout(() => {
-            this._updateSuggestions(term);
+        this.debounceTimer = setTimeout(() => {
+            this.updateSuggestions(term);
        }, 150); // 150ms debounce (human reaction time + some)
    };

-    _showMoreRecents = () => {
+    private showMoreRecents = () => {
        this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
    };

-    _showMoreSuggestions = () => {
+    private showMoreSuggestions = () => {
        this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
    };

-    _toggleMember = (member: Member) => {
+    private toggleMember = (member: Member) => {
        if (!this.state.busy) {
            let filterText = this.state.filterText;
            const targets = this.state.targets.map(t => t); // cheap clone for mutation
@ -954,13 +959,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
            }
            this.setState({targets, filterText});

-            if (this._editorRef && this._editorRef.current) {
-                this._editorRef.current.focus();
+            if (this.editorRef && this.editorRef.current) {
+                this.editorRef.current.focus();
            }
        }
    };

-    _removeMember = (member: Member) => {
+    private removeMember = (member: Member) => {
        const targets = this.state.targets.map(t => t); // cheap clone for mutation
        const idx = targets.indexOf(member);
        if (idx >= 0) {
@ -968,12 +973,12 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
            this.setState({targets});
        }

-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+        if (this.editorRef && this.editorRef.current) {
+            this.editorRef.current.focus();
        }
    };

-    _onPaste = async (e) => {
+    private onPaste = async (e) => {
        if (this.state.filterText) {
            // if the user has already typed something, just let them
            // paste normally.
@ -1027,6 +1032,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                failed.push(address);
            }
        }
+        if (this.unmounted) return;

        if (failed.length > 0) {
            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
@ -1043,17 +1049,17 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        this.setState({targets: [...this.state.targets, ...toAdd]});
    };

-    _onClickInputArea = (e) => {
+    private onClickInputArea = (e) => {
        // Stop the browser from highlighting text
        e.preventDefault();
        e.stopPropagation();

-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+        if (this.editorRef && this.editorRef.current) {
+            this.editorRef.current.focus();
        }
    };

-    _onUseDefaultIdentityServerClick = (e) => {
+    private onUseDefaultIdentityServerClick = (e) => {
        e.preventDefault();

        // Update the IS in account data. Actually using it may trigger terms.
@ -1062,21 +1068,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        this.setState({canUseIdentityServer: true, tryingIdentityServer: false});
    };

-    _onManageSettingsClick = (e) => {
+    private onManageSettingsClick = (e) => {
        e.preventDefault();
        dis.fire(Action.ViewUserSettings);
        this.props.onFinished();
    };

-    _onCommunityInviteClick = (e) => {
+    private onCommunityInviteClick = (e) => {
        this.props.onFinished();
        showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
    };

-    _renderSection(kind: "recents"|"suggestions") {
+    private renderSection(kind: "recents"|"suggestions") {
        let sourceMembers = kind === 'recents' ? this.state.recents : this.state.suggestions;
        let showNum = kind === 'recents' ? this.state.numRecentsShown : this.state.numSuggestionsShown;
-        const showMoreFn = kind === 'recents' ? this._showMoreRecents.bind(this) : this._showMoreSuggestions.bind(this);
+        const showMoreFn = kind === 'recents' ? this.showMoreRecents.bind(this) : this.showMoreSuggestions.bind(this);
        const lastActive = (m) => kind === 'recents' ? m.lastActive : null;
        let sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions");
        let sectionSubname = null;
@ -1156,7 +1162,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                member={r.user}
                lastActiveTs={lastActive(r)}
                key={r.userId}
-                onToggle={this._toggleMember}
+                onToggle={this.toggleMember}
                highlightWord={this.state.filterText}
                isSelected={this.state.targets.some(t => t.userId === r.userId)}
            />
@ -1171,32 +1177,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        );
    }

-    _renderEditor() {
+    private renderEditor() {
        const targets = this.state.targets.map(t => (
-            <DMUserTile member={t} onRemove={!this.state.busy && this._removeMember} key={t.userId} />
+            <DMUserTile member={t} onRemove={!this.state.busy && this.removeMember} key={t.userId} />
        ));
        const input = (
            <input
                type="text"
-                onKeyDown={this._onKeyDown}
-                onChange={this._updateFilter}
+                onKeyDown={this.onKeyDown}
+                onChange={this.updateFilter}
                value={this.state.filterText}
-                ref={this._editorRef}
-                onPaste={this._onPaste}
+                ref={this.editorRef}
+                onPaste={this.onPaste}
                autoFocus={true}
                disabled={this.state.busy}
                autoComplete="off"
            />
        );
        return (
-            <div className='mx_InviteDialog_editor' onClick={this._onClickInputArea}>
+            <div className='mx_InviteDialog_editor' onClick={this.onClickInputArea}>
                {targets}
                {input}
            </div>
        );
    }

-    _renderIdentityServerWarning() {
+    private renderIdentityServerWarning() {
        if (!this.state.tryingIdentityServer || this.state.canUseIdentityServer ||
            !SettingsStore.getValue(UIFeature.IdentityServer)
        ) {
@ -1214,8 +1220,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                        defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
                    },
                    {
-                        default: sub => <a href="#" onClick={this._onUseDefaultIdentityServerClick}>{sub}</a>,
-                        settings: sub => <a href="#" onClick={this._onManageSettingsClick}>{sub}</a>,
+                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
                    },
                )}</div>
            );
@ -1225,7 +1231,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                    "Use an identity server to invite by email. " +
                    "Manage in <settings>Settings</settings>.",
                    {}, {
-                        settings: sub => <a href="#" onClick={this._onManageSettingsClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
                    },
                )}</div>
            );
@ -1298,7 +1304,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                            return (
                                <AccessibleButton
                                    kind="link"
-                                    onClick={this._onCommunityInviteClick}
+                                    onClick={this.onCommunityInviteClick}
                                >{sub}</AccessibleButton>
                            );
                        },
@ -1309,7 +1315,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                </React.Fragment>;
            }
            buttonText = _t("Go");
-            goButtonFn = this._startDm;
+            goButtonFn = this.startDm;
        } else if (this.props.kind === KIND_INVITE) {
            const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
            const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
@ -1348,7 +1354,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
            });

            buttonText = _t("Invite");
-            goButtonFn = this._inviteUsers;
+            goButtonFn = this.inviteUsers;

            if (cli.isRoomEncrypted(this.props.roomId)) {
                const room = cli.getRoom(this.props.roomId);
@ -1370,7 +1376,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        } else if (this.props.kind === KIND_CALL_TRANSFER) {
            title = _t("Transfer");
            buttonText = _t("Transfer");
-            goButtonFn = this._transferCall;
+            goButtonFn = this.transferCall;
            consultSection = <div>
                <label>
                    <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
@ -1393,7 +1399,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                <div className='mx_InviteDialog_content'>
                    <p className='mx_InviteDialog_helpText'>{helpText}</p>
                    <div className='mx_InviteDialog_addressBar'>
-                        {this._renderEditor()}
+                        {this.renderEditor()}
                        <div className='mx_InviteDialog_buttonAndSpinner'>
                            <AccessibleButton
                                kind="primary"
@ -1407,11 +1413,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                        </div>
                    </div>
                    {keySharingWarning}
-                    {this._renderIdentityServerWarning()}
+                    {this.renderIdentityServerWarning()}
                    <div className='error'>{this.state.errorText}</div>
                    <div className='mx_InviteDialog_userSections'>
-                        {this._renderSection('recents')}
-                        {this._renderSection('suggestions')}
+                        {this.renderSection('recents')}
+                        {this.renderSection('suggestions')}
                    </div>
                    {consultSection}
                </div>
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@ -30,7 +30,6 @@ import ToggleSwitch from "../elements/ToggleSwitch";
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {allSettled} from "../../../utils/promise";
 import {useDispatcher} from "../../../hooks/useDispatcher";
 import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";

@ -74,9 +73,13 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
        const promises = [];

        if (avatarChanged) {
-            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
-                url: await cli.uploadContent(newAvatar),
-            }, ""));
+            if (newAvatar) {
+                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
+                    url: await cli.uploadContent(newAvatar),
+                }, ""));
+            } else {
+                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {}, ""));
+            }
        }

        if (nameChanged) {
@ -91,7 +94,7 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, { join_rule: joinRule }, ""));
        }

-        const results = await allSettled(promises);
+        const results = await Promise.allSettled(promises);
        setBusy(false);
        const failures = results.filter(r => r.status === "rejected");
        if (failures.length > 0) {
--- a/src/components/views/directory/NetworkDropdown.tsx
+++ b/src/components/views/directory/NetworkDropdown.tsx
@ -38,13 +38,15 @@ import withValidation from "../elements/Validation";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import TextInputDialog from "../dialogs/TextInputDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
+import UIStore from "../../../stores/UIStore";
+import { compare } from "../../../utils/strings";

 export const ALL_ROOMS = Symbol("ALL_ROOMS");

 const SETTING_NAME = "room_directory_servers";

 const inPlaceOf = (elementRect: Pick<DOMRect, "right" | "top">) => ({
-    right: window.innerWidth - elementRect.right,
+    right: UIStore.instance.windowWidth - elementRect.right,
    top: elementRect.top,
    chevronOffset: 0,
    chevronFace: ChevronFace.None,
@ -186,7 +188,7 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s

            protocolsList.forEach(({instances=[]}) => {
                [...instances].sort((b, a) => {
-                    return a.desc.localeCompare(b.desc);
+                    return compare(a.desc, b.desc);
                }).forEach(({desc, instance_id: instanceId}) => {
                    entries.push(
                        <MenuItemRadio
--- a/src/components/views/elements/EffectsOverlay.tsx
+++ b/src/components/views/elements/EffectsOverlay.tsx
@ -17,7 +17,8 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import ICanvasEffect from '../../../effects/ICanvasEffect';
-import {CHAT_EFFECTS} from '../../../effects'
+import { CHAT_EFFECTS } from '../../../effects'
+import UIStore, { UI_EVENTS } from "../../../stores/UIStore";

 interface IProps {
    roomWidth: number;
@ -45,8 +46,8 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {

    useEffect(() => {
        const resize = () => {
-            if (canvasRef.current) {
-                canvasRef.current.height = window.innerHeight;
+            if (canvasRef.current && canvasRef.current?.height !== UIStore.instance.windowHeight) {
+                canvasRef.current.height = UIStore.instance.windowHeight;
            }
        };
        const onAction = (payload: { action: string }) => {
@ -58,12 +59,12 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
        }
        const dispatcherRef = dis.register(onAction);
        const canvas = canvasRef.current;
-        canvas.height = window.innerHeight;
-        window.addEventListener('resize', resize, true);
+        canvas.height = UIStore.instance.windowHeight;
+        UIStore.instance.on(UI_EVENTS.Resize, resize);

        return () => {
            dis.unregister(dispatcherRef);
-            window.removeEventListener('resize', resize);
+            UIStore.instance.off(UI_EVENTS.Resize, resize);
            // eslint-disable-next-line react-hooks/exhaustive-deps
            const currentEffects = effectsRef.current; // this is not a react node ref, warning can be safely ignored
            for (const effect in currentEffects) {
--- a/src/components/views/elements/InlineSpinner.tsx
+++ b/src/components/views/elements/InlineSpinner.tsx
@ -18,19 +18,29 @@ import React from "react";
 import {_t} from "../../../languageHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";

-@replaceableComponent("views.elements.InlineSpinner")
-export default class InlineSpinner extends React.Component {
-    render() {
-        const w = this.props.w || 16;
-        const h = this.props.h || 16;
+interface IProps {
+    w?: number;
+    h?: number;
+    children?: React.ReactNode;
+}

+@replaceableComponent("views.elements.InlineSpinner")
+export default class InlineSpinner extends React.PureComponent<IProps> {
+    static defaultProps = {
+        w: 16,
+        h: 16,
+    }
+
+    render() {
        return (
            <div className="mx_InlineSpinner">
                <div
                    className="mx_InlineSpinner_icon mx_Spinner_icon"
-                    style={{width: w, height: h}}
+                    style={{width: this.props.w, height: this.props.h}}
                    aria-label={_t("Loading...")}
-                ></div>
+                >
+                    {this.props.children}
+                </div>
            </div>
        );
    }
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@ -112,7 +112,7 @@ interface IProps {
 const MAX_PER_ROW = 6;

 const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
-    const providers = flow["org.matrix.msc2858.identity_providers"] || [];
+    const providers = flow.identity_providers || [];
    if (providers.length < 2) {
        return <div className="mx_SSOButtons">
            <SSOButton
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@ -22,6 +22,7 @@ import React, {Component, CSSProperties} from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";

 const MIN_TOOLTIP_HEIGHT = 25;

@ -69,7 +70,10 @@ export default class Tooltip extends React.Component<IProps> {
        this.tooltipContainer = document.createElement("div");
        this.tooltipContainer.className = "mx_Tooltip_wrapper";
        document.body.appendChild(this.tooltipContainer);
-        window.addEventListener('scroll', this.renderTooltip, true);
+        window.addEventListener('scroll', this.renderTooltip, {
+            passive: true,
+            capture: true,
+        });

        this.parent = ReactDOM.findDOMNode(this).parentNode as Element;

@ -84,7 +88,9 @@ export default class Tooltip extends React.Component<IProps> {
    public componentWillUnmount() {
        ReactDOM.unmountComponentAtNode(this.tooltipContainer);
        document.body.removeChild(this.tooltipContainer);
-        window.removeEventListener('scroll', this.renderTooltip, true);
+        window.removeEventListener('scroll', this.renderTooltip, {
+            capture: true,
+        });
    }

    private updatePosition(style: CSSProperties) {
@ -97,15 +103,15 @@ export default class Tooltip extends React.Component<IProps> {
            // we need so that we're still centered.
            offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
        }
-
+        const width = UIStore.instance.windowWidth;
        const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
        const top = baseTop + offset;
-        const right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
+        const right = width - parentBox.right - window.pageXOffset - 16;
        const left = parentBox.right + window.pageXOffset + 6;
        const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2);
        switch (this.props.alignment) {
            case Alignment.Natural:
-                if (parentBox.right > window.innerWidth / 2) {
+                if (parentBox.right > width / 2) {
                    style.right = right;
                    style.top = top;
                    break;
--- a/src/components/views/elements/TooltipButton.tsx
+++ b/src/components/views/elements/TooltipButton.tsx
@ -19,19 +19,30 @@ import React from 'react';
 import * as sdk from '../../../index';
 import {replaceableComponent} from "../../../utils/replaceableComponent";

-@replaceableComponent("views.elements.TooltipButton")
-export default class TooltipButton extends React.Component {
-    state = {
-        hover: false,
-    };
+interface IProps {
+    helpText: string;
+}

-    onMouseOver = () => {
+interface IState {
+    hover: boolean;
+}
+
+@replaceableComponent("views.elements.TooltipButton")
+export default class TooltipButton extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+    }
+
+    private onMouseOver = () => {
        this.setState({
            hover: true,
        });
    };

-    onMouseLeave = () => {
+    private onMouseLeave = () => {
        this.setState({
            hover: false,
        });
--- a/src/components/views/messages/MVoiceMessageBody.tsx
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@ -71,10 +71,14 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat

        // We should have a buffer to work with now: let's set it up
        const playback = new Playback(buffer, waveform);
-        this.setState({playback});
+        this.setState({ playback });
        // Note: the RecordingPlayback component will handle preparing the Playback class for us.
    }

+    public componentWillUnmount() {
+        this.state.playback?.destroy();
+    }
+
    public render() {
        if (this.state.error) {
            // TODO: @@TR: Verify error state
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@ -81,19 +81,39 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
    constructor(props, context) {
        super(props, context);

-        if (props.reactions) {
-            props.reactions.on("Relations.add", this.onReactionsChange);
-            props.reactions.on("Relations.remove", this.onReactionsChange);
-            props.reactions.on("Relations.redaction", this.onReactionsChange);
-        }
-
        this.state = {
            myReactions: this.getMyReactions(),
            showAll: false,
        };
    }

-    componentDidUpdate(prevProps) {
+    componentDidMount() {
+        const { mxEvent, reactions } = this.props;
+
+        if (mxEvent.isBeingDecrypted() || mxEvent.shouldAttemptDecryption()) {
+            mxEvent.once("Event.decrypted", this.onDecrypted);
+        }
+
+        if (reactions) {
+            reactions.on("Relations.add", this.onReactionsChange);
+            reactions.on("Relations.remove", this.onReactionsChange);
+            reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        const { mxEvent, reactions } = this.props;
+
+        mxEvent.off("Event.decrypted", this.onDecrypted);
+
+        if (reactions) {
+            reactions.off("Relations.add", this.onReactionsChange);
+            reactions.off("Relations.remove", this.onReactionsChange);
+            reactions.off("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentDidUpdate(prevProps: IProps) {
        if (prevProps.reactions !== this.props.reactions) {
            this.props.reactions.on("Relations.add", this.onReactionsChange);
            this.props.reactions.on("Relations.remove", this.onReactionsChange);
@ -102,24 +122,12 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
        }
    }

-    componentWillUnmount() {
-        if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
-        }
+    private onDecrypted = () => {
+        // Decryption changes whether the event is actionable
+        this.forceUpdate();
    }

-    onReactionsChange = () => {
+    private onReactionsChange = () => {
        // TODO: Call `onHeightChanged` as needed
        this.setState({
            myReactions: this.getMyReactions(),
@ -130,7 +138,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
        this.forceUpdate();
    }

-    getMyReactions() {
+    private getMyReactions() {
        const reactions = this.props.reactions;
        if (!reactions) {
            return null;
@ -143,7 +151,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
        return [...myReactions.values()];
    }

-    onShowAllClick = () => {
+    private onShowAllClick = () => {
        this.setState({
            showAll: true,
        });
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@ -36,6 +36,7 @@ import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext} from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";

@replaceableComponent("views.messages.TextualBody")
 export default class TextualBody extends React.Component {
@ -143,7 +144,7 @@ export default class TextualBody extends React.Component {
    _addCodeExpansionButton(div, pre) {
        // Calculate how many percent does the pre element take up.
        // If it's less than 30% we don't add the expansion button.
-        const percentageOfViewport = pre.offsetHeight / window.innerHeight * 100;
+        const percentageOfViewport = pre.offsetHeight / UIStore.instance.windowHeight * 100;
        if (percentageOfViewport < 30) return;

        const button = document.createElement("span");
@ -277,15 +278,15 @@ export default class TextualBody extends React.Component {
            // pass only the first child which is the event tile otherwise this recurses on edited events
            let links = this.findLinks([this._content.current]);
            if (links.length) {
-                // de-dup the links (but preserve ordering)
-                const seen = new Set();
-                links = links.filter((link) => {
-                    if (seen.has(link)) return false;
-                    seen.add(link);
-                    return true;
-                });
+                // de-duplicate the links after stripping hashes as they don't affect the preview
+                // using a set here maintains the order
+                links = Array.from(new Set(links.map(link => {
+                    const url = new URL(link);
+                    url.hash = "";
+                    return url.toString();
+                })));

-                this.setState({ links: links });
+                this.setState({ links });

                // lazy-load the hidden state of the preview widget from localstorage
                if (global.localStorage) {
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@ -46,6 +46,7 @@ import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
 import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RoomName from "../elements/RoomName";
+import UIStore from "../../../stores/UIStore";

 interface IProps {
    room: Room;
@ -116,8 +117,8 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
        const rect = handle.current.getBoundingClientRect();
        contextMenu = <WidgetContextMenu
            chevronFace={ChevronFace.None}
-            right={window.innerWidth - rect.right}
-            bottom={window.innerHeight - rect.top}
+            right={UIStore.instance.windowWidth - rect.right}
+            bottom={UIStore.instance.windowHeight - rect.top}
            onFinished={closeMenu}
            app={app}
        />;
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@ -67,6 +67,7 @@ import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRight
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import { mediaFromMxc } from "../../../customisations/Media";
+import UIStore from "../../../stores/UIStore";

 export interface IDevice {
    deviceId: string;
@ -1446,8 +1447,8 @@ const UserInfoHeader: React.FC<{
                    <MemberAvatar
                        key={member.userId} // to instantly blank the avatar when UserInfo changes members
                        member={member}
-                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        width={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
+                        height={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
                        resizeMethod="scale"
                        fallbackUserId={member.userId}
                        onClick={onMemberAvatarClick}
--- a/src/components/views/right_panel/WidgetCard.tsx
+++ b/src/components/views/right_panel/WidgetCard.tsx
@ -30,6 +30,7 @@ import { Action } from "../../../dispatcher/actions";
 import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import UIStore from "../../../stores/UIStore";

 interface IProps {
    room: Room;
@ -65,7 +66,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
        contextMenu = (
            <WidgetContextMenu
                chevronFace={ChevronFace.None}
-                right={window.innerWidth - rect.right - 12}
+                right={UIStore.instance.windowWidth - rect.right - 12}
                top={rect.bottom + 12}
                onFinished={closeMenu}
                app={app}
--- a/src/components/views/rooms/AppsDrawer.js
+++ b/src/components/views/rooms/AppsDrawer.js
@ -36,6 +36,7 @@ import {Container, WidgetLayoutStore} from "../../../stores/widgets/WidgetLayout
 import {clamp, percentageOf, percentageWithin} from "../../../utils/numbers";
 import {useStateCallback} from "../../../hooks/useStateCallback";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";

@replaceableComponent("views.rooms.AppsDrawer")
 export default class AppsDrawer extends React.Component {
@ -290,7 +291,7 @@ const PersistentVResizer = ({

    // Arbitrary defaults to avoid NaN problems. 100 px or 3/4 of the visible window.
    if (!minHeight) minHeight = 100;
-    if (!maxHeight) maxHeight = (window.innerHeight / 4) * 3;
+    if (!maxHeight) maxHeight = (UIStore.instance.windowHeight / 4) * 3;

    // Convert from percentage to height. Note that the default height is 280px.
    if (defaultHeight) {
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@ -168,6 +168,7 @@ export default class EditMessageComposer extends React.Component {
                if (nextEvent) {
                    dis.dispatch({action: 'edit_event', event: nextEvent});
                } else {
+                    this._clearStoredEditorState();
                    dis.dispatch({action: 'edit_event', event: null});
                    dis.fire(Action.FocusComposer);
                }
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@ -790,13 +790,6 @@ export default class EventTile extends React.Component<IProps, IState> {
            return null;
        }
        const eventId = this.props.mxEvent.getId();
-        if (!eventId) {
-            // XXX: Temporary diagnostic logging for https://github.com/vector-im/element-web/issues/11120
-            console.error("EventTile attempted to get relations for an event without an ID");
-            // Use event's special `toJSON` method to log key data.
-            console.log(JSON.stringify(this.props.mxEvent, null, 4));
-            console.trace("Stacktrace for https://github.com/vector-im/element-web/issues/11120");
-        }
        return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
    };

--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@ -238,6 +238,8 @@ export default class MemberList extends React.Component {
                member.user = cli.getUser(member.userId);
            }

+            member.sortName = (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, "");
+
            // XXX: this user may have no lastPresenceTs value!
            // the right solution here is to fix the race rather than leave it as 0
        });
@ -252,6 +254,8 @@ export default class MemberList extends React.Component {
                m.membership === 'join' || m.membership === 'invite'
            );
        });
+        const language = SettingsStore.getValue("language");
+        this.collator = new Intl.Collator(language, { sensitivity: 'base', usePunctuation: true });
        filteredAndSortedMembers.sort(this.memberSort);
        return filteredAndSortedMembers;
    }
@ -351,13 +355,7 @@ export default class MemberList extends React.Component {
        }

        // Fourth by name (alphabetical)
-        const nameA = (memberA.name[0] === '@' ? memberA.name.substr(1) : memberA.name).replace(SORT_REGEX, "");
-        const nameB = (memberB.name[0] === '@' ? memberB.name.substr(1) : memberB.name).replace(SORT_REGEX, "");
-        // console.log(`Comparing userA_name=${nameA} against userB_name=${nameB} - returning`);
-        return nameA.localeCompare(nameB, {
-            ignorePunctuation: true,
-            sensitivity: "base",
-        });
+        return this.collator.compare(memberA.sortName, memberB.sortName);
    };

    onSearchQueryChanged = searchQuery => {
@ -422,7 +420,7 @@ export default class MemberList extends React.Component {
            } else {
                // Is a 3pid invite
                return <EntityTile key={m.getStateKey()} name={m.getContent().display_name} suppressOnHover={true}
-                                   onClick={() => this._onPending3pidInviteClick(m)} />;
+                    onClick={() => this._onPending3pidInviteClick(m)} />;
            }
        });
    }
@ -484,10 +482,10 @@ export default class MemberList extends React.Component {
        if (this._getChildCountInvited() > 0) {
            invitedHeader = <h2>{ _t("Invited") }</h2>;
            invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
-                        createOverflowElement={this._createOverflowTileInvited}
-                        getChildren={this._getChildrenInvited}
-                        getChildCount={this._getChildCountInvited}
-                />;
+                createOverflowElement={this._createOverflowTileInvited}
+                getChildren={this._getChildrenInvited}
+                getChildCount={this._getChildCountInvited}
+            />;
        }

        const footer = (
@ -520,9 +518,9 @@ export default class MemberList extends React.Component {
        >
            <div className="mx_MemberList_wrapper">
                <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
-                               createOverflowElement={this._createOverflowTileJoined}
-                               getChildren={this._getChildrenJoined}
-                               getChildCount={this._getChildCountJoined} />
+                    createOverflowElement={this._createOverflowTileJoined}
+                    getChildren={this._getChildrenJoined}
+                    getChildCount={this._getChildCountJoined} />
                { invitedHeader }
                { invitedSection }
            </div>
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@ -55,7 +55,7 @@ interface IProps {
    onKeyDown: (ev: React.KeyboardEvent) => void;
    onFocus: (ev: React.FocusEvent) => void;
    onBlur: (ev: React.FocusEvent) => void;
-    onResize: () => void;
+    onListCollapse?: (isExpanded: boolean) => void;
    resizeNotifier: ResizeNotifier;
    isMinimized: boolean;
    activeSpace: Room;
@ -404,9 +404,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
            const newSublists = objectWithOnly(newLists, newListIds);
            const sublists = objectShallowClone(newSublists, (k, v) => arrayFastClone(v));

-            this.setState({sublists, isNameFiltering}, () => {
-                this.props.onResize();
-            });
+            this.setState({sublists, isNameFiltering});
        }
    };

@ -537,11 +535,11 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                    addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
                    addRoomContextMenu={aesthetics.addRoomContextMenu}
                    isMinimized={this.props.isMinimized}
-                    onResize={this.props.onResize}
                    showSkeleton={showSkeleton}
                    extraTiles={extraTiles}
                    resizeNotifier={this.props.resizeNotifier}
                    alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
+                    onListCollapse={this.props.onListCollapse}
                />
            });
    }
--- a/src/components/views/rooms/RoomListNumResults.tsx
+++ b/src/components/views/rooms/RoomListNumResults.tsx
@ -14,14 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";

 import { _t } from "../../../languageHandler";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import SpaceStore from "../../../stores/SpaceStore";

-const RoomListNumResults: React.FC = () => {
+interface IProps {
+    onVisibilityChange?: () => void
+}
+
+const RoomListNumResults: React.FC<IProps> = ({ onVisibilityChange }) => {
    const [count, setCount] = useState<number>(null);
    useEventEmitter(RoomListStore.instance, LISTS_UPDATE_EVENT, () => {
        if (RoomListStore.instance.getFirstNameFilterCondition()) {
@ -32,6 +36,12 @@ const RoomListNumResults: React.FC = () => {
        }
    });

+    useEffect(() => {
+        if (onVisibilityChange) {
+            onVisibilityChange();
+        }
+    }, [count, onVisibilityChange]);
+
    if (typeof count !== "number") return null;

    return <div className="mx_LeftPanel_roomListFilterCount">
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@ -74,11 +74,11 @@ interface IProps {
    addRoomLabel: string;
    isMinimized: boolean;
    tagId: TagID;
-    onResize: () => void;
    showSkeleton?: boolean;
    alwaysVisible?: boolean;
    resizeNotifier: ResizeNotifier;
    extraTiles?: ReactComponentElement<typeof ExtraTile>[];
+    onListCollapse?: (isExpanded: boolean) => void;

    // TODO: Account for https://github.com/vector-im/element-web/issues/14179
 }
@ -105,6 +105,7 @@ interface IState {
 export default class RoomSublist extends React.Component<IProps, IState> {
    private headerButton = createRef<HTMLDivElement>();
    private sublistRef = createRef<HTMLDivElement>();
+    private tilesRef = createRef<HTMLDivElement>();
    private dispatcherRef: string;
    private layout: ListLayout;
    private heightAtStart: number;
@ -246,11 +247,15 @@ export default class RoomSublist extends React.Component<IProps, IState> {
    public componentDidMount() {
        this.dispatcherRef = defaultDispatcher.register(this.onAction);
        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
+        // Using the passive option to not block the main thread
+        // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
+        this.tilesRef.current?.addEventListener("scroll", this.onScrollPrevent, { passive: true });
    }

    public componentWillUnmount() {
        defaultDispatcher.unregister(this.dispatcherRef);
        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);
+        this.tilesRef.current?.removeEventListener("scroll", this.onScrollPrevent);
    }

    private onListsUpdated = () => {
@ -473,7 +478,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
    private toggleCollapsed = () => {
        this.layout.isCollapsed = this.state.isExpanded;
        this.setState({isExpanded: !this.layout.isCollapsed});
-        setImmediate(() => this.props.onResize()); // needs to happen when the DOM is updated
+        if (this.props.onListCollapse) {
+            this.props.onListCollapse(!this.layout.isCollapsed)
+        }
    };

    private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
@ -530,7 +537,6 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                tiles.push(<RoomTile
                    room={room}
                    key={`room-${room.roomId}`}
-                    resizeNotifier={this.props.resizeNotifier}
                    showMessagePreview={this.layout.showPreviews}
                    isMinimized={this.props.isMinimized}
                    tag={this.props.tagId}
@ -754,7 +760,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
        );
    }

-    private onScrollPrevent(e: React.UIEvent<HTMLDivElement>) {
+    private onScrollPrevent(e: Event) {
        // the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
        // this fixes https://github.com/vector-im/element-web/issues/14413
        (e.target as HTMLDivElement).scrollTop = 0;
@ -883,7 +889,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                        className="mx_RoomSublist_resizeBox"
                        enable={handles}
                    >
-                        <div className="mx_RoomSublist_tiles" onScroll={this.onScrollPrevent}>
+                        <div className="mx_RoomSublist_tiles" ref={this.tilesRef}>
                            {visibleTiles}
                        </div>
                        {showNButton}
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@ -53,14 +53,12 @@ import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/Community
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getUnsentMessages } from "../../structures/RoomStatusBar";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
-import { ResizeNotifier } from "../../../utils/ResizeNotifier";

 interface IProps {
    room: Room;
    showMessagePreview: boolean;
    isMinimized: boolean;
    tag: TagID;
-    resizeNotifier: ResizeNotifier;
 }

 type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
@ -106,9 +104,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {

        this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
        this.roomProps = EchoChamber.forRoom(this.props.room);
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
-        }
    }

    private countUnsentEvents(): number {
@ -123,12 +118,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
        this.forceUpdate(); // notification state changed - update
    };

-    private onResize = () => {
-        if (this.showMessagePreview && !this.state.messagePreview) {
-            this.generatePreview();
-        }
-    };
-
    private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
        if (!room?.roomId === this.props.room.roomId) return;
        this.setState({hasUnsentEvents: this.countUnsentEvents() > 0});
@ -148,7 +137,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
    }

    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>) {
-        if (prevProps.showMessagePreview !== this.props.showMessagePreview && this.showMessagePreview) {
+        const showMessageChanged = prevProps.showMessagePreview !== this.props.showMessagePreview;
+        const minimizedChanged = prevProps.isMinimized !== this.props.isMinimized;
+        if (showMessageChanged || minimizedChanged) {
            this.generatePreview();
        }
        if (prevProps.room?.roomId !== this.props.room?.roomId) {
@ -208,9 +199,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
            );
            this.props.room.off("Room.name", this.onRoomNameUpdate);
        }
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.off("middlePanelResized", this.onResize);
-        }
        ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
        defaultDispatcher.unregister(this.dispatcherRef);
        this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@ -40,7 +40,7 @@ const STICKERPICKER_Z_INDEX = 3500;
 const PERSISTED_ELEMENT_KEY = "stickerPicker";

@replaceableComponent("views.rooms.Stickerpicker")
-export default class Stickerpicker extends React.Component {
+export default class Stickerpicker extends React.PureComponent {
    static currentWidget;

    constructor(props) {
@ -341,21 +341,27 @@ export default class Stickerpicker extends React.Component {
     * @param  {Event} ev Event that triggered the function call
     */
    _onHideStickersClick(ev) {
-        this.setState({showStickers: false});
+        if (this.state.showStickers) {
+            this.setState({showStickers: false});
+        }
    }

    /**
     * Called when the window is resized
     */
    _onResize() {
-        this.setState({showStickers: false});
+        if (this.state.showStickers) {
+            this.setState({showStickers: false});
+        }
    }

    /**
     * The stickers picker was hidden
     */
    _onFinished() {
-        this.setState({showStickers: false});
+        if (this.state.showStickers) {
+            this.setState({showStickers: false});
+        }
    }

    /**
--- a/src/components/views/rooms/WhoIsTypingTile.tsx
+++ b/src/components/views/rooms/WhoIsTypingTile.tsx
@ -16,36 +16,45 @@ limitations under the License.
 */

 import React from 'react';
-import PropTypes from 'prop-types';
+import Room from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import * as WhoIsTyping from '../../../WhoIsTyping';
 import Timer from '../../../utils/Timer';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import MemberAvatar from '../avatars/MemberAvatar';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { compare } from "../../../utils/strings";
+
+interface IProps {
+    // the room this statusbar is representing.
+    room: Room;
+    onShown?: () => void;
+    onHidden?: () => void;
+    // Number of names to display in typing indication. E.g. set to 3, will
+    // result in "X, Y, Z and 100 others are typing."
+    whoIsTypingLimit: number;
+}
+
+interface IState {
+    usersTyping: RoomMember[];
+    // a map with userid => Timer to delay
+    // hiding the "x is typing" message for a
+    // user so hiding it can coincide
+    // with the sent message by the other side
+    // resulting in less timeline jumpiness
+    delayedStopTypingTimers: Record<string, Timer>;
+}

@replaceableComponent("views.rooms.WhoIsTypingTile")
-export default class WhoIsTypingTile extends React.Component {
-    static propTypes = {
-        // the room this statusbar is representing.
-        room: PropTypes.object.isRequired,
-        onShown: PropTypes.func,
-        onHidden: PropTypes.func,
-        // Number of names to display in typing indication. E.g. set to 3, will
-        // result in "X, Y, Z and 100 others are typing."
-        whoIsTypingLimit: PropTypes.number,
-    };
-
+export default class WhoIsTypingTile extends React.Component<IProps, IState> {
    static defaultProps = {
        whoIsTypingLimit: 3,
    };

    state = {
        usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
-        // a map with userid => Timer to delay
-        // hiding the "x is typing" message for a
-        // user so hiding it can coincide
-        // with the sent message by the other side
-        // resulting in less timeline jumpiness
        delayedStopTypingTimers: {},
    };

@ -71,37 +80,39 @@ export default class WhoIsTypingTile extends React.Component {
            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
            client.removeListener("Room.timeline", this.onRoomTimeline);
        }
-        Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
+        Object.values(this.state.delayedStopTypingTimers).forEach((t) => (t as Timer).abort());
    }

-    _isVisible(state) {
+    private _isVisible(state: IState): boolean {
        return state.usersTyping.length !== 0 || Object.keys(state.delayedStopTypingTimers).length !== 0;
    }

-    isVisible = () => {
+    public isVisible = (): boolean => {
        return this._isVisible(this.state);
    };

-    onRoomTimeline = (event, room) => {
+    private onRoomTimeline = (event: MatrixEvent, room: Room): void => {
        if (room?.roomId === this.props.room?.roomId) {
            const userId = event.getSender();
            // remove user from usersTyping
            const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
-            this.setState({usersTyping});
+            if (usersTyping.length !== this.state.usersTyping.length) {
+                this.setState({usersTyping});
+            }
            // abort timer if any
-            this._abortUserTimer(userId);
+            this.abortUserTimer(userId);
        }
    };

-    onRoomMemberTyping = (ev, member) => {
+    private onRoomMemberTyping = (): void => {
        const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
        this.setState({
-            delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
+            delayedStopTypingTimers: this.updateDelayedStopTypingTimers(usersTyping),
            usersTyping,
        });
    };

-    _updateDelayedStopTypingTimers(usersTyping) {
+    private updateDelayedStopTypingTimers(usersTyping: RoomMember[]): Record<string, Timer> {
        const usersThatStoppedTyping = this.state.usersTyping.filter((a) => {
            return !usersTyping.some((b) => a.userId === b.userId);
        });
@ -129,7 +140,7 @@ export default class WhoIsTypingTile extends React.Component {
                delayedStopTypingTimers[m.userId] = timer;
                timer.start();
                timer.finished().then(
-                    () => this._removeUserTimer(m.userId), // on elapsed
+                    () => this.removeUserTimer(m.userId), // on elapsed
                    () => {/* aborted */},
                );
            }
@ -139,15 +150,15 @@ export default class WhoIsTypingTile extends React.Component {
        return delayedStopTypingTimers;
    }

-    _abortUserTimer(userId) {
+    private abortUserTimer(userId: string): void {
        const timer = this.state.delayedStopTypingTimers[userId];
        if (timer) {
            timer.abort();
-            this._removeUserTimer(userId);
+            this.removeUserTimer(userId);
        }
    }

-    _removeUserTimer(userId) {
+    private removeUserTimer(userId: string): void {
        const timer = this.state.delayedStopTypingTimers[userId];
        if (timer) {
            const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
@ -156,7 +167,7 @@ export default class WhoIsTypingTile extends React.Component {
        }
    }

-    _renderTypingIndicatorAvatars(users, limit) {
+    private renderTypingIndicatorAvatars(users: RoomMember[], limit: number): JSX.Element[] {
        let othersCount = 0;
        if (users.length > limit) {
            othersCount = users.length - limit + 1;
@ -197,7 +208,7 @@ export default class WhoIsTypingTile extends React.Component {
        usersTyping = usersTyping.concat(stoppedUsersOnTimer);
        // sort them so the typing members don't change order when
        // moved to delayedStopTypingTimers
-        usersTyping.sort((a, b) => a.name.localeCompare(b.name));
+        usersTyping.sort((a, b) => compare(a.name, b.name));

        const typingString = WhoIsTyping.whoIsTypingString(
            usersTyping,
@ -210,7 +221,7 @@ export default class WhoIsTypingTile extends React.Component {
        return (
            <li className="mx_WhoIsTypingTile" aria-atomic="true">
                <div className="mx_WhoIsTypingTile_avatars">
-                    { this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
+                    { this.renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
                </div>
                <div className="mx_WhoIsTypingTile_label">
                    { typingString }
--- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
@ -25,6 +25,7 @@ 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";
+import { compare } from "../../../../../utils/strings";

 const plEventsToLabels = {
    // These will be translated for us later.
@ -312,7 +313,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
            // comparator for sorting PL users lexicographically on PL descending, MXID ascending. (case-insensitive)
            const comparator = (a, b) => {
                const plDiff = userLevels[b.key] - userLevels[a.key];
-                return plDiff !== 0 ? plDiff : a.key.toLocaleLowerCase().localeCompare(b.key.toLocaleLowerCase());
+                return plDiff !== 0 ? plDiff : compare(a.key.toLocaleLowerCase(), b.key.toLocaleLowerCase());
            };

            privilegedUsers.sort(comparator);
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@ -35,9 +35,10 @@ import Field from '../../../elements/Field';
 import EventTilePreview from '../../../elements/EventTilePreview';
 import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
-import {UIFeature} from "../../../../../settings/UIFeature";
-import {Layout} from "../../../../../settings/Layout";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { UIFeature } from "../../../../../settings/UIFeature";
+import { Layout } from "../../../../../settings/Layout";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { compare } from "../../../../../utils/strings";

 interface IProps {
 }
@ -295,7 +296,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
            .map(p => ({id: p[0], name: p[1]})); // convert pairs to objects for code readability
        const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
        const customThemes = themes.filter(p => !builtInThemes.includes(p))
-            .sort((a, b) => a.name.localeCompare(b.name));
+            .sort((a, b) => compare(a.name, b.name));
        const orderedThemes = [...builtInThemes, ...customThemes];
        return (
            <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, {useState} from "react";
+import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";

@ -127,6 +127,12 @@ const SpacePanel = () => {
    const [invites, spaces, activeSpace] = useSpaces();
    const [isPanelCollapsed, setPanelCollapsed] = useState(true);

+    useEffect(() => {
+        if (!isPanelCollapsed && menuDisplayed) {
+            closeMenu();
+        }
+    }, [isPanelCollapsed]); // eslint-disable-line react-hooks/exhaustive-deps
+
    const newClasses = classNames("mx_SpaceButton_new", {
        mx_SpaceButton_newCancel: menuDisplayed,
    });
@ -235,18 +241,15 @@ const SpacePanel = () => {
                        className={newClasses}
                        tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
                        onClick={menuDisplayed ? closeMenu : () => {
-                            openMenu();
                            if (!isPanelCollapsed) setPanelCollapsed(true);
+                            openMenu();
                        }}
                        isNarrow={isPanelCollapsed}
                    />
                </AutoHideScrollbar>
                <AccessibleTooltipButton
                    className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
-                    onClick={() => {
-                        setPanelCollapsed(!isPanelCollapsed);
-                        if (menuDisplayed) closeMenu();
-                    }}
+                    onClick={() => setPanelCollapsed(!isPanelCollapsed)}
                    title={expandCollapseButtonTitle}
                />
                { contextMenu }