Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into t3chguy/dpsah/6785

 Conflicts:

	src/components/structures/ScrollPanel.js

	src/components/views/rooms/AppsDrawer.js

package.json

@@ -61,7 +61,6 @@
     "classnames": "^2.2.6",
     "commonmark": "^0.29.1",
     "counterpart": "^0.18.6",
-    "create-react-class": "^15.6.3",
     "diff-dom": "^4.1.6",
     "diff-match-patch": "^1.0.5",
     "emojibase-data": "^5.0.1",

res/css/_components.scss

@@ -68,6 +68,7 @@
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
+@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";

res/css/structures/_UserMenu.scss

@@ -16,9 +16,33 @@ limitations under the License.
 
 .mx_UserMenu {
 
-    // to make the ... button sort of aligned with the explore button below
+    // to make the menu button sort of aligned with the explore button below
     padding-right: 6px;
 
+    &.mx_UserMenu_prototype {
+        // The margin & padding combination between here and the ::after is to
+        // align the border line with the tag panel.
+        margin-bottom: 6px;
+
+        padding-right: 0; // make the right edge line up with the explore button
+
+        .mx_UserMenu_headerButtons {
+            // considering we've eliminated right padding on the menu itself, we need to
+            // push the chevron in slightly (roughly lining up with the center of the
+            // plus buttons)
+            margin-right: 2px;
+        }
+
+        // we cheat opacity on the theme colour with an after selector here
+        &::after {
+            content: '';
+            border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
+            opacity: 0.2;
+            display: block;
+            padding-top: 8px;
+        }
+    }
+
     .mx_UserMenu_headerButtons {
         width: 16px;
         height: 16px;
@@ -36,7 +60,7 @@ limitations under the License.
             mask-size: contain;
             mask-repeat: no-repeat;
             background: $primary-fg-color;
-            mask-image: url('$(res)/img/element-icons/context-menu.svg');
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
     }
 
@@ -56,6 +80,28 @@ limitations under the License.
             }
         }
 
+        .mx_UserMenu_doubleName {
+            flex: 1;
+            min-width: 0; // make flexbox aware that it can crush this to a tiny width
+
+            .mx_UserMenu_userName,
+            .mx_UserMenu_subUserName {
+                display: block;
+            }
+
+            .mx_UserMenu_subUserName {
+                color: $muted-fg-color;
+                font-size: $font-13px;
+                line-height: $font-18px;
+                flex: 1;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+
         .mx_UserMenu_userName {
             font-weight: 600;
             font-size: $font-15px;
@@ -89,6 +135,44 @@ limitations under the License.
 .mx_UserMenu_contextMenu {
     width: 247px;
 
+    // These override the styles already present on the user menu rather than try to
+    // define a new menu. They are specifically for the stacked menu when a community
+    // is being represented as a prototype.
+    &.mx_UserMenu_contextMenu_prototype {
+        padding-bottom: 16px;
+
+        .mx_UserMenu_contextMenu_header {
+            padding-bottom: 0;
+            padding-top: 16px;
+
+            &:nth-child(n + 2) {
+                padding-top: 8px;
+            }
+        }
+
+        hr {
+            width: 85%;
+            opacity: 0.2;
+            border: none;
+            border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
+        }
+
+        &.mx_IconizedContextMenu {
+            > .mx_IconizedContextMenu_optionList {
+                margin-top: 4px;
+
+                &::before {
+                    border: none;
+                }
+
+                > .mx_AccessibleButton {
+                    padding-top: 2px;
+                    padding-bottom: 2px;
+                }
+            }
+        }
+    }
+
     &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
         .mx_AccessibleButton {
             padding-top: 16px;
@@ -193,4 +277,12 @@ limitations under the License.
     .mx_UserMenu_iconSignOut::before {
         mask-image: url('$(res)/img/element-icons/leave.svg');
     }
+
+    .mx_UserMenu_iconMembers::before {
+        mask-image: url('$(res)/img/element-icons/room/members.svg');
+    }
+
+    .mx_UserMenu_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+    }
 }

res/css/views/dialogs/_EditCommunityPrototypeDialog.scss

@@ -0,0 +1,77 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// XXX: many of these styles are shared with the create dialog
+.mx_EditCommunityPrototypeDialog {
+    &.mx_Dialog_fixedWidth {
+        width: 360px;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 12px;
+
+        .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+            display: block;
+            height: 32px;
+            font-size: $font-16px;
+            line-height: 32px;
+        }
+
+        .mx_EditCommunityPrototypeDialog_rowAvatar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .mx_EditCommunityPrototypeDialog_avatarContainer {
+            margin-top: 20px;
+            margin-bottom: 20px;
+
+            .mx_EditCommunityPrototypeDialog_avatar,
+            .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+                width: 96px;
+                height: 96px;
+                border-radius: 96px;
+            }
+
+            .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+                background-color: #368bd6; // hardcoded for both themes
+
+                &::before {
+                    display: inline-block;
+                    background-color: #fff; // hardcoded because the background is
+                    mask-repeat: no-repeat;
+                    mask-size: 96px;
+                    width: 96px;
+                    height: 96px;
+                    mask-position: center;
+                    content: '';
+                    vertical-align: middle;
+                    mask-image: url('$(res)/img/element-icons/add-photo.svg');
+                }
+            }
+        }
+
+        .mx_EditCommunityPrototypeDialog_tip {
+            margin-left: 20px;
+
+            & > b, & > span {
+                display: block;
+                color: $muted-fg-color;
+            }
+        }
+    }
+}

res/css/views/dialogs/_InviteDialog.scss

@@ -89,6 +89,13 @@ limitations under the License.
         font-weight: bold;
         text-transform: uppercase;
     }
+
+    .mx_InviteDialog_subname {
+        margin-bottom: 10px;
+        margin-top: -10px; // HACK: Positioning with margins is bad
+        font-size: $font-12px;
+        color: $muted-fg-color;
+    }
 }
 
 .mx_InviteDialog_roomTile {
@@ -226,3 +233,7 @@ limitations under the License.
 .mx_InviteDialog_addressBar {
     margin-right: 45px;
 }
+
+.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
+    padding: 0;
+}

res/css/views/settings/tabs/_SettingsTab.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,6 +22,7 @@ limitations under the License.
     font-size: $font-20px;
     font-weight: 600;
     color: $primary-fg-color;
+    margin-bottom: 10px;
 }
 
 .mx_SettingsTab_heading:nth-child(n + 2) {

src/@types/global.d.ts

@@ -28,6 +28,7 @@ import SettingsStore from "../settings/SettingsStore";
 import {ActiveRoomObserver} from "../ActiveRoomObserver";
 import {Notifier} from "../Notifier";
 import type {Renderer} from "react-dom";
+import RightPanelStore from "../stores/RightPanelStore";
 
 declare global {
     interface Window {
@@ -49,6 +50,7 @@ declare global {
         singletonModalManager: ModalManager;
         mxSettingsStore: SettingsStore;
         mxNotifier: typeof Notifier;
+        mxRightPanelStore: RightPanelStore;
     }
 
     interface Document {

src/AsyncWrapper.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import createReactClass from 'create-react-class';
+import React from "react";
 import * as sdk from './index';
 import PropTypes from 'prop-types';
 import { _t } from './languageHandler';
@@ -24,21 +24,19 @@ import { _t } from './languageHandler';
  * Wrap an asynchronous loader function with a react component which shows a
  * spinner until the real component loads.
  */
-export default createReactClass({
+export default class AsyncWrapper extends React.Component {
-    propTypes: {
+    static propTypes = {
         /** A promise which resolves with the real component
          */
         prom: PropTypes.object.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         component: null,
         error: null,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._unmounted = false;
         // XXX: temporary logging to try to diagnose
         // https://github.com/vector-im/element-web/issues/3148
@@ -56,17 +54,17 @@ export default createReactClass({
             console.warn('AsyncWrapper promise failed', e);
             this.setState({error: e});
         });
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    _onWrapperCancelClick: function() {
+    _onWrapperCancelClick = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    render: function() {
+    render() {
         if (this.state.component) {
             const Component = this.state.component;
             return <Component {...this.props} />;
@@ -87,6 +85,6 @@ export default createReactClass({
             const Spinner = sdk.getComponent("elements.Spinner");
             return <Spinner />;
         }
-    },
+    }
-});
+}
 

src/DeviceListener.ts

@@ -30,7 +30,7 @@ import {
     showToast as showUnverifiedSessionsToast,
 } from "./toasts/UnverifiedSessionToast";
 import { privateShouldBeEncrypted } from "./createRoom";
-import { isSecretStorageBeingAccessed, accessSecretStorage } from "./CrossSigningManager";
+import { isSecretStorageBeingAccessed, accessSecretStorage } from "./SecurityManager";
 import { isSecureBackupRequired } from './utils/WellKnownUtils';
 import { isLoggedIn } from './components/structures/MatrixChat';
 
@@ -220,7 +220,10 @@ export default class DeviceListener {
             await cli.downloadKeys([cli.getUserId()]);
             // cross signing isn't enabled - nag to enable it
             // There are 3 different toasts for:
-            if (cli.getStoredCrossSigningForUser(cli.getUserId())) {
+            if (
+                !cli.getCrossSigningId() &&
+                cli.getStoredCrossSigningForUser(cli.getUserId())
+            ) {
                 // Cross-signing on account but this device doesn't trust the master key (verify this session)
                 showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
             } else {

src/Markdown.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import commonmark from 'commonmark';
-import escape from 'lodash/escape';
+import {escape} from "lodash";
 
 const ALLOWED_HTML_TAGS = ['sub', 'sup', 'del', 'u'];
 

src/MatrixClientPeg.ts

@@ -31,7 +31,7 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from './utils/StorageManager';
 import IdentityAuthClient from './IdentityAuthClient';
-import { crossSigningCallbacks } from './CrossSigningManager';
+import { crossSigningCallbacks } from './SecurityManager';
 import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
 export interface IMatrixClientCreds {

src/RoomInvite.js

@@ -24,6 +24,7 @@ import * as sdk from './';
 import { _t } from './languageHandler';
 import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
+import {CommunityPrototypeStore} from "./stores/CommunityPrototypeStore";
 
 /**
  * Invites multiple addresses to a room
@@ -64,6 +65,16 @@ export function showCommunityRoomInviteDialog(roomId, communityName) {
     );
 }
 
+export function showCommunityInviteDialog(communityId) {
+    const chat = CommunityPrototypeStore.instance.getGeneralChat(communityId);
+    if (chat) {
+        const name = CommunityPrototypeStore.instance.getCommunityName(communityId);
+        showCommunityRoomInviteDialog(chat.roomId, name);
+    } else {
+        throw new Error("Failed to locate appropriate room to start an invite in");
+    }
+}
+
 /**
  * Checks if the given MatrixEvent is a valid 3rd party user invite.
  * @param {MatrixEvent} event The event to check

src/SecurityManager.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -142,7 +142,7 @@ const onSecretRequested = async function({
         return;
     }
     if (!deviceTrust || !deviceTrust.isVerified()) {
-        console.log(`CrossSigningManager: Ignoring request from untrusted device ${deviceId}`);
+        console.log(`Ignoring secret request from untrusted device ${deviceId}`);
         return;
     }
     if (

src/SendHistoryManager.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import _clamp from 'lodash/clamp';
+import {clamp} from "lodash";
 
 export default class SendHistoryManager {
     history: Array<HistoryItem> = [];
@@ -54,7 +54,7 @@ export default class SendHistoryManager {
     }
 
     getItem(offset: number): ?HistoryItem {
-        this.currentIndex = _clamp(this.currentIndex + offset, 0, this.history.length - 1);
+        this.currentIndex = clamp(this.currentIndex + offset, 0, this.history.length - 1);
         return this.history[this.currentIndex];
     }
 }

src/SlashCommands.tsx

@@ -154,6 +154,19 @@ export const Commands = [
         },
         category: CommandCategories.messages,
     }),
+    new Command({
+        command: 'lenny',
+        args: '<message>',
+        description: _td('Prepends ( ͡° ͜ʖ ͡°) to a plain-text message'),
+        runFn: function(roomId, args) {
+            let message = '( ͡° ͜ʖ ͡°)';
+            if (args) {
+                message = message + ' ' + args;
+            }
+            return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
+        },
+        category: CommandCategories.messages,
+    }),
     new Command({
         command: 'plain',
         args: '<message>',

src/accessibility/context_menu/MenuItem.tsx

@@ -26,8 +26,9 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
 
 // Semantic component for representing a role=menuitem
 export const MenuItem: React.FC<IProps> = ({children, label, ...props}) => {
+    const ariaLabel = props["aria-label"] || label;
     return (
-        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={label}>
+        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel}>
             { children }
         </AccessibleButton>
     );

src/async-components/views/dialogs/ExportE2eKeysDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 import FileSaver from 'file-saver';
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
 import { MatrixClient } from 'matrix-js-sdk';
@@ -27,34 +26,31 @@ import * as sdk from '../../../index';
 const PHASE_EDIT = 1;
 const PHASE_EXPORTING = 2;
 
-export default createReactClass({
+export default class ExportE2eKeysDialog extends React.Component {
-    displayName: 'ExportE2eKeysDialog',
+    static propTypes = {
-
-    propTypes: {
         matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            phase: PHASE_EDIT,
-            errStr: null,
     };
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    constructor(props) {
-    UNSAFE_componentWillMount: function() {
+        super(props);
+
         this._unmounted = false;
 
         this._passphrase1 = createRef();
         this._passphrase2 = createRef();
-    },
 
-    componentWillUnmount: function() {
+        this.state = {
+            phase: PHASE_EDIT,
+            errStr: null,
+        };
+    }
+
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    _onPassphraseFormSubmit: function(ev) {
+    _onPassphraseFormSubmit = (ev) => {
         ev.preventDefault();
 
         const passphrase = this._passphrase1.current.value;
@@ -69,9 +65,9 @@ export default createReactClass({
 
         this._startExport(passphrase);
         return false;
-    },
+    };
 
-    _startExport: function(passphrase) {
+    _startExport(passphrase) {
         // extra Promise.resolve() to turn synchronous exceptions into
         // asynchronous ones.
         Promise.resolve().then(() => {
@@ -102,15 +98,15 @@ export default createReactClass({
             errStr: null,
             phase: PHASE_EXPORTING,
         });
-    },
+    }
 
-    _onCancelClick: function(ev) {
+    _onCancelClick = (ev) => {
         ev.preventDefault();
         this.props.onFinished(false);
         return false;
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         const disableForm = (this.state.phase === PHASE_EXPORTING);
@@ -184,5 +180,5 @@ export default createReactClass({
                 </form>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/async-components/views/dialogs/ImportE2eKeysDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 
 import { MatrixClient } from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
@@ -38,48 +37,45 @@ function readFileAsArrayBuffer(file) {
 const PHASE_EDIT = 1;
 const PHASE_IMPORTING = 2;
 
-export default createReactClass({
+export default class ImportE2eKeysDialog extends React.Component {
-    displayName: 'ImportE2eKeysDialog',
+    static propTypes = {
-
-    propTypes: {
         matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            enableSubmit: false,
-            phase: PHASE_EDIT,
-            errStr: null,
     };
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    constructor(props) {
-    UNSAFE_componentWillMount: function() {
+        super(props);
+
         this._unmounted = false;
 
         this._file = createRef();
         this._passphrase = createRef();
-    },
 
-    componentWillUnmount: function() {
+        this.state = {
+            enableSubmit: false,
+            phase: PHASE_EDIT,
+            errStr: null,
+        };
+    }
+
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    _onFormChange: function(ev) {
+    _onFormChange = (ev) => {
         const files = this._file.current.files || [];
         this.setState({
             enableSubmit: (this._passphrase.current.value !== "" && files.length > 0),
         });
-    },
+    };
 
-    _onFormSubmit: function(ev) {
+    _onFormSubmit = (ev) => {
         ev.preventDefault();
         this._startImport(this._file.current.files[0], this._passphrase.current.value);
         return false;
-    },
+    };
 
-    _startImport: function(file, passphrase) {
+    _startImport(file, passphrase) {
         this.setState({
             errStr: null,
             phase: PHASE_IMPORTING,
@@ -105,15 +101,15 @@ export default createReactClass({
                 phase: PHASE_EDIT,
             });
         });
-    },
+    }
 
-    _onCancelClick: function(ev) {
+    _onCancelClick = (ev) => {
         ev.preventDefault();
         this.props.onFinished(false);
         return false;
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         const disableForm = (this.state.phase !== PHASE_EDIT);
@@ -188,5 +184,5 @@ export default createReactClass({
                 </form>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -21,7 +21,7 @@ import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
 import {_t, _td} from '../../../../languageHandler';
-import { accessSecretStorage } from '../../../../CrossSigningManager';
+import { accessSecretStorage } from '../../../../SecurityManager';
 import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
 import {copyNode} from "../../../../utils/strings";
 import PassphraseField from "../../../../components/views/auth/PassphraseField";

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -22,7 +22,7 @@ import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import FileSaver from 'file-saver';
 import {_t, _td} from '../../../../languageHandler';
 import Modal from '../../../../Modal';
-import { promptForBackupPassphrase } from '../../../../CrossSigningManager';
+import { promptForBackupPassphrase } from '../../../../SecurityManager';
 import {copyNode} from "../../../../utils/strings";
 import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents";
 import PassphraseField from "../../../../components/views/auth/PassphraseField";

src/autocomplete/CommunityProvider.tsx

@@ -23,7 +23,7 @@ import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
 import * as sdk from '../index';
-import _sortBy from 'lodash/sortBy';
+import {sortBy} from "lodash";
 import {makeGroupPermalink} from "../utils/permalinks/Permalinks";
 import {ICompletion, ISelectionRange} from "./Autocompleter";
 import FlairStore from "../stores/FlairStore";
@@ -81,7 +81,7 @@ export default class CommunityProvider extends AutocompleteProvider {
 
             const matchedString = command[0];
             completions = this.matcher.match(matchedString);
-            completions = _sortBy(completions, [
+            completions = sortBy(completions, [
                 (c) => score(matchedString, c.groupId),
                 (c) => c.groupId.length,
             ]).map(({avatarUrl, groupId, name}) => ({

src/autocomplete/EmojiProvider.tsx

@@ -23,8 +23,7 @@ import AutocompleteProvider from './AutocompleteProvider';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
 import {ICompletion, ISelectionRange} from './Autocompleter';
-import _uniq from 'lodash/uniq';
+import {uniq, sortBy} from 'lodash';
-import _sortBy from 'lodash/sortBy';
 import SettingsStore from "../settings/SettingsStore";
 import { shortcodeToUnicode } from '../HtmlUtils';
 import { EMOJI, IEmoji } from '../emoji';
@@ -115,7 +114,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             }
             // Finally, sort by original ordering
             sorters.push((c) => c._orderBy);
-            completions = _sortBy(_uniq(completions), sorters);
+            completions = sortBy(uniq(completions), sorters);
 
             completions = completions.map(({shortname}) => {
                 const unicode = shortcodeToUnicode(shortname);

src/autocomplete/QueryMatcher.ts

@@ -16,8 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import _at from 'lodash/at';
+import {at, uniq} from 'lodash';
-import _uniq from 'lodash/uniq';
 import {removeHiddenChars} from "matrix-js-sdk/src/utils";
 
 interface IOptions<T extends {}> {
@@ -73,7 +72,7 @@ export default class QueryMatcher<T extends Object> {
             // type for their values. We assume that those values who's keys have
             // been specified will be string. Also, we cannot infer all the
             // types of the keys of the objects at compile.
-            const keyValues = _at<string>(<any>object, this._options.keys);
+            const keyValues = at<string>(<any>object, this._options.keys);
 
             if (this._options.funcs) {
                 for (const f of this._options.funcs) {
@@ -137,7 +136,7 @@ export default class QueryMatcher<T extends Object> {
         });
 
         // Now map the keys to the result objects. Also remove any duplicates.
-        return _uniq(matches.map((match) => match.object));
+        return uniq(matches.map((match) => match.object));
     }
 
     private processQuery(query: string): string {

src/autocomplete/RoomProvider.tsx

@@ -27,7 +27,7 @@ import {PillCompletion} from './Components';
 import * as sdk from '../index';
 import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
 import {ICompletion, ISelectionRange} from "./Autocompleter";
-import { uniqBy, sortBy } from 'lodash';
+import {uniqBy, sortBy} from "lodash";
 
 const ROOM_REGEX = /\B#\S*/g;
 

src/autocomplete/UserProvider.tsx

@@ -23,7 +23,7 @@ import AutocompleteProvider from './AutocompleteProvider';
 import {PillCompletion} from './Components';
 import * as sdk from '../index';
 import QueryMatcher from './QueryMatcher';
-import _sortBy from 'lodash/sortBy';
+import {sortBy} from 'lodash';
 import {MatrixClientPeg} from '../MatrixClientPeg';
 
 import MatrixEvent from "matrix-js-sdk/src/models/event";
@@ -156,7 +156,7 @@ export default class UserProvider extends AutocompleteProvider {
         const currentUserId = MatrixClientPeg.get().credentials.userId;
         this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId);
 
-        this.users = _sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
+        this.users = sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
 
         this.matcher.setObjects(this.users);
     }

src/components/structures/EmbeddedPage.js

@@ -43,8 +43,8 @@ export default class EmbeddedPage extends React.PureComponent {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         this._dispatcherRef = null;
 

src/components/structures/FilePanel.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
 import {Filter} from 'matrix-js-sdk';
@@ -28,23 +27,20 @@ import { _t } from '../../languageHandler';
 /*
  * Component which shows the filtered file using a TimelinePanel
  */
-const FilePanel = createReactClass({
+class FilePanel extends React.Component {
-    displayName: 'FilePanel',
+    static propTypes = {
+        roomId: PropTypes.string.isRequired,
+    };
+
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.
-    decryptingEvents: new Set(),
+    decryptingEvents = new Set();
 
-    propTypes: {
+    state = {
-        roomId: PropTypes.string.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
         timelineSet: null,
     };
-    },
 
-    onRoomTimeline(ev, room, toStartOfTimeline, removed, data) {
+    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
         if (room.roomId !== this.props.roomId) return;
         if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
 
@@ -53,9 +49,9 @@ const FilePanel = createReactClass({
         } else {
             this.addEncryptedLiveEvent(ev);
         }
-    },
+    };
 
-    onEventDecrypted(ev, err) {
+    onEventDecrypted = (ev, err) => {
         if (ev.getRoomId() !== this.props.roomId) return;
         const eventId = ev.getId();
 
@@ -63,7 +59,7 @@ const FilePanel = createReactClass({
         if (err) return;
 
         this.addEncryptedLiveEvent(ev);
-    },
+    };
 
     addEncryptedLiveEvent(ev, toStartOfTimeline) {
         if (!this.state.timelineSet) return;
@@ -77,7 +73,7 @@ const FilePanel = createReactClass({
         if (!this.state.timelineSet.eventIdToTimeline(ev.getId())) {
             this.state.timelineSet.addEventToTimeline(ev, timeline, false);
         }
-    },
+    }
 
     async componentDidMount() {
         const client = MatrixClientPeg.get();
@@ -98,7 +94,7 @@ const FilePanel = createReactClass({
             client.on('Room.timeline', this.onRoomTimeline);
             client.on('Event.decrypted', this.onEventDecrypted);
         }
-    },
+    }
 
     componentWillUnmount() {
         const client = MatrixClientPeg.get();
@@ -110,7 +106,7 @@ const FilePanel = createReactClass({
             client.removeListener('Room.timeline', this.onRoomTimeline);
             client.removeListener('Event.decrypted', this.onEventDecrypted);
         }
-    },
+    }
 
     async fetchFileEventsServer(room) {
         const client = MatrixClientPeg.get();
@@ -134,9 +130,9 @@ const FilePanel = createReactClass({
         const timelineSet = room.getOrCreateFilteredTimelineSet(filter);
 
         return timelineSet;
-    },
+    }
 
-    onPaginationRequest(timelineWindow, direction, limit) {
+    onPaginationRequest = (timelineWindow, direction, limit) => {
         const client = MatrixClientPeg.get();
         const eventIndex = EventIndexPeg.get();
         const roomId = this.props.roomId;
@@ -152,7 +148,7 @@ const FilePanel = createReactClass({
         } else {
             return timelineWindow.paginate(direction, limit);
         }
-    },
+    };
 
     async updateTimelineSet(roomId: string) {
         const client = MatrixClientPeg.get();
@@ -188,9 +184,9 @@ const FilePanel = createReactClass({
         } else {
             console.error("Failed to add filtered timelineSet for FilePanel as no room!");
         }
-    },
+    }
 
-    render: function() {
+    render() {
         if (MatrixClientPeg.get().isGuest()) {
             return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
                 <div className="mx_RoomView_empty">
@@ -220,7 +216,7 @@ const FilePanel = createReactClass({
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
             return (
                 <div className="mx_FilePanel" role="tabpanel">
-                    <TimelinePanel key={"filepanel_" + this.props.roomId}
+                    <TimelinePanel
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={this.state.timelineSet}
@@ -239,7 +235,7 @@ const FilePanel = createReactClass({
                 </div>
             );
         }
-    },
+    }
-});
+}
 
 export default FilePanel;

src/components/structures/GroupView.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import * as sdk from '../../index';
@@ -70,10 +69,8 @@ const UserSummaryType = PropTypes.shape({
     }).isRequired,
 });
 
-const CategoryRoomList = createReactClass({
+class CategoryRoomList extends React.Component {
-    displayName: 'CategoryRoomList',
+    static propTypes = {
-
-    props: {
         rooms: PropTypes.arrayOf(RoomSummaryType).isRequired,
         category: PropTypes.shape({
             profile: PropTypes.shape({
@@ -84,9 +81,9 @@ const CategoryRoomList = createReactClass({
 
         // Whether the list should be editable
         editing: PropTypes.bool.isRequired,
-    },
+    };
 
-    onAddRoomsToSummaryClicked: function(ev) {
+    onAddRoomsToSummaryClicked = (ev) => {
         ev.preventDefault();
         const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
         Modal.createTrackedDialog('Add Rooms to Group Summary', '', AddressPickerDialog, {
@@ -122,9 +119,9 @@ const CategoryRoomList = createReactClass({
                 });
             },
         }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
-    },
+    };
 
-    render: function() {
+    render() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
@@ -155,19 +152,17 @@ const CategoryRoomList = createReactClass({
             { roomNodes }
             { addButton }
         </div>;
-    },
+    }
-});
+}
 
-const FeaturedRoom = createReactClass({
+class FeaturedRoom extends React.Component {
-    displayName: 'FeaturedRoom',
+    static propTypes = {
-
-    props: {
         summaryInfo: RoomSummaryType.isRequired,
         editing: PropTypes.bool.isRequired,
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    onClick: function(e) {
+    onClick = (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -176,9 +171,9 @@ const FeaturedRoom = createReactClass({
             room_alias: this.props.summaryInfo.profile.canonical_alias,
             room_id: this.props.summaryInfo.room_id,
         });
-    },
+    };
 
-    onDeleteClicked: function(e) {
+    onDeleteClicked = (e) => {
         e.preventDefault();
         e.stopPropagation();
         GroupStore.removeRoomFromGroupSummary(
@@ -201,9 +196,9 @@ const FeaturedRoom = createReactClass({
                 description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
             });
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
 
         const roomName = this.props.summaryInfo.profile.name ||
@@ -243,13 +238,11 @@ const FeaturedRoom = createReactClass({
             <div className="mx_GroupView_featuredThing_name">{ roomNameNode }</div>
             { deleteButton }
         </AccessibleButton>;
-    },
+    }
-});
+}
 
-const RoleUserList = createReactClass({
+class RoleUserList extends React.Component {
-    displayName: 'RoleUserList',
+    static propTypes = {
-
-    props: {
         users: PropTypes.arrayOf(UserSummaryType).isRequired,
         role: PropTypes.shape({
             profile: PropTypes.shape({
@@ -260,9 +253,9 @@ const RoleUserList = createReactClass({
 
         // Whether the list should be editable
         editing: PropTypes.bool.isRequired,
-    },
+    };
 
-    onAddUsersClicked: function(ev) {
+    onAddUsersClicked = (ev) => {
         ev.preventDefault();
         const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
         Modal.createTrackedDialog('Add Users to Group Summary', '', AddressPickerDialog, {
@@ -298,9 +291,9 @@ const RoleUserList = createReactClass({
                 });
             },
         }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
-    },
+    };
 
-    render: function() {
+    render() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
@@ -325,19 +318,17 @@ const RoleUserList = createReactClass({
             { userNodes }
             { addButton }
         </div>;
-    },
+    }
-});
+}
 
-const FeaturedUser = createReactClass({
+class FeaturedUser extends React.Component {
-    displayName: 'FeaturedUser',
+    static propTypes = {
-
-    props: {
         summaryInfo: UserSummaryType.isRequired,
         editing: PropTypes.bool.isRequired,
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    onClick: function(e) {
+    onClick = (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -345,9 +336,9 @@ const FeaturedUser = createReactClass({
             action: 'view_start_chat_or_reuse',
             user_id: this.props.summaryInfo.user_id,
         });
-    },
+    };
 
-    onDeleteClicked: function(e) {
+    onDeleteClicked = (e) => {
         e.preventDefault();
         e.stopPropagation();
         GroupStore.removeUserFromGroupSummary(
@@ -368,9 +359,9 @@ const FeaturedUser = createReactClass({
                 description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
             });
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
         const name = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id;
 
@@ -394,23 +385,20 @@ const FeaturedUser = createReactClass({
             <div className="mx_GroupView_featuredThing_name">{ userNameNode }</div>
             { deleteButton }
         </AccessibleButton>;
-    },
+    }
-});
+}
 
 const GROUP_JOINPOLICY_OPEN = "open";
 const GROUP_JOINPOLICY_INVITE = "invite";
 
-export default createReactClass({
+export default class GroupView extends React.Component {
-    displayName: 'GroupView',
+    static propTypes = {
-
-    propTypes: {
         groupId: PropTypes.string.isRequired,
         // Whether this is the first time the group admin is viewing the group
         groupIsNew: PropTypes.bool,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         summary: null,
         isGroupPublicised: null,
         isUserPrivileged: null,
@@ -426,9 +414,8 @@ export default createReactClass({
         inviterProfile: null,
         showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._unmounted = false;
         this._matrixClient = MatrixClientPeg.get();
         this._matrixClient.on("Group.myMembership", this._onGroupMyMembership);
@@ -437,9 +424,9 @@ export default createReactClass({
 
         this._dispatcherRef = dis.register(this._onAction);
         this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this._unmounted = true;
         this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
         dis.unregister(this._dispatcherRef);
@@ -448,10 +435,11 @@ export default createReactClass({
         if (this._rightPanelStoreToken) {
             this._rightPanelStoreToken.remove();
         }
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(newProps) {
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (this.props.groupId !== newProps.groupId) {
             this.setState({
                 summary: null,
@@ -460,24 +448,24 @@ export default createReactClass({
                 this._initGroupStore(newProps.groupId);
             });
         }
-    },
+    }
 
-    _onRightPanelStoreUpdate: function() {
+    _onRightPanelStoreUpdate = () => {
         this.setState({
             showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
         });
-    },
+    };
 
-    _onGroupMyMembership: function(group) {
+    _onGroupMyMembership = (group) => {
         if (this._unmounted || group.groupId !== this.props.groupId) return;
         if (group.myMembership === 'leave') {
             // Leave settings - the user might have clicked the "Leave" button
             this._closeSettings();
         }
         this.setState({membershipBusy: false});
-    },
+    };
 
-    _initGroupStore: function(groupId, firstInit) {
+    _initGroupStore(groupId, firstInit) {
         const group = this._matrixClient.getGroup(groupId);
         if (group && group.inviter && group.inviter.userId) {
             this._fetchInviterProfile(group.inviter.userId);
@@ -506,9 +494,9 @@ export default createReactClass({
                 });
             }
         });
-    },
+    }
 
-    onGroupStoreUpdated(firstInit) {
+    onGroupStoreUpdated = (firstInit) => {
         if (this._unmounted) return;
         const summary = GroupStore.getSummary(this.props.groupId);
         if (summary.profile) {
@@ -533,7 +521,7 @@ export default createReactClass({
         if (this.props.groupIsNew && firstInit) {
             this._onEditClick();
         }
-    },
+    };
 
     _fetchInviterProfile(userId) {
         this.setState({
@@ -555,9 +543,9 @@ export default createReactClass({
                 inviterProfileBusy: false,
             });
         });
-    },
+    }
 
-    _onEditClick: function() {
+    _onEditClick = () => {
         this.setState({
             editing: true,
             profileForm: Object.assign({}, this.state.summary.profile),
@@ -568,20 +556,20 @@ export default createReactClass({
                         GROUP_JOINPOLICY_INVITE,
             },
         });
-    },
+    };
 
-    _onShareClick: function() {
+    _onShareClick = () => {
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share community dialog', '', ShareDialog, {
             target: this._matrixClient.getGroup(this.props.groupId) || new Group(this.props.groupId),
         });
-    },
+    };
 
-    _onCancelClick: function() {
+    _onCancelClick = () => {
         this._closeSettings();
-    },
+    };
 
-    _onAction(payload) {
+    _onAction = (payload) => {
         switch (payload.action) {
             // NOTE: close_settings is an app-wide dispatch; as it is dispatched from MatrixChat
             case 'close_settings':
@@ -593,34 +581,34 @@ export default createReactClass({
             default:
                 break;
         }
-    },
+    };
 
-    _closeSettings() {
+    _closeSettings = () => {
         dis.dispatch({action: 'close_settings'});
-    },
+    };
 
-    _onNameChange: function(value) {
+    _onNameChange = (value) => {
         const newProfileForm = Object.assign(this.state.profileForm, { name: value });
         this.setState({
             profileForm: newProfileForm,
         });
-    },
+    };
 
-    _onShortDescChange: function(value) {
+    _onShortDescChange = (value) => {
         const newProfileForm = Object.assign(this.state.profileForm, { short_description: value });
         this.setState({
             profileForm: newProfileForm,
         });
-    },
+    };
 
-    _onLongDescChange: function(e) {
+    _onLongDescChange = (e) => {
         const newProfileForm = Object.assign(this.state.profileForm, { long_description: e.target.value });
         this.setState({
             profileForm: newProfileForm,
         });
-    },
+    };
 
-    _onAvatarSelected: function(ev) {
+    _onAvatarSelected = ev => {
         const file = ev.target.files[0];
         if (!file) return;
 
@@ -644,15 +632,15 @@ export default createReactClass({
                 description: _t('Failed to upload image'),
             });
         });
-    },
+    };
 
-    _onJoinableChange: function(ev) {
+    _onJoinableChange = ev => {
         this.setState({
             joinableForm: { policyType: ev.target.value },
         });
-    },
+    };
 
-    _onSaveClick: function() {
+    _onSaveClick = () => {
         this.setState({saving: true});
         const savePromise = this.state.isUserPrivileged ? this._saveGroup() : Promise.resolve();
         savePromise.then((result) => {
@@ -683,16 +671,16 @@ export default createReactClass({
                 avatarChanged: false,
             });
         });
-    },
+    };
 
-    _saveGroup: async function() {
+    async _saveGroup() {
         await this._matrixClient.setGroupProfile(this.props.groupId, this.state.profileForm);
         await this._matrixClient.setGroupJoinPolicy(this.props.groupId, {
             type: this.state.joinableForm.policyType,
         });
-    },
+    }
 
-    _onAcceptInviteClick: async function() {
+    _onAcceptInviteClick = async () => {
         this.setState({membershipBusy: true});
 
         // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
@@ -709,9 +697,9 @@ export default createReactClass({
                 description: _t("Unable to accept invite"),
             });
         });
-    },
+    };
 
-    _onRejectInviteClick: async function() {
+    _onRejectInviteClick = async () => {
         this.setState({membershipBusy: true});
 
         // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
@@ -728,9 +716,9 @@ export default createReactClass({
                 description: _t("Unable to reject invite"),
             });
         });
-    },
+    };
 
-    _onJoinClick: async function() {
+    _onJoinClick = async () => {
         if (this._matrixClient.isGuest()) {
             dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${this.props.groupId}`}});
             return;
@@ -752,9 +740,9 @@ export default createReactClass({
                 description: _t("Unable to join community"),
             });
         });
-    },
+    };
 
-    _leaveGroupWarnings: function() {
+    _leaveGroupWarnings() {
         const warnings = [];
 
         if (this.state.isUserPrivileged) {
@@ -768,10 +756,9 @@ export default createReactClass({
         }
 
         return warnings;
-    },
+    }
 
-
+    _onLeaveClick = () => {
-    _onLeaveClick: function() {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         const warnings = this._leaveGroupWarnings();
 
@@ -806,13 +793,13 @@ export default createReactClass({
                 });
             },
         });
-    },
+    };
 
-    _onAddRoomsClick: function() {
+    _onAddRoomsClick = () => {
         showGroupAddRoomDialog(this.props.groupId);
-    },
+    };
 
-    _getGroupSection: function() {
+    _getGroupSection() {
         const groupSettingsSectionClasses = classnames({
             "mx_GroupView_group": this.state.editing,
             "mx_GroupView_group_disabled": this.state.editing && !this.state.isUserPrivileged,
@@ -856,9 +843,9 @@ export default createReactClass({
             { this._getLongDescriptionNode() }
             { this._getRoomsNode() }
         </div>;
-    },
+    }
 
-    _getRoomsNode: function() {
+    _getRoomsNode() {
         const RoomDetailList = sdk.getComponent('rooms.RoomDetailList');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
@@ -902,9 +889,9 @@ export default createReactClass({
                     className={roomDetailListClassName} />
             }
         </div>;
-    },
+    }
 
-    _getFeaturedRoomsNode: function() {
+    _getFeaturedRoomsNode() {
         const summary = this.state.summary;
 
         const defaultCategoryRooms = [];
@@ -943,9 +930,9 @@ export default createReactClass({
             { defaultCategoryNode }
             { categoryRoomNodes }
         </div>;
-    },
+    }
 
-    _getFeaturedUsersNode: function() {
+    _getFeaturedUsersNode() {
         const summary = this.state.summary;
 
         const noRoleUsers = [];
@@ -984,9 +971,9 @@ export default createReactClass({
             { noRoleNode }
             { roleUserNodes }
         </div>;
-    },
+    }
 
-    _getMembershipSection: function() {
+    _getMembershipSection() {
         const Spinner = sdk.getComponent("elements.Spinner");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
@@ -1100,9 +1087,9 @@ export default createReactClass({
                 </div>
             </div>
         </div>;
-    },
+    }
 
-    _getJoinableNode: function() {
+    _getJoinableNode() {
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
         return this.state.editing ? <div>
             <h3>
@@ -1136,9 +1123,9 @@ export default createReactClass({
                 </label>
             </div>
         </div> : null;
-    },
+    }
 
-    _getLongDescriptionNode: function() {
+    _getLongDescriptionNode() {
         const summary = this.state.summary;
         let description = null;
         if (summary.profile && summary.profile.long_description) {
@@ -1175,9 +1162,9 @@ export default createReactClass({
             <div className="mx_GroupView_groupDesc">
                 { description }
             </div>;
-    },
+    }
 
-    render: function() {
+    render() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Spinner = sdk.getComponent("elements.Spinner");
 
@@ -1366,5 +1353,5 @@ export default createReactClass({
             console.error("Invalid state for GroupView");
             return <div />;
         }
-    },
+    }
-});
+}

src/components/structures/InteractiveAuth.js

@@ -17,7 +17,6 @@ limitations under the License.
 
 import {InteractiveAuth} from "matrix-js-sdk";
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
 import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryComponents';
@@ -26,10 +25,8 @@ import * as sdk from '../../index';
 
 export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
 
-export default createReactClass({
+export default class InteractiveAuthComponent extends React.Component {
-    displayName: 'InteractiveAuth',
+    static propTypes = {
-
-    propTypes: {
         // matrix client to use for UI auth requests
         matrixClient: PropTypes.object.isRequired,
 
@@ -86,20 +83,19 @@ export default createReactClass({
         // continueText and continueKind are passed straight through to the AuthEntryComponent.
         continueText: PropTypes.string,
         continueKind: PropTypes.string,
-    },
+    };
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this.state = {
             authStage: null,
             busy: false,
             errorText: null,
             stageErrorText: null,
             submitButtonEnabled: false,
         };
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
         this._authLogic = new InteractiveAuth({
             authData: this.props.authData,
@@ -114,6 +110,18 @@ export default createReactClass({
             requestEmailToken: this._requestEmailToken,
         });
 
+        this._intervalId = null;
+        if (this.props.poll) {
+            this._intervalId = setInterval(() => {
+                this._authLogic.poll();
+            }, 2000);
+        }
+
+        this._stageComponent = createRef();
+    }
+
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         this._authLogic.attemptAuth().then((result) => {
             const extra = {
                 emailSid: this._authLogic.getEmailSid(),
@@ -132,26 +140,17 @@ export default createReactClass({
                 errorText: msg,
             });
         });
-
-        this._intervalId = null;
-        if (this.props.poll) {
-            this._intervalId = setInterval(() => {
-                this._authLogic.poll();
-            }, 2000);
     }
 
-        this._stageComponent = createRef();
+    componentWillUnmount() {
-    },
-
-    componentWillUnmount: function() {
         this._unmounted = true;
 
         if (this._intervalId !== null) {
             clearInterval(this._intervalId);
         }
-    },
+    }
 
-    _requestEmailToken: async function(...args) {
+    _requestEmailToken = async (...args) => {
         this.setState({
             busy: true,
         });
@@ -162,15 +161,15 @@ export default createReactClass({
                 busy: false,
             });
         }
-    },
+    };
 
-    tryContinue: function() {
+    tryContinue = () => {
         if (this._stageComponent.current && this._stageComponent.current.tryContinue) {
             this._stageComponent.current.tryContinue();
         }
-    },
+    };
 
-    _authStateUpdated: function(stageType, stageState) {
+    _authStateUpdated = (stageType, stageState) => {
         const oldStage = this.state.authStage;
         this.setState({
             busy: false,
@@ -180,16 +179,16 @@ export default createReactClass({
         }, () => {
             if (oldStage != stageType) this._setFocus();
         });
-    },
+    };
 
-    _requestCallback: function(auth) {
+    _requestCallback = (auth) => {
         // This wrapper just exists because the js-sdk passes a second
         // 'busy' param for backwards compat. This throws the tests off
         // so discard it here.
         return this.props.makeRequest(auth);
-    },
+    };
 
-    _onBusyChanged: function(busy) {
+    _onBusyChanged = (busy) => {
         // if we've started doing stuff, reset the error messages
         if (busy) {
             this.setState({
@@ -204,29 +203,29 @@ export default createReactClass({
         // there's a new screen to show the user. This is implemented by setting
         // `busy: false` in `_authStateUpdated`.
         // See also https://github.com/vector-im/element-web/issues/12546
-    },
+    };
 
-    _setFocus: function() {
+    _setFocus() {
         if (this._stageComponent.current && this._stageComponent.current.focus) {
             this._stageComponent.current.focus();
         }
-    },
+    }
 
-    _submitAuthDict: function(authData) {
+    _submitAuthDict = authData => {
         this._authLogic.submitAuthDict(authData);
-    },
+    };
 
-    _onPhaseChange: function(newPhase) {
+    _onPhaseChange = newPhase => {
         if (this.props.onStagePhaseChange) {
             this.props.onStagePhaseChange(this.state.authStage, newPhase || 0);
         }
-    },
+    };
 
-    _onStageCancel: function() {
+    _onStageCancel = () => {
         this.props.onAuthFinished(false, ERROR_USER_CANCELLED);
-    },
+    };
 
-    _renderCurrentStage: function() {
+    _renderCurrentStage() {
         const stage = this.state.authStage;
         if (!stage) {
             if (this.state.busy) {
@@ -260,16 +259,17 @@ export default createReactClass({
                 onCancel={this._onStageCancel}
             />
         );
-    },
+    }
 
-    _onAuthStageFailed: function(e) {
+    _onAuthStageFailed = e => {
         this.props.onAuthFinished(false, e);
-    },
+    };
-    _setEmailSid: function(sid) {
-        this._authLogic.setEmailSid(sid);
-    },
 
-    render: function() {
+    _setEmailSid = sid => {
+        this._authLogic.setEmailSid(sid);
+    };
+
+    render() {
         let error = null;
         if (this.state.errorText) {
             error = (
@@ -287,5 +287,5 @@ export default createReactClass({
                 </div>
             </div>
         );
-    },
+    }
-});
+}

src/components/structures/MyGroups.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../index';
 import { _t } from '../../languageHandler';
 import SdkConfig from '../../SdkConfig';
@@ -26,29 +25,23 @@ import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 
-export default createReactClass({
+export default class MyGroups extends React.Component {
-    displayName: 'MyGroups',
+    static contextType = MatrixClientContext;
 
-    getInitialState: function() {
+    state = {
-        return {
         groups: null,
         error: null,
     };
-    },
 
-    statics: {
+    componentDidMount() {
-        contextType: MatrixClientContext,
-    },
-
-    componentDidMount: function() {
         this._fetch();
-    },
+    }
 
-    _onCreateGroupClick: function() {
+    _onCreateGroupClick = () => {
         dis.dispatch({action: 'view_create_group'});
-    },
+    };
 
-    _fetch: function() {
+    _fetch() {
         this.context.getJoinedGroups().then((result) => {
             this.setState({groups: result.groups, error: null});
         }, (err) => {
@@ -59,9 +52,9 @@ export default createReactClass({
             }
             this.setState({groups: null, error: err});
         });
-    },
+    }
 
-    render: function() {
+    render() {
         const brand = SdkConfig.get().brand;
         const Loader = sdk.getComponent("elements.Spinner");
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
@@ -149,5 +142,5 @@ export default createReactClass({
                 { content }
             </div>
         </div>;
-    },
+    }
-});
+}

src/components/structures/NotificationPanel.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
@@ -25,13 +24,8 @@ import * as sdk from "../../index";
 /*
  * Component which shows the global notification list using a TimelinePanel
  */
-const NotificationPanel = createReactClass({
+class NotificationPanel extends React.Component {
-    displayName: 'NotificationPanel',
+    render() {
-
-    propTypes: {
-    },
-
-    render: function() {
         // wrap a TimelinePanel with the jump-to-event bits turned off.
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
         const Loader = sdk.getComponent("elements.Spinner");
@@ -45,7 +39,7 @@ const NotificationPanel = createReactClass({
         if (timelineSet) {
             return (
                 <div className="mx_NotificationPanel" role="tabpanel">
-                    <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
+                    <TimelinePanel
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={timelineSet}
@@ -63,7 +57,7 @@ const NotificationPanel = createReactClass({
                 </div>
             );
         }
-    },
+    }
-});
+}
 
 export default NotificationPanel;

src/components/structures/RightPanel.js

@@ -21,6 +21,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {Room} from "matrix-js-sdk/src/models/room";
+
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import RateLimitedFunc from '../../ratelimitedfunc';
@@ -34,7 +36,7 @@ import {Action} from "../../dispatcher/actions";
 export default class RightPanel extends React.Component {
     static get propTypes() {
         return {
-            roomId: PropTypes.string, // if showing panels for a given room, this is set
+            room: PropTypes.instanceOf(Room), // if showing panels for a given room, this is set
             groupId: PropTypes.string, // if showing panels for a given group, this is set
             user: PropTypes.object, // used if we know the user ahead of opening the panel
         };
@@ -42,8 +44,8 @@ export default class RightPanel extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
         this.state = {
             phase: this._getPhaseFromProps(),
             isUserPrivilegedInGroup: null,
@@ -161,13 +163,13 @@ export default class RightPanel extends React.Component {
     }
 
     onRoomStateMember(ev, state, member) {
-        if (member.roomId !== this.props.roomId) {
+        if (member.roomId !== this.props.room.roomId) {
             return;
         }
         // redraw the badge on the membership list
-        if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.roomId) {
+        if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.room.roomId) {
             this._delayedUpdate();
-        } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.roomId &&
+        } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId &&
                 member.userId === this.state.member.userId) {
             // refresh the member info (e.g. new power level)
             this._delayedUpdate();
@@ -226,8 +228,8 @@ export default class RightPanel extends React.Component {
 
         switch (this.state.phase) {
             case RightPanelPhases.RoomMemberList:
-                if (this.props.roomId) {
+                if (this.props.room.roomId) {
-                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+                    panel = <MemberList roomId={this.props.room.roomId} key={this.props.room.roomId} />;
                 }
                 break;
             case RightPanelPhases.GroupMemberList:
@@ -242,8 +244,8 @@ export default class RightPanel extends React.Component {
             case RightPanelPhases.EncryptionPanel:
                 panel = <UserInfo
                     user={this.state.member}
-                    roomId={this.props.roomId}
+                    roomId={this.props.room.roomId}
-                    key={this.props.roomId || this.state.member.userId}
+                    key={this.props.room.roomId || this.state.member.userId}
                     onClose={this.onCloseUserInfo}
                     phase={this.state.phase}
                     verificationRequest={this.state.verificationRequest}
@@ -251,7 +253,7 @@ export default class RightPanel extends React.Component {
                 />;
                 break;
             case RightPanelPhases.Room3pidMemberInfo:
-                panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
+                panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.room.roomId} />;
                 break;
             case RightPanelPhases.GroupMemberInfo:
                 panel = <UserInfo
@@ -270,7 +272,7 @@ export default class RightPanel extends React.Component {
                 panel = <NotificationPanel />;
                 break;
             case RightPanelPhases.FilePanel:
-                panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
+                panel = <FilePanel roomId={this.props.room.roomId} resizeNotifier={this.props.resizeNotifier} />;
                 break;
         }
 

src/components/structures/RoomDirectory.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
 import dis from "../../dispatcher/dispatcher";
@@ -42,16 +41,16 @@ function track(action) {
     Analytics.trackEvent('RoomDirectory', action);
 }
 
-export default createReactClass({
+export default class RoomDirectory extends React.Component {
-    displayName: 'RoomDirectory',
+    static propTypes = {
-
-    propTypes: {
         onFinished: PropTypes.func.isRequired,
-    },
+    };
+
+    constructor(props) {
+        super(props);
 
-    getInitialState: function() {
         const selectedCommunityId = TagOrderStore.getSelectedTags()[0];
-        return {
+        this.state = {
             publicRooms: [],
             loading: true,
             protocolsLoading: true,
@@ -64,10 +63,7 @@ export default createReactClass({
                 : null,
             communityName: null,
         };
-    },
 
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
         this.nextBatch = null;
         this.filterTimeout = null;
@@ -115,16 +111,16 @@ export default createReactClass({
         }
 
         this.refreshRoomList();
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         if (this.filterTimeout) {
             clearTimeout(this.filterTimeout);
         }
         this._unmounted = true;
-    },
+    }
 
-    refreshRoomList: function() {
+    refreshRoomList = () => {
         if (this.state.selectedCommunityId) {
             this.setState({
                 publicRooms: GroupStore.getGroupRooms(this.state.selectedCommunityId).map(r => {
@@ -158,9 +154,9 @@ export default createReactClass({
             loading: true,
         });
         this.getMoreRooms();
-    },
+    };
 
-    getMoreRooms: function() {
+    getMoreRooms() {
         if (this.state.selectedCommunityId) return Promise.resolve(); // no more rooms
         if (!MatrixClientPeg.get()) return Promise.resolve();
 
@@ -233,7 +229,7 @@ export default createReactClass({
                 ),
             });
         });
-    },
+    }
 
     /**
      * A limited interface for removing rooms from the directory.
@@ -242,7 +238,7 @@ export default createReactClass({
      * HS admins to do this through the RoomSettings interface, but
      * this needs SPEC-417.
      */
-    removeFromDirectory: function(room) {
+    removeFromDirectory(room) {
         const alias = get_display_alias_for_room(room);
         const name = room.name || alias || _t('Unnamed room');
 
@@ -284,18 +280,18 @@ export default createReactClass({
                 });
             },
         });
-    },
+    }
 
-    onRoomClicked: function(room, ev) {
+    onRoomClicked = (room, ev) => {
         if (ev.shiftKey && !this.state.selectedCommunityId) {
             ev.preventDefault();
             this.removeFromDirectory(room);
         } else {
             this.showRoom(room);
         }
-    },
+    };
 
-    onOptionChange: function(server, instanceId) {
+    onOptionChange = (server, instanceId) => {
         // clear next batch so we don't try to load more rooms
         this.nextBatch = null;
         this.setState({
@@ -313,15 +309,15 @@ export default createReactClass({
         // find the five gitter ones, at which point we do not want
         // to render all those rooms when switching back to 'all networks'.
         // Easiest to just blow away the state & re-fetch.
-    },
+    };
 
-    onFillRequest: function(backwards) {
+    onFillRequest = (backwards) => {
         if (backwards || !this.nextBatch) return Promise.resolve(false);
 
         return this.getMoreRooms();
-    },
+    };
 
-    onFilterChange: function(alias) {
+    onFilterChange = (alias) => {
         this.setState({
             filterString: alias || null,
         });
@@ -337,9 +333,9 @@ export default createReactClass({
             this.filterTimeout = null;
             this.refreshRoomList();
         }, 700);
-    },
+    };
 
-    onFilterClear: function() {
+    onFilterClear = () => {
         // update immediately
         this.setState({
             filterString: null,
@@ -348,9 +344,9 @@ export default createReactClass({
         if (this.filterTimeout) {
             clearTimeout(this.filterTimeout);
         }
-    },
+    };
 
-    onJoinFromSearchClick: function(alias) {
+    onJoinFromSearchClick = (alias) => {
         // If we don't have a particular instance id selected, just show that rooms alias
         if (!this.state.instanceId || this.state.instanceId === ALL_ROOMS) {
             // If the user specified an alias without a domain, add on whichever server is selected
@@ -391,9 +387,9 @@ export default createReactClass({
                 });
             });
         }
-    },
+    };
 
-    onPreviewClick: function(ev, room) {
+    onPreviewClick = (ev, room) => {
         this.props.onFinished();
         dis.dispatch({
             action: 'view_room',
@@ -401,9 +397,9 @@ export default createReactClass({
             should_peek: true,
         });
         ev.stopPropagation();
-    },
+    };
 
-    onViewClick: function(ev, room) {
+    onViewClick = (ev, room) => {
         this.props.onFinished();
         dis.dispatch({
             action: 'view_room',
@@ -411,26 +407,26 @@ export default createReactClass({
             should_peek: false,
         });
         ev.stopPropagation();
-    },
+    };
 
-    onJoinClick: function(ev, room) {
+    onJoinClick = (ev, room) => {
         this.showRoom(room, null, true);
         ev.stopPropagation();
-    },
+    };
 
-    onCreateRoomClick: function(room) {
+    onCreateRoomClick = room => {
         this.props.onFinished();
         dis.dispatch({
             action: 'view_create_room',
             public: true,
         });
-    },
+    };
 
-    showRoomAlias: function(alias, autoJoin=false) {
+    showRoomAlias(alias, autoJoin=false) {
         this.showRoom(null, alias, autoJoin);
-    },
+    }
 
-    showRoom: function(room, room_alias, autoJoin=false) {
+    showRoom(room, room_alias, autoJoin=false) {
         this.props.onFinished();
         const payload = {
             action: 'view_room',
@@ -474,7 +470,7 @@ export default createReactClass({
             payload.room_id = room.room_id;
         }
         dis.dispatch(payload);
-    },
+    }
 
     getRow(room) {
         const client = MatrixClientPeg.get();
@@ -540,22 +536,22 @@ export default createReactClass({
                 <td className="mx_RoomDirectory_join">{joinOrViewButton}</td>
             </tr>
         );
-    },
+    }
 
-    collectScrollPanel: function(element) {
+    collectScrollPanel = (element) => {
         this.scrollPanel = element;
-    },
+    };
 
-    _stringLooksLikeId: function(s, field_type) {
+    _stringLooksLikeId(s, field_type) {
         let pat = /^#[^\s]+:[^\s]/;
         if (field_type && field_type.regexp) {
             pat = new RegExp(field_type.regexp);
         }
 
         return pat.test(s);
-    },
+    }
 
-    _getFieldsForThirdPartyLocation: function(userInput, protocol, instance) {
+    _getFieldsForThirdPartyLocation(userInput, protocol, instance) {
         // make an object with the fields specified by that protocol. We
         // require that the values of all but the last field come from the
         // instance. The last is the user input.
@@ -569,20 +565,20 @@ export default createReactClass({
         }
         fields[requiredFields[requiredFields.length - 1]] = userInput;
         return fields;
-    },
+    }
 
     /**
      * called by the parent component when PageUp/Down/etc is pressed.
      *
      * We pass it down to the scroll panel.
      */
-    handleScrollKey: function(ev) {
+    handleScrollKey = ev => {
         if (this.scrollPanel) {
             this.scrollPanel.handleScrollKey(ev);
         }
-    },
+    };
 
-    render: function() {
+    render() {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -712,8 +708,8 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}
 
 // Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
 // but works with the objects we get from the public room list

src/components/structures/RoomStatusBar.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import Matrix from 'matrix-js-sdk';
 import { _t, _td } from '../../languageHandler';
@@ -39,10 +38,8 @@ function getUnsentMessages(room) {
     });
 }
 
-export default createReactClass({
+export default class RoomStatusBar extends React.Component {
-    displayName: 'RoomStatusBar',
+    static propTypes = {
-
-    propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
         // This is true when the user is alone in the room, but has also sent a message.
@@ -86,37 +83,35 @@ export default createReactClass({
         // callback for when the status bar is displaying something and should
         // be visible
         onVisible: PropTypes.func,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         syncState: MatrixClientPeg.get().getSyncState(),
         syncStateData: MatrixClientPeg.get().getSyncStateData(),
         unsentMessages: getUnsentMessages(this.props.room),
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
 
         this._checkSize();
-    },
+    }
 
-    componentDidUpdate: function() {
+    componentDidUpdate() {
         this._checkSize();
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
             client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
         }
-    },
+    }
 
-    onSyncStateChange: function(state, prevState, data) {
+    onSyncStateChange = (state, prevState, data) => {
         if (state === "SYNCING" && prevState === "SYNCING") {
             return;
         }
@@ -124,39 +119,39 @@ export default createReactClass({
             syncState: state,
             syncStateData: data,
         });
-    },
+    };
 
-    _onResendAllClick: function() {
+    _onResendAllClick = () => {
         Resend.resendUnsentEvents(this.props.room);
         dis.fire(Action.FocusComposer);
-    },
+    };
 
-    _onCancelAllClick: function() {
+    _onCancelAllClick = () => {
         Resend.cancelUnsentEvents(this.props.room);
         dis.fire(Action.FocusComposer);
-    },
+    };
 
-    _onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {
+    _onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => {
         if (room.roomId !== this.props.room.roomId) return;
 
         this.setState({
             unsentMessages: getUnsentMessages(this.props.room),
         });
-    },
+    };
 
     // Check whether current size is greater than 0, if yes call props.onVisible
-    _checkSize: function() {
+    _checkSize() {
         if (this._getSize()) {
             if (this.props.onVisible) this.props.onVisible();
         } else {
             if (this.props.onHidden) this.props.onHidden();
         }
-    },
+    }
 
     // We don't need the actual height - just whether it is likely to have
     // changed - so we use '0' to indicate normal size, and other values to
     // indicate other sizes.
-    _getSize: function() {
+    _getSize() {
         if (this._shouldShowConnectionError() ||
             this.props.hasActiveCall ||
             this.props.sentMessageAndIsAlone
@@ -166,10 +161,10 @@ export default createReactClass({
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
-    },
+    }
 
     // return suitable content for the image on the left of the status bar.
-    _getIndicator: function() {
+    _getIndicator() {
         if (this.props.hasActiveCall) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
@@ -182,9 +177,9 @@ export default createReactClass({
         }
 
         return null;
-    },
+    }
 
-    _shouldShowConnectionError: function() {
+    _shouldShowConnectionError() {
         // no conn bar trumps the "some not sent" msg since you can't resend without
         // a connection!
         // There's one situation in which we don't show this 'no connection' bar, and that's
@@ -195,9 +190,9 @@ export default createReactClass({
             this.state.syncStateData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED',
         );
         return this.state.syncState === "ERROR" && !errorIsMauError;
-    },
+    }
 
-    _getUnsentMessageContent: function() {
+    _getUnsentMessageContent() {
         const unsentMessages = this.state.unsentMessages;
         if (!unsentMessages.length) return null;
 
@@ -272,10 +267,10 @@ export default createReactClass({
                 </div>
             </div>
         </div>;
-    },
+    }
 
     // return suitable content for the main (text) part of the status bar.
-    _getContent: function() {
+    _getContent() {
         if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
@@ -323,9 +318,9 @@ export default createReactClass({
         }
 
         return null;
-    },
+    }
 
-    render: function() {
+    render() {
         const content = this._getContent();
         const indicator = this._getIndicator();
 
@@ -339,5 +334,5 @@ export default createReactClass({
                 </div>
             </div>
         );
-    },
+    }
-});
+}

src/components/structures/RoomView.js

@@ -24,7 +24,6 @@ limitations under the License.
 import shouldHideEvent from '../../shouldHideEvent';
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../languageHandler';
@@ -68,9 +67,8 @@ if (DEBUG) {
     debuglog = console.log.bind(console);
 }
 
-export default createReactClass({
+export default class RoomView extends React.Component {
-    displayName: 'RoomView',
+    static propTypes = {
-    propTypes: {
         ConferenceHandler: PropTypes.any,
 
         // Called with the credentials of a registered user (if they were a ROU that
@@ -97,15 +95,15 @@ export default createReactClass({
 
         // Servers the RoomView can use to try and assist joins
         viaServers: PropTypes.arrayOf(PropTypes.string),
-    },
+    };
 
-    statics: {
+    static contextType = MatrixClientContext;
-        contextType: MatrixClientContext,
+
-    },
+    constructor(props, context) {
+        super(props, context);
 
-    getInitialState: function() {
         const llMembers = this.context.hasLazyLoadMembersEnabled();
-        return {
+        this.state = {
             room: null,
             roomId: null,
             roomLoading: true,
@@ -171,10 +169,7 @@ export default createReactClass({
 
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
         };
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         this.context.on("Room", this.onRoom);
         this.context.on("Room.timeline", this.onRoomTimeline);
@@ -191,7 +186,6 @@ export default createReactClass({
         // Start listening for RoomViewStore updates
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
-        this._onRoomViewStoreUpdate(true);
 
         WidgetEchoStore.on('update', this._onWidgetEchoStoreUpdate);
         this._showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
@@ -201,15 +195,20 @@ export default createReactClass({
         this._searchResultsPanel = createRef();
 
         this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
-    },
+    }
 
-    _onReadReceiptsChange: function() {
+    // TODO: [REACT-WARNING] Move into constructor
+    UNSAFE_componentWillMount() {
+        this._onRoomViewStoreUpdate(true);
+    }
+
+    _onReadReceiptsChange = () => {
         this.setState({
             showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
         });
-    },
+    };
 
-    _onRoomViewStoreUpdate: function(initial) {
+    _onRoomViewStoreUpdate = initial => {
         if (this.unmounted) {
             return;
         }
@@ -303,7 +302,7 @@ export default createReactClass({
         if (initial) {
             this._setupRoom(newState.room, newState.roomId, newState.joining, newState.shouldPeek);
         }
-    },
+    };
 
     _getRoomId() {
         // According to `_onRoomViewStoreUpdate`, `state.roomId` can be null
@@ -312,9 +311,9 @@ export default createReactClass({
         // the bare room ID. (We may want to update `state.roomId` after
         // resolving aliases, so we could always trust it.)
         return this.state.room ? this.state.room.roomId : this.state.roomId;
-    },
+    }
 
-    _getPermalinkCreatorForRoom: function(room) {
+    _getPermalinkCreatorForRoom(room) {
         if (!this._permalinkCreators) this._permalinkCreators = {};
         if (this._permalinkCreators[room.roomId]) return this._permalinkCreators[room.roomId];
 
@@ -327,22 +326,22 @@ export default createReactClass({
             this._permalinkCreators[room.roomId].load();
         }
         return this._permalinkCreators[room.roomId];
-    },
+    }
 
-    _stopAllPermalinkCreators: function() {
+    _stopAllPermalinkCreators() {
         if (!this._permalinkCreators) return;
         for (const roomId of Object.keys(this._permalinkCreators)) {
             this._permalinkCreators[roomId].stop();
         }
-    },
+    }
 
-    _onWidgetEchoStoreUpdate: function() {
+    _onWidgetEchoStoreUpdate = () => {
         this.setState({
             showApps: this._shouldShowApps(this.state.room),
         });
-    },
+    };
 
-    _setupRoom: function(room, roomId, joining, shouldPeek) {
+    _setupRoom(room, roomId, joining, shouldPeek) {
         // if this is an unknown room then we're in one of three states:
         // - This is a room we can peek into (search engine) (we can /peek)
         // - This is a room we can publicly join or were invited to. (we can /join)
@@ -404,9 +403,9 @@ export default createReactClass({
                 this.setState({isPeeking: false});
             }
         }
-    },
+    }
 
-    _shouldShowApps: function(room) {
+    _shouldShowApps(room) {
         if (!BROWSER_SUPPORTS_SANDBOX) return false;
 
         // Check if user has previously chosen to hide the app drawer for this
@@ -417,9 +416,9 @@ export default createReactClass({
         // This is confusing, but it means to say that we default to the tray being
         // hidden unless the user clicked to open it.
         return hideWidgetDrawer === "false";
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         const call = this._getCallForRoom();
         const callState = call ? call.call_state : "ended";
         this.setState({
@@ -435,14 +434,14 @@ export default createReactClass({
         this.onResize();
 
         document.addEventListener("keydown", this.onNativeKeyDown);
-    },
+    }
 
-    shouldComponentUpdate: function(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState) {
         return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
                 !ObjectUtils.shallowEqual(this.state, nextState));
-    },
+    }
 
-    componentDidUpdate: function() {
+    componentDidUpdate() {
         if (this._roomView.current) {
             const roomView = this._roomView.current;
             if (!roomView.ondrop) {
@@ -464,9 +463,9 @@ export default createReactClass({
                 atEndOfLiveTimeline: this._messagePanel.isAtEndOfLiveTimeline(),
             });
         }
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         // set a boolean to say we've been unmounted, which any pending
         // promises can use to throw away their results.
         //
@@ -543,21 +542,21 @@ export default createReactClass({
         // Tinter.tint(); // reset colourscheme
 
         SettingsStore.unwatchSetting(this._layoutWatcherRef);
-    },
+    }
 
-    onLayoutChange: function() {
+    onLayoutChange = () => {
         this.setState({
             useIRCLayout: SettingsStore.getValue("useIRCLayout"),
         });
-    },
+    };
 
-    _onRightPanelStoreUpdate: function() {
+    _onRightPanelStoreUpdate = () => {
         this.setState({
             showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
         });
-    },
+    };
 
-    onPageUnload(event) {
+    onPageUnload = event => {
         if (ContentMessages.sharedInstance().getCurrentUploads().length > 0) {
             return event.returnValue =
                 _t("You seem to be uploading files, are you sure you want to quit?");
@@ -565,10 +564,10 @@ export default createReactClass({
             return event.returnValue =
                 _t("You seem to be in a call, are you sure you want to quit?");
         }
-    },
+    };
 
     // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
-    onNativeKeyDown: function(ev) {
+    onNativeKeyDown = ev => {
         let handled = false;
         const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
 
@@ -592,9 +591,9 @@ export default createReactClass({
             ev.stopPropagation();
             ev.preventDefault();
         }
-    },
+    };
 
-    onReactKeyDown: function(ev) {
+    onReactKeyDown = ev => {
         let handled = false;
 
         switch (ev.key) {
@@ -613,7 +612,7 @@ export default createReactClass({
                 break;
             case Key.U.toUpperCase():
                 if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
-                    dis.dispatch({ action: "upload_file" })
+                    dis.dispatch({ action: "upload_file" });
                     handled = true;
                 }
                 break;
@@ -623,9 +622,9 @@ export default createReactClass({
             ev.stopPropagation();
             ev.preventDefault();
         }
-    },
+    };
 
-    onAction: function(payload) {
+    onAction = payload => {
         switch (payload.action) {
             case 'message_send_failed':
             case 'message_sent':
@@ -709,9 +708,9 @@ export default createReactClass({
                 }
                 break;
         }
-    },
+    };
 
-    onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
+    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -747,51 +746,51 @@ export default createReactClass({
                 });
             }
         }
-    },
+    };
 
-    onRoomName: function(room) {
+    onRoomName = room => {
         if (this.state.room && room.roomId == this.state.room.roomId) {
             this.forceUpdate();
         }
-    },
+    };
 
-    onRoomRecoveryReminderDontAskAgain: function() {
+    onRoomRecoveryReminderDontAskAgain = () => {
         // Called when the option to not ask again is set:
         // force an update to hide the recovery reminder
         this.forceUpdate();
-    },
+    };
 
-    onKeyBackupStatus() {
+    onKeyBackupStatus = () => {
         // Key backup status changes affect whether the in-room recovery
         // reminder is displayed.
         this.forceUpdate();
-    },
+    };
 
-    canResetTimeline: function() {
+    canResetTimeline = () => {
         if (!this._messagePanel) {
             return true;
         }
         return this._messagePanel.canResetTimeline();
-    },
+    };
 
     // called when state.room is first initialised (either at initial load,
     // after a successful peek, or after we join the room).
-    _onRoomLoaded: function(room) {
+    _onRoomLoaded = room => {
         this._calculatePeekRules(room);
         this._updatePreviewUrlVisibility(room);
         this._loadMembersIfJoined(room);
         this._calculateRecommendedVersion(room);
         this._updateE2EStatus(room);
         this._updatePermissions(room);
-    },
+    };
 
-    _calculateRecommendedVersion: async function(room) {
+    async _calculateRecommendedVersion(room) {
         this.setState({
             upgradeRecommendation: await room.getRecommendedVersion(),
         });
-    },
+    }
 
-    _loadMembersIfJoined: async function(room) {
+    async _loadMembersIfJoined(room) {
         // lazy load members if enabled
         if (this.context.hasLazyLoadMembersEnabled()) {
             if (room && room.getMyMembership() === 'join') {
@@ -808,9 +807,9 @@ export default createReactClass({
                 }
             }
         }
-    },
+    }
 
-    _calculatePeekRules: function(room) {
+    _calculatePeekRules(room) {
         const guestAccessEvent = room.currentState.getStateEvents("m.room.guest_access", "");
         if (guestAccessEvent && guestAccessEvent.getContent().guest_access === "can_join") {
             this.setState({
@@ -824,17 +823,17 @@ export default createReactClass({
                 canPeek: true,
             });
         }
-    },
+    }
 
-    _updatePreviewUrlVisibility: function({roomId}) {
+    _updatePreviewUrlVisibility({roomId}) {
         // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
         const key = this.context.isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
         this.setState({
             showUrlPreview: SettingsStore.getValue(key, roomId),
         });
-    },
+    }
 
-    onRoom: function(room) {
+    onRoom = room => {
         if (!room || room.roomId !== this.state.roomId) {
             return;
         }
@@ -843,32 +842,32 @@ export default createReactClass({
         }, () => {
             this._onRoomLoaded(room);
         });
-    },
+    };
 
-    onDeviceVerificationChanged: function(userId, device) {
+    onDeviceVerificationChanged = (userId, device) => {
         const room = this.state.room;
         if (!room.currentState.getMember(userId)) {
             return;
         }
         this._updateE2EStatus(room);
-    },
+    };
 
-    onUserVerificationChanged: function(userId, _trustStatus) {
+    onUserVerificationChanged = (userId, _trustStatus) => {
         const room = this.state.room;
         if (!room || !room.currentState.getMember(userId)) {
             return;
         }
         this._updateE2EStatus(room);
-    },
+    };
 
-    onCrossSigningKeysChanged: function() {
+    onCrossSigningKeysChanged = () => {
         const room = this.state.room;
         if (room) {
             this._updateE2EStatus(room);
         }
-    },
+    };
 
-    _updateE2EStatus: async function(room) {
+    async _updateE2EStatus(room) {
         if (!this.context.isRoomEncrypted(room.roomId)) {
             return;
         }
@@ -886,26 +885,26 @@ export default createReactClass({
         this.setState({
             e2eStatus: await shieldStatusForRoom(this.context, room),
         });
-    },
+    }
 
-    updateTint: function() {
+    updateTint() {
         const room = this.state.room;
         if (!room) return;
 
         console.log("Tinter.tint from updateTint");
         const colorScheme = SettingsStore.getValue("roomColor", room.roomId);
         Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
-    },
+    }
 
-    onAccountData: function(event) {
+    onAccountData = event => {
         const type = event.getType();
         if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
             // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
             this._updatePreviewUrlVisibility(this.state.room);
         }
-    },
+    };
 
-    onRoomAccountData: function(event, room) {
+    onRoomAccountData = (event, room) => {
         if (room.roomId == this.state.roomId) {
             const type = event.getType();
             if (type === "org.matrix.room.color_scheme") {
@@ -918,18 +917,18 @@ export default createReactClass({
                 this._updatePreviewUrlVisibility(room);
             }
         }
-    },
+    };
 
-    onRoomStateEvents: function(ev, state) {
+    onRoomStateEvents = (ev, state) => {
         // ignore if we don't have a room yet
         if (!this.state.room || this.state.room.roomId !== state.roomId) {
             return;
         }
 
         this._updatePermissions(this.state.room);
-    },
+    };
 
-    onRoomStateMember: function(ev, state, member) {
+    onRoomStateMember = (ev, state, member) => {
         // ignore if we don't have a room yet
         if (!this.state.room) {
             return;
@@ -941,17 +940,17 @@ export default createReactClass({
         }
 
         this._updateRoomMembers(member);
-    },
+    };
 
-    onMyMembership: function(room, membership, oldMembership) {
+    onMyMembership = (room, membership, oldMembership) => {
         if (room.roomId === this.state.roomId) {
             this.forceUpdate();
             this._loadMembersIfJoined(room);
             this._updatePermissions(room);
         }
-    },
+    };
 
-    _updatePermissions: function(room) {
+    _updatePermissions(room) {
         if (room) {
             const me = this.context.getUserId();
             const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
@@ -959,11 +958,11 @@ export default createReactClass({
 
             this.setState({canReact, canReply});
         }
-    },
+    }
 
     // rate limited because a power level change will emit an event for every
     // member in the room.
-    _updateRoomMembers: rate_limited_func(function(dueToMember) {
+    _updateRoomMembers = rate_limited_func((dueToMember) => {
         // a member state changed in this room
         // refresh the conf call notification state
         this._updateConfCallNotification();
@@ -978,9 +977,9 @@ export default createReactClass({
         this._checkIfAlone(this.state.room, memberCountInfluence);
 
         this._updateE2EStatus(this.state.room);
-    }, 500),
+    }, 500);
 
-    _checkIfAlone: function(room, countInfluence) {
+    _checkIfAlone(room, countInfluence) {
         let warnedAboutLonelyRoom = false;
         if (localStorage) {
             warnedAboutLonelyRoom = localStorage.getItem('mx_user_alone_warned_' + this.state.room.roomId);
@@ -993,9 +992,9 @@ export default createReactClass({
         let joinedOrInvitedMemberCount = room.getJoinedMemberCount() + room.getInvitedMemberCount();
         if (countInfluence) joinedOrInvitedMemberCount += countInfluence;
         this.setState({isAlone: joinedOrInvitedMemberCount === 1});
-    },
+    }
 
-    _updateConfCallNotification: function() {
+    _updateConfCallNotification() {
         const room = this.state.room;
         if (!room || !this.props.ConferenceHandler) {
             return;
@@ -1017,7 +1016,7 @@ export default createReactClass({
                 confMember.membership === "join"
             ),
         });
-    },
+    }
 
     _updateDMState() {
         const room = this.state.room;
@@ -1028,9 +1027,9 @@ export default createReactClass({
         if (dmInviter) {
             Rooms.setDMRoom(room.roomId, dmInviter);
         }
-    },
+    }
 
-    onSearchResultsFillRequest: function(backwards) {
+    onSearchResultsFillRequest = backwards => {
         if (!backwards) {
             return Promise.resolve(false);
         }
@@ -1043,25 +1042,25 @@ export default createReactClass({
             debuglog("no more search results");
             return Promise.resolve(false);
         }
-    },
+    };
 
-    onInviteButtonClick: function() {
+    onInviteButtonClick = () => {
         // call AddressPickerDialog
         dis.dispatch({
             action: 'view_invite',
             roomId: this.state.room.roomId,
         });
         this.setState({isAlone: false}); // there's a good chance they'll invite someone
-    },
+    };
 
-    onStopAloneWarningClick: function() {
+    onStopAloneWarningClick = () => {
         if (localStorage) {
             localStorage.setItem('mx_user_alone_warned_' + this.state.room.roomId, true);
         }
         this.setState({isAlone: false});
-    },
+    };
 
-    onJoinButtonClicked: function(ev) {
+    onJoinButtonClicked = ev => {
         // If the user is a ROU, allow them to transition to a PWLU
         if (this.context && this.context.isGuest()) {
             // Join this room once the user has registered and logged in
@@ -1120,10 +1119,9 @@ export default createReactClass({
                 return Promise.resolve();
             });
         }
+    };
 
-    },
+    onMessageListScroll = ev => {
-
-    onMessageListScroll: function(ev) {
         if (this._messagePanel.isAtEndOfLiveTimeline()) {
             this.setState({
                 numUnreadMessages: 0,
@@ -1135,9 +1133,9 @@ export default createReactClass({
             });
         }
         this._updateTopUnreadMessagesBar();
-    },
+    };
 
-    onDragOver: function(ev) {
+    onDragOver = ev => {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -1154,9 +1152,9 @@ export default createReactClass({
                 ev.dataTransfer.dropEffect = 'copy';
             }
         }
-    },
+    };
 
-    onDrop: function(ev) {
+    onDrop = ev => {
         ev.stopPropagation();
         ev.preventDefault();
         ContentMessages.sharedInstance().sendContentListToRoom(
@@ -1164,15 +1162,15 @@ export default createReactClass({
         );
         this.setState({ draggingFile: false });
         dis.fire(Action.FocusComposer);
-    },
+    };
 
-    onDragLeaveOrEnd: function(ev) {
+    onDragLeaveOrEnd = ev => {
         ev.stopPropagation();
         ev.preventDefault();
         this.setState({ draggingFile: false });
-    },
+    };
 
-    injectSticker: function(url, info, text) {
+    injectSticker(url, info, text) {
         if (this.context.isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;
@@ -1185,9 +1183,9 @@ export default createReactClass({
                     return;
                 }
             });
-    },
+    }
 
-    onSearch: function(term, scope) {
+    onSearch = (term, scope) => {
         this.setState({
             searchTerm: term,
             searchScope: scope,
@@ -1213,9 +1211,9 @@ export default createReactClass({
         debuglog("sending search request");
         const searchPromise = eventSearch(term, roomId);
         this._handleSearchResult(searchPromise);
-    },
+    };
 
-    _handleSearchResult: function(searchPromise) {
+    _handleSearchResult(searchPromise) {
         const self = this;
 
         // keep a record of the current search id, so that if the search terms
@@ -1266,9 +1264,9 @@ export default createReactClass({
                 searchInProgress: false,
             });
         });
-    },
+    }
 
-    getSearchResultTiles: function() {
+    getSearchResultTiles() {
         const SearchResultTile = sdk.getComponent('rooms.SearchResultTile');
         const Spinner = sdk.getComponent("elements.Spinner");
 
@@ -1348,20 +1346,20 @@ export default createReactClass({
                      onHeightChanged={onHeightChanged} />);
         }
         return ret;
-    },
+    }
 
-    onPinnedClick: function() {
+    onPinnedClick = () => {
         const nowShowingPinned = !this.state.showingPinned;
         const roomId = this.state.room.roomId;
         this.setState({showingPinned: nowShowingPinned, searching: false});
         SettingsStore.setValue("PinnedEvents.isOpen", roomId, SettingLevel.ROOM_DEVICE, nowShowingPinned);
-    },
+    };
 
-    onSettingsClick: function() {
+    onSettingsClick = () => {
         dis.dispatch({ action: 'open_room_settings' });
-    },
+    };
 
-    onCancelClick: function() {
+    onCancelClick = () => {
         console.log("updateTint from onCancelClick");
         this.updateTint();
         if (this.state.forwardingEvent) {
@@ -1371,23 +1369,23 @@ export default createReactClass({
             });
         }
         dis.fire(Action.FocusComposer);
-    },
+    };
 
-    onLeaveClick: function() {
+    onLeaveClick = () => {
         dis.dispatch({
             action: 'leave_room',
             room_id: this.state.room.roomId,
         });
-    },
+    };
 
-    onForgetClick: function() {
+    onForgetClick = () => {
         dis.dispatch({
             action: 'forget_room',
             room_id: this.state.room.roomId,
         });
-    },
+    };
 
-    onRejectButtonClicked: function(ev) {
+    onRejectButtonClicked = ev => {
         const self = this;
         this.setState({
             rejecting: true,
@@ -1412,9 +1410,9 @@ export default createReactClass({
                 rejectError: error,
             });
         });
-    },
+    };
 
-    onRejectAndIgnoreClick: async function() {
+    onRejectAndIgnoreClick = async () => {
         this.setState({
             rejecting: true,
         });
@@ -1446,49 +1444,49 @@ export default createReactClass({
                 rejectError: error,
             });
         }
-    },
+    };
 
-    onRejectThreepidInviteButtonClicked: function(ev) {
+    onRejectThreepidInviteButtonClicked = ev => {
         // We can reject 3pid invites in the same way that we accept them,
         // using /leave rather than /join. In the short term though, we
         // just ignore them.
         // https://github.com/vector-im/vector-web/issues/1134
         dis.fire(Action.ViewRoomDirectory);
-    },
+    };
 
-    onSearchClick: function() {
+    onSearchClick = () => {
         this.setState({
             searching: !this.state.searching,
             showingPinned: false,
         });
-    },
+    };
 
-    onCancelSearchClick: function() {
+    onCancelSearchClick = () => {
         this.setState({
             searching: false,
             searchResults: null,
         });
-    },
+    };
 
     // jump down to the bottom of this room, where new events are arriving
-    jumpToLiveTimeline: function() {
+    jumpToLiveTimeline = () => {
         this._messagePanel.jumpToLiveTimeline();
         dis.fire(Action.FocusComposer);
-    },
+    };
 
     // jump up to wherever our read marker is
-    jumpToReadMarker: function() {
+    jumpToReadMarker = () => {
         this._messagePanel.jumpToReadMarker();
-    },
+    };
 
     // update the read marker to match the read-receipt
-    forgetReadMarker: function(ev) {
+    forgetReadMarker = ev => {
         ev.stopPropagation();
         this._messagePanel.forgetReadMarker();
-    },
+    };
 
     // decide whether or not the top 'unread messages' bar should be shown
-    _updateTopUnreadMessagesBar: function() {
+    _updateTopUnreadMessagesBar = () => {
         if (!this._messagePanel) {
             return;
         }
@@ -1497,12 +1495,12 @@ export default createReactClass({
         if (this.state.showTopUnreadMessagesBar != showBar) {
             this.setState({showTopUnreadMessagesBar: showBar});
         }
-    },
+    };
 
     // get the current scroll position of the room, so that it can be
     // restored when we switch back to it.
     //
-    _getScrollState: function() {
+    _getScrollState() {
         const messagePanel = this._messagePanel;
         if (!messagePanel) return null;
 
@@ -1537,9 +1535,9 @@ export default createReactClass({
             focussedEvent: scrollState.trackedScrollToken,
             pixelOffset: scrollState.pixelOffset,
         };
-    },
+    }
 
-    onResize: function() {
+    onResize = () => {
         // It seems flexbox doesn't give us a way to constrain the auxPanel height to have
         // a minimum of the height of the video element, whilst also capping it from pushing out the page
         // so we have to do it via JS instead.  In this implementation we cap the height by putting
@@ -1557,16 +1555,16 @@ export default createReactClass({
         if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
 
         this.setState({auxPanelMaxHeight: auxPanelMaxHeight});
-    },
+    };
 
-    onFullscreenClick: function() {
+    onFullscreenClick = () => {
         dis.dispatch({
             action: 'video_fullscreen',
             fullscreen: true,
         }, true);
-    },
+    };
 
-    onMuteAudioClick: function() {
+    onMuteAudioClick = () => {
         const call = this._getCallForRoom();
         if (!call) {
             return;
@@ -1574,9 +1572,9 @@ export default createReactClass({
         const newState = !call.isMicrophoneMuted();
         call.setMicrophoneMuted(newState);
         this.forceUpdate(); // TODO: just update the voip buttons
-    },
+    };
 
-    onMuteVideoClick: function() {
+    onMuteVideoClick = () => {
         const call = this._getCallForRoom();
         if (!call) {
             return;
@@ -1584,29 +1582,29 @@ export default createReactClass({
         const newState = !call.isLocalVideoMuted();
         call.setLocalVideoMuted(newState);
         this.forceUpdate(); // TODO: just update the voip buttons
-    },
+    };
 
-    onStatusBarVisible: function() {
+    onStatusBarVisible = () => {
         if (this.unmounted) return;
         this.setState({
             statusBarVisible: true,
         });
-    },
+    };
 
-    onStatusBarHidden: function() {
+    onStatusBarHidden = () => {
         // This is currently not desired as it is annoying if it keeps expanding and collapsing
         if (this.unmounted) return;
         this.setState({
             statusBarVisible: false,
         });
-    },
+    };
 
     /**
      * called by the parent component when PageUp/Down/etc is pressed.
      *
      * We pass it down to the scroll panel.
      */
-    handleScrollKey: function(ev) {
+    handleScrollKey = ev => {
         let panel;
         if (this._searchResultsPanel.current) {
             panel = this._searchResultsPanel.current;
@@ -1617,48 +1615,48 @@ export default createReactClass({
         if (panel) {
             panel.handleScrollKey(ev);
         }
-    },
+    };
 
     /**
      * get any current call for this room
      */
-    _getCallForRoom: function() {
+    _getCallForRoom() {
         if (!this.state.room) {
             return null;
         }
         return CallHandler.getCallForRoom(this.state.room.roomId);
-    },
+    }
 
     // this has to be a proper method rather than an unnamed function,
     // otherwise react calls it with null on each update.
-    _gatherTimelinePanelRef: function(r) {
+    _gatherTimelinePanelRef = r => {
         this._messagePanel = r;
         if (r) {
             console.log("updateTint from RoomView._gatherTimelinePanelRef");
             this.updateTint();
         }
-    },
+    };
 
-    _getOldRoom: function() {
+    _getOldRoom() {
         const createEvent = this.state.room.currentState.getStateEvents("m.room.create", "");
         if (!createEvent || !createEvent.getContent()['predecessor']) return null;
 
         return this.context.getRoom(createEvent.getContent()['predecessor']['room_id']);
-    },
+    }
 
-    _getHiddenHighlightCount: function() {
+    _getHiddenHighlightCount() {
         const oldRoom = this._getOldRoom();
         if (!oldRoom) return 0;
         return oldRoom.getUnreadNotificationCount('highlight');
-    },
+    }
 
-    _onHiddenHighlightsClick: function() {
+    _onHiddenHighlightsClick = () => {
         const oldRoom = this._getOldRoom();
         if (!oldRoom) return;
         dis.dispatch({action: "view_room", room_id: oldRoom.roomId});
-    },
+    };
 
-    render: function() {
+    render() {
         const RoomHeader = sdk.getComponent('rooms.RoomHeader');
         const ForwardMessage = sdk.getComponent("rooms.ForwardMessage");
         const AuxPanel = sdk.getComponent("rooms.AuxPanel");
@@ -2068,7 +2066,7 @@ export default createReactClass({
 
         const showRightPanel = !forceHideRightPanel && this.state.room && this.state.showRightPanel;
         const rightPanel = showRightPanel
-            ? <RightPanel roomId={this.state.room.roomId} resizeNotifier={this.props.resizeNotifier} />
+            ? <RightPanel room={this.state.room} resizeNotifier={this.props.resizeNotifier} />
             : null;
 
         const timelineClasses = classNames("mx_RoomView_timeline", {
@@ -2119,5 +2117,5 @@ export default createReactClass({
                 </main>
             </RoomContext.Provider>
         );
-    },
+    }
-});
+}

src/components/structures/ScrollPanel.js

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React, {createRef} from "react";
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
@@ -84,10 +83,8 @@ if (DEBUG_SCROLL) {
  * offset as normal.
  */
 
-export default createReactClass({
+export default class ScrollPanel extends React.Component {
-    displayName: 'ScrollPanel',
+    static propTypes = {
-
-    propTypes: {
         /* stickyBottom: if set to true, then once the user hits the bottom of
          * the list, any new children added to the list will cause the list to
          * scroll down to show the new element, rather than preserving the
@@ -97,7 +94,7 @@ export default createReactClass({
 
         /* startAtBottom: if set to true, the view is assumed to start
          * scrolled to the bottom.
-         * XXX: It's likley this is unecessary and can be derived from
+         * XXX: It's likely this is unnecessary and can be derived from
          * stickyBottom, but I'm adding an extra parameter to ensure
          * behaviour stays the same for other uses of ScrollPanel.
          * If so, let's remove this parameter down the line.
@@ -141,6 +138,7 @@ export default createReactClass({
         /* style: styles to add to the top-level div
          */
         style: PropTypes.object,
+
         /* resizeNotifier: ResizeNotifier to know when middle column has changed size
          */
         resizeNotifier: PropTypes.object,
@@ -149,20 +147,19 @@ export default createReactClass({
          * of the wrapper
          */
         fixedChildren: PropTypes.node,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         stickyBottom: true,
         startAtBottom: true,
         onFillRequest: function(backwards) { return Promise.resolve(false); },
         onUnfillRequest: function(backwards, scrollToken) {},
         onScroll: function() {},
     };
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    constructor(props) {
-    UNSAFE_componentWillMount: function() {
+        super(props);
+
         this._pendingFillRequests = {b: null, f: null};
 
         if (this.props.resizeNotifier) {
@@ -172,13 +169,13 @@ export default createReactClass({
         this.resetScrollState();
 
         this._itemlist = createRef();
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.checkScroll();
-    },
+    }
 
-    componentDidUpdate: function() {
+    componentDidUpdate() {
         // after adding event tiles, we may need to tweak the scroll (either to
         // keep at the bottom of the timeline, or to maintain the view after
         // adding events to the top).
@@ -186,9 +183,9 @@ export default createReactClass({
         // This will also re-check the fill state, in case the paginate was inadequate
         this.checkScroll();
         this.updatePreventShrinking();
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         // set a boolean to say we've been unmounted, which any pending
         // promises can use to throw away their results.
         //
@@ -198,9 +195,9 @@ export default createReactClass({
         if (this.props.resizeNotifier) {
             this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
         }
-    },
+    }
 
-    onScroll: function(ev) {
+    onScroll = ev => {
         if (this.props.resizeNotifier.isResizing) return; // skip scroll events caused by resizing
         debuglog("onScroll", this._getScrollNode().scrollTop);
         this._scrollTimeout.restart();
@@ -208,40 +205,40 @@ export default createReactClass({
         this.updatePreventShrinking();
         this.props.onScroll(ev);
         this.checkFillState();
-    },
+    };
 
-    onResize: function() {
+    onResize = () => {
         debuglog("onResize");
         this.checkScroll();
         // update preventShrinkingState if present
         if (this.preventShrinkingState) {
             this.preventShrinking();
         }
-    },
+    };
 
     // after an update to the contents of the panel, check that the scroll is
     // where it ought to be, and set off pagination requests if necessary.
-    checkScroll: function() {
+    checkScroll = () => {
         if (this.unmounted) {
             return;
         }
         this._restoreSavedScrollState();
         this.checkFillState();
-    },
+    };
 
     // return true if the content is fully scrolled down right now; else false.
     //
     // note that this is independent of the 'stuckAtBottom' state - it is simply
     // about whether the content is scrolled down right now, irrespective of
     // whether it will stay that way when the children update.
-    isAtBottom: function() {
+    isAtBottom = () => {
         const sn = this._getScrollNode();
         // fractional values (both too big and too small)
         // for scrollTop happen on certain browsers/platforms
         // when scrolled all the way down. E.g. Chrome 72 on debian.
         // so check difference <= 1;
         return Math.abs(sn.scrollHeight - (sn.scrollTop + sn.clientHeight)) <= 1;
-    },
+    };
 
     // returns the vertical height in the given direction that can be removed from
     // the content box (which has a height of scrollHeight, see checkFillState) without
@@ -274,7 +271,7 @@ export default createReactClass({
     //   |#########|   -                                   |
     //   |#########|                                       |
     //   `---------'                                       -
-    _getExcessHeight: function(backwards) {
+    _getExcessHeight(backwards) {
         const sn = this._getScrollNode();
         const contentHeight = this._getMessagesHeight();
         const listHeight = this._getListHeight();
@@ -286,10 +283,10 @@ export default createReactClass({
         } else {
             return contentHeight - (unclippedScrollTop + 2*sn.clientHeight) - UNPAGINATION_PADDING;
         }
-    },
+    }
 
     // check the scroll state and send out backfill requests if necessary.
-    checkFillState: async function(depth=0) {
+    checkFillState = async (depth=0) => {
         if (this.unmounted) {
             return;
         }
@@ -369,10 +366,10 @@ export default createReactClass({
             this._fillRequestWhileRunning = false;
             this.checkFillState();
         }
-    },
+    };
 
     // check if unfilling is possible and send an unfill request if necessary
-    _checkUnfillState: function(backwards) {
+    _checkUnfillState(backwards) {
         let excessHeight = this._getExcessHeight(backwards);
         if (excessHeight <= 0) {
             return;
@@ -418,10 +415,10 @@ export default createReactClass({
                 this.props.onUnfillRequest(backwards, markerScrollToken);
             }, UNFILL_REQUEST_DEBOUNCE_MS);
         }
-    },
+    }
 
     // check if there is already a pending fill request. If not, set one off.
-    _maybeFill: function(depth, backwards) {
+    _maybeFill(depth, backwards) {
         const dir = backwards ? 'b' : 'f';
         if (this._pendingFillRequests[dir]) {
             debuglog("Already a "+dir+" fill in progress - not starting another");
@@ -457,7 +454,7 @@ export default createReactClass({
                 return this.checkFillState(depth + 1);
             }
         });
-    },
+    }
 
     /* get the current scroll state. This returns an object with the following
      * properties:
@@ -473,9 +470,7 @@ export default createReactClass({
      *   the number of pixels the bottom of the tracked child is above the
      *   bottom of the scroll panel.
      */
-    getScrollState: function() {
+    getScrollState = () => this.scrollState;
-        return this.scrollState;
-    },
 
     /* reset the saved scroll state.
      *
@@ -489,7 +484,7 @@ export default createReactClass({
      * no use if no children exist yet, or if you are about to replace the
      * child list.)
      */
-    resetScrollState: function() {
+    resetScrollState = () => {
         this.scrollState = {
             stuckAtBottom: this.props.startAtBottom,
         };
@@ -497,20 +492,20 @@ export default createReactClass({
         this._pages = 0;
         this._scrollTimeout = new Timer(100);
         this._heightUpdateInProgress = false;
-    },
+    };
 
     /**
      * jump to the top of the content.
      */
-    scrollToTop: function() {
+    scrollToTop = () => {
         this._getScrollNode().scrollTop = 0;
         this._saveScrollState();
-    },
+    };
 
     /**
      * jump to the bottom of the content.
      */
-    scrollToBottom: function() {
+    scrollToBottom = () => {
         // the easiest way to make sure that the scroll state is correctly
         // saved is to do the scroll, then save the updated state. (Calculating
         // it ourselves is hard, and we can't rely on an onScroll callback
@@ -518,25 +513,25 @@ export default createReactClass({
         const sn = this._getScrollNode();
         sn.scrollTop = sn.scrollHeight;
         this._saveScrollState();
-    },
+    };
 
     /**
      * Page up/down.
      *
      * @param {number} mult: -1 to page up, +1 to page down
      */
-    scrollRelative: function(mult) {
+    scrollRelative = mult => {
         const scrollNode = this._getScrollNode();
         const delta = mult * scrollNode.clientHeight * 0.5;
         scrollNode.scrollBy(0, delta);
         this._saveScrollState();
-    },
+    };
 
     /**
      * Scroll up/down in response to a scroll key
      * @param {object} ev the keyboard event
      */
-    handleScrollKey: function(ev) {
+    handleScrollKey = ev => {
         switch (ev.key) {
             case Key.PAGE_UP:
                 if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
@@ -562,7 +557,7 @@ export default createReactClass({
                 }
                 break;
         }
-    },
+    };
 
     /* Scroll the panel to bring the DOM node with the scroll token
      * `scrollToken` into view.
@@ -575,7 +570,7 @@ export default createReactClass({
      * node (specifically, the bottom of it) will be positioned. If omitted, it
      * defaults to 0.
      */
-    scrollToToken: function(scrollToken, pixelOffset, offsetBase) {
+    scrollToToken = (scrollToken, pixelOffset, offsetBase) => {
         pixelOffset = pixelOffset || 0;
         offsetBase = offsetBase || 0;
 
@@ -597,9 +592,9 @@ export default createReactClass({
             scrollNode.scrollTop = (trackedNode.offsetTop - (scrollNode.clientHeight * offsetBase)) + pixelOffset;
             this._saveScrollState();
         }
-    },
+    };
 
-    _saveScrollState: function() {
+    _saveScrollState() {
         if (this.props.stickyBottom && this.isAtBottom()) {
             this.scrollState = { stuckAtBottom: true };
             debuglog("saved stuckAtBottom state");
@@ -642,9 +637,9 @@ export default createReactClass({
             bottomOffset: bottomOffset,
             pixelOffset: bottomOffset - viewportBottom, //needed for restoring the scroll position when coming back to the room
         };
-    },
+    }
 
-    _restoreSavedScrollState: async function() {
+    async _restoreSavedScrollState() {
         const scrollState = this.scrollState;
 
         if (scrollState.stuckAtBottom) {
@@ -677,7 +672,8 @@ export default createReactClass({
         } else {
             debuglog("not updating height because request already in progress");
         }
-    },
+    }
+
     // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
     async _updateHeight() {
         // wait until user has stopped scrolling
@@ -732,7 +728,7 @@ export default createReactClass({
                 debuglog("updateHeight to", {newHeight, topDiff});
             }
         }
-    },
+    }
 
     _getTrackedNode() {
         const scrollState = this.scrollState;
@@ -765,11 +761,11 @@ export default createReactClass({
         }
 
         return scrollState.trackedNode;
-    },
+    }
 
     _getListHeight() {
         return this._bottomGrowth + (this._pages * PAGE_SIZE);
-    },
+    }
 
     _getMessagesHeight() {
         const itemlist = this._itemlist.current;
@@ -778,17 +774,17 @@ export default createReactClass({
         const firstNodeTop = itemlist.firstElementChild ? itemlist.firstElementChild.offsetTop : 0;
         // 18 is itemlist padding
         return lastNodeBottom - firstNodeTop + (18 * 2);
-    },
+    }
 
     _topFromBottom(node) {
         // current capped height - distance from top = distance from bottom of container to top of tracked element
         return this._itemlist.current.clientHeight - node.offsetTop;
-    },
+    }
 
     /* get the DOM node which has the scrollTop property we care about for our
      * message panel.
      */
-    _getScrollNode: function() {
+    _getScrollNode() {
         if (this.unmounted) {
             // this shouldn't happen, but when it does, turn the NPE into
             // something more meaningful.
@@ -802,18 +798,18 @@ export default createReactClass({
         }
 
         return this._divScroll;
-    },
+    }
 
-    _collectScroll: function(divScroll) {
+    _collectScroll = divScroll => {
         this._divScroll = divScroll;
-    },
+    };
 
     /**
     Mark the bottom offset of the last tile so we can balance it out when
     anything below it changes, by calling updatePreventShrinking, to keep
     the same minimum bottom offset, effectively preventing the timeline to shrink.
     */
-    preventShrinking: function() {
+    preventShrinking = () => {
         const messageList = this._itemlist.current;
         const tiles = messageList && messageList.children;
         if (!messageList) {
@@ -837,16 +833,16 @@ export default createReactClass({
             offsetNode: lastTileNode,
         };
         debuglog("prevent shrinking, last tile ", offsetFromBottom, "px from bottom");
-    },
+    };
 
     /** Clear shrinking prevention. Used internally, and when the timeline is reloaded. */
-    clearPreventShrinking: function() {
+    clearPreventShrinking = () => {
         const messageList = this._itemlist.current;
         const balanceElement = messageList && messageList.parentElement;
         if (balanceElement) balanceElement.style.paddingBottom = null;
         this.preventShrinkingState = null;
         debuglog("prevent shrinking cleared");
-    },
+    };
 
     /**
     update the container padding to balance
@@ -856,7 +852,7 @@ export default createReactClass({
     from the bottom of the marked tile grows larger than
     what it was when marking.
     */
-    updatePreventShrinking: function() {
+    updatePreventShrinking = () => {
         if (this.preventShrinkingState) {
             const sn = this._getScrollNode();
             const scrollState = this.scrollState;
@@ -886,9 +882,9 @@ export default createReactClass({
                 this.clearPreventShrinking();
             }
         }
-    },
+    };
 
-    render: function() {
+    render() {
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
@@ -906,5 +902,5 @@ export default createReactClass({
                     </div>
                 </AutoHideScrollbar>
             );
-    },
+    }
-});
+}

src/components/structures/SearchBox.js

@@ -16,18 +16,15 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { Key } from '../../Keyboard';
 import dis from '../../dispatcher/dispatcher';
-import { throttle } from 'lodash';
+import {throttle} from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import classNames from 'classnames';
 
-export default createReactClass({
+export default class SearchBox extends React.Component {
-    displayName: 'SearchBox',
+    static propTypes = {
-
-    propTypes: {
         onSearch: PropTypes.func,
         onCleared: PropTypes.func,
         onKeyDown: PropTypes.func,
@@ -38,35 +35,32 @@ export default createReactClass({
         // on room search focus action (it would be nicer to take
         // this functionality out, but not obvious how that would work)
         enableRoomSearchFocus: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         enableRoomSearchFocus: false,
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this._search = createRef();
+
+        this.state = {
             searchTerm: "",
             blurred: true,
         };
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    componentDidMount() {
-    UNSAFE_componentWillMount: function() {
-        this._search = createRef();
-    },
-
-    componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
-    },
+    }
 
-    onAction: function(payload) {
+    onAction = payload => {
         if (!this.props.enableRoomSearchFocus) return;
 
         switch (payload.action) {
@@ -81,51 +75,51 @@ export default createReactClass({
                 }
                 break;
         }
-    },
+    };
 
-    onChange: function() {
+    onChange = () => {
         if (!this._search.current) return;
         this.setState({ searchTerm: this._search.current.value });
         this.onSearch();
-    },
+    };
 
-    onSearch: throttle(function() {
+    onSearch = throttle(() => {
         this.props.onSearch(this._search.current.value);
-    }, 200, {trailing: true, leading: true}),
+    }, 200, {trailing: true, leading: true});
 
-    _onKeyDown: function(ev) {
+    _onKeyDown = ev => {
         switch (ev.key) {
             case Key.ESCAPE:
                 this._clearSearch("keyboard");
                 break;
         }
         if (this.props.onKeyDown) this.props.onKeyDown(ev);
-    },
+    };
 
-    _onFocus: function(ev) {
+    _onFocus = ev => {
         this.setState({blurred: false});
         ev.target.select();
         if (this.props.onFocus) {
             this.props.onFocus(ev);
         }
-    },
+    };
 
-    _onBlur: function(ev) {
+    _onBlur = ev => {
         this.setState({blurred: true});
         if (this.props.onBlur) {
             this.props.onBlur(ev);
         }
-    },
+    };
 
-    _clearSearch: function(source) {
+    _clearSearch(source) {
         this._search.current.value = "";
         this.onChange();
         if (this.props.onCleared) {
             this.props.onCleared(source);
         }
-    },
+    }
 
-    render: function() {
+    render() {
         // check for collapsed here and
         // not at parent so we keep
         // searchTerm in our state
@@ -166,5 +160,5 @@ export default createReactClass({
                 { clearButton }
             </div>
         );
-    },
+    }
-});
+}

src/components/structures/TagPanel.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import TagOrderStore from '../../stores/TagOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
@@ -32,21 +31,15 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
 
-const TagPanel = createReactClass({
+class TagPanel extends React.Component {
-    displayName: 'TagPanel',
+    static contextType = MatrixClientContext;
 
-    statics: {
+    state = {
-        contextType: MatrixClientContext,
-    },
-
-    getInitialState() {
-        return {
         orderedTags: [],
         selectedTags: [],
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.unmounted = false;
         this.context.on("Group.myMembership", this._onGroupMyMembership);
         this.context.on("sync", this._onClientSync);
@@ -62,7 +55,7 @@ const TagPanel = createReactClass({
         });
         // This could be done by anything with a matrix client
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
-    },
+    }
 
     componentWillUnmount() {
         this.unmounted = true;
@@ -71,14 +64,14 @@ const TagPanel = createReactClass({
         if (this._tagOrderStoreToken) {
             this._tagOrderStoreToken.remove();
         }
-    },
+    }
 
-    _onGroupMyMembership() {
+    _onGroupMyMembership = () => {
         if (this.unmounted) return;
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
-    },
+    };
 
-    _onClientSync(syncState, prevState) {
+    _onClientSync = (syncState, prevState) => {
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
         const reconnected = syncState !== "ERROR" && prevState !== syncState;
@@ -86,18 +79,18 @@ const TagPanel = createReactClass({
             // Load joined groups
             dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
         }
-    },
+    };
 
-    onMouseDown(e) {
+    onMouseDown = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
             dis.dispatch({action: 'deselect_tags'});
         }
-    },
+    };
 
-    onClearFilterClick(ev) {
+    onClearFilterClick = ev => {
         dis.dispatch({action: 'deselect_tags'});
-    },
+    };
 
     renderGlobalIcon() {
         if (!SettingsStore.getValue("feature_communities_v2_prototypes")) return null;
@@ -108,7 +101,7 @@ const TagPanel = createReactClass({
                 <hr className="mx_TagPanel_divider" />
             </div>
         );
-    },
+    }
 
     render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
@@ -173,6 +166,6 @@ const TagPanel = createReactClass({
                 </Droppable>
             </AutoHideScrollbar>
         </div>;
-    },
+    }
-});
+}
 export default TagPanel;

src/components/structures/TimelinePanel.js

@@ -19,7 +19,6 @@ limitations under the License.
 
 import SettingsStore from "../../settings/SettingsStore";
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
 import {EventTimeline} from "matrix-js-sdk";
@@ -54,10 +53,8 @@ if (DEBUG) {
  *
  * Also responsible for handling and sending read receipts.
  */
-const TimelinePanel = createReactClass({
+class TimelinePanel extends React.Component {
-    displayName: 'TimelinePanel',
+    static propTypes = {
-
-    propTypes: {
         // The js-sdk EventTimelineSet object for the timeline sequence we are
         // representing.  This may or may not have a room, depending on what it's
         // a timeline representing.  If it has a room, we maintain RRs etc for
@@ -115,23 +112,28 @@ const TimelinePanel = createReactClass({
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
-    },
+    }
 
-    statics: {
     // a map from room id to read marker event timestamp
-        roomReadMarkerTsMap: {},
+    static roomReadMarkerTsMap = {};
-    },
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         // By default, disable the timelineCap in favour of unpaginating based on
         // event tile heights. (See _unpaginateEvents)
         timelineCap: Number.MAX_VALUE,
         className: 'mx_RoomView_messagePanel',
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
+        super(props);
+
+        debuglog("TimelinePanel: mounting");
+
+        this.lastRRSentEventId = undefined;
+        this.lastRMSentEventId = undefined;
+
+        this._messagePanel = createRef();
+
         // XXX: we could track RM per TimelineSet rather than per Room.
         // but for now we just do it per room for simplicity.
         let initialReadMarker = null;
@@ -144,7 +146,7 @@ const TimelinePanel = createReactClass({
             }
         }
 
-        return {
+        this.state = {
             events: [],
             liveEvents: [],
             timelineLoading: true, // track whether our room timeline is loading
@@ -203,24 +205,6 @@ const TimelinePanel = createReactClass({
             // how long to show the RM for when it's scrolled off-screen
             readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"),
         };
-    },
-
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
-        debuglog("TimelinePanel: mounting");
-
-        this.lastRRSentEventId = undefined;
-        this.lastRMSentEventId = undefined;
-
-        this._messagePanel = createRef();
-
-        if (this.props.manageReadReceipts) {
-            this.updateReadReceiptOnUserActivity();
-        }
-        if (this.props.manageReadMarkers) {
-            this.updateReadMarkerOnUserActivity();
-        }
-
 
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
@@ -234,12 +218,24 @@ const TimelinePanel = createReactClass({
         MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted);
         MatrixClientPeg.get().on("Event.replaced", this.onEventReplaced);
         MatrixClientPeg.get().on("sync", this.onSync);
+    }
+
+    // TODO: [REACT-WARNING] Move into constructor
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillMount() {
+        if (this.props.manageReadReceipts) {
+            this.updateReadReceiptOnUserActivity();
+        }
+        if (this.props.manageReadMarkers) {
+            this.updateReadMarkerOnUserActivity();
+        }
 
         this._initTimeline(this.props);
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(newProps) {
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.timelineSet !== this.props.timelineSet) {
             // throw new Error("changing timelineSet on a TimelinePanel is not supported");
 
@@ -260,9 +256,9 @@ const TimelinePanel = createReactClass({
                         " (was " + this.props.eventId + ")");
             return this._initTimeline(newProps);
         }
-    },
+    }
 
-    shouldComponentUpdate: function(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (!ObjectUtils.shallowEqual(this.props, nextProps)) {
             if (DEBUG) {
                 console.group("Timeline.shouldComponentUpdate: props change");
@@ -284,9 +280,9 @@ const TimelinePanel = createReactClass({
         }
 
         return false;
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         // set a boolean to say we've been unmounted, which any pending
         // promises can use to throw away their results.
         //
@@ -316,9 +312,9 @@ const TimelinePanel = createReactClass({
             client.removeListener("Event.replaced", this.onEventReplaced);
             client.removeListener("sync", this.onSync);
         }
-    },
+    }
 
-    onMessageListUnfillRequest: function(backwards, scrollToken) {
+    onMessageListUnfillRequest = (backwards, scrollToken) => {
         // If backwards, unpaginate from the back (i.e. the start of the timeline)
         const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
         debuglog("TimelinePanel: unpaginating events in direction", dir);
@@ -349,18 +345,18 @@ const TimelinePanel = createReactClass({
                 firstVisibleEventIndex,
             });
         }
-    },
+    };
 
-    onPaginationRequest(timelineWindow, direction, size) {
+    onPaginationRequest = (timelineWindow, direction, size) => {
         if (this.props.onPaginationRequest) {
             return this.props.onPaginationRequest(timelineWindow, direction, size);
         } else {
             return timelineWindow.paginate(direction, size);
         }
-    },
+    };
 
     // set off a pagination request.
-    onMessageListFillRequest: function(backwards) {
+    onMessageListFillRequest = backwards => {
         if (!this._shouldPaginate()) return Promise.resolve(false);
 
         const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
@@ -425,9 +421,9 @@ const TimelinePanel = createReactClass({
                 });
             });
         });
-    },
+    };
 
-    onMessageListScroll: function(e) {
+    onMessageListScroll = e => {
         if (this.props.onScroll) {
             this.props.onScroll(e);
         }
@@ -447,9 +443,9 @@ const TimelinePanel = createReactClass({
             // NO-OP when timeout already has set to the given value
             this._readMarkerActivityTimer.changeTimeout(timeout);
         }
-    },
+    };
 
-    onAction: function(payload) {
+    onAction = payload => {
         if (payload.action === 'ignore_state_changed') {
             this.forceUpdate();
         }
@@ -463,9 +459,9 @@ const TimelinePanel = createReactClass({
                 }
             });
         }
-    },
+    };
 
-    onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
+    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
         // ignore events for other timeline sets
         if (data.timeline.getTimelineSet() !== this.props.timelineSet) return;
 
@@ -537,21 +533,19 @@ const TimelinePanel = createReactClass({
                 }
             });
         });
-    },
+    };
 
-    onRoomTimelineReset: function(room, timelineSet) {
+    onRoomTimelineReset = (room, timelineSet) => {
         if (timelineSet !== this.props.timelineSet) return;
 
         if (this._messagePanel.current && this._messagePanel.current.isAtBottom()) {
             this._loadTimeline();
         }
-    },
+    };
 
-    canResetTimeline: function() {
+    canResetTimeline = () => this._messagePanel.current && this._messagePanel.current.isAtBottom();
-        return this._messagePanel.current && this._messagePanel.current.isAtBottom();
-    },
 
-    onRoomRedaction: function(ev, room) {
+    onRoomRedaction = (ev, room) => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -560,9 +554,9 @@ const TimelinePanel = createReactClass({
         // we could skip an update if the event isn't in our timeline,
         // but that's probably an early optimisation.
         this.forceUpdate();
-    },
+    };
 
-    onEventReplaced: function(replacedEvent, room) {
+    onEventReplaced = (replacedEvent, room) => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -571,27 +565,27 @@ const TimelinePanel = createReactClass({
         // we could skip an update if the event isn't in our timeline,
         // but that's probably an early optimisation.
         this.forceUpdate();
-    },
+    };
 
-    onRoomReceipt: function(ev, room) {
+    onRoomReceipt = (ev, room) => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
         if (room !== this.props.timelineSet.room) return;
 
         this.forceUpdate();
-    },
+    };
 
-    onLocalEchoUpdated: function(ev, room, oldEventId) {
+    onLocalEchoUpdated = (ev, room, oldEventId) => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
         if (room !== this.props.timelineSet.room) return;
 
         this._reloadEvents();
-    },
+    };
 
-    onAccountData: function(ev, room) {
+    onAccountData = (ev, room) => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -605,9 +599,9 @@ const TimelinePanel = createReactClass({
         this.setState({
             readMarkerEventId: ev.getContent().event_id,
         }, this.props.onReadMarkerUpdated);
-    },
+    };
 
-    onEventDecrypted: function(ev) {
+    onEventDecrypted = ev => {
         // Can be null for the notification timeline, etc.
         if (!this.props.timelineSet.room) return;
 
@@ -620,19 +614,19 @@ const TimelinePanel = createReactClass({
         if (ev.getRoomId() === this.props.timelineSet.room.roomId) {
             this.forceUpdate();
         }
-    },
+    };
 
-    onSync: function(state, prevState, data) {
+    onSync = (state, prevState, data) => {
         this.setState({clientSyncState: state});
-    },
+    };
 
     _readMarkerTimeout(readMarkerPosition) {
         return readMarkerPosition === 0 ?
             this.state.readMarkerInViewThresholdMs :
             this.state.readMarkerOutOfViewThresholdMs;
-    },
+    }
 
-    updateReadMarkerOnUserActivity: async function() {
+    async updateReadMarkerOnUserActivity() {
         const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition());
         this._readMarkerActivityTimer = new Timer(initialTimeout);
 
@@ -644,9 +638,9 @@ const TimelinePanel = createReactClass({
             // outside of try/catch to not swallow errors
             this.updateReadMarker();
         }
-    },
+    }
 
-    updateReadReceiptOnUserActivity: async function() {
+    async updateReadReceiptOnUserActivity() {
         this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
         while (this._readReceiptActivityTimer) { //unset on unmount
             UserActivity.sharedInstance().timeWhileActiveNow(this._readReceiptActivityTimer);
@@ -656,9 +650,9 @@ const TimelinePanel = createReactClass({
             // outside of try/catch to not swallow errors
             this.sendReadReceipt();
         }
-    },
+    }
 
-    sendReadReceipt: function() {
+    sendReadReceipt = () => {
         if (SettingsStore.getValue("lowBandwidth")) return;
 
         if (!this._messagePanel.current) return;
@@ -766,11 +760,11 @@ const TimelinePanel = createReactClass({
                 });
             }
         }
-    },
+    };
 
     // if the read marker is on the screen, we can now assume we've caught up to the end
     // of the screen, so move the marker down to the bottom of the screen.
-    updateReadMarker: function() {
+    updateReadMarker = () => {
         if (!this.props.manageReadMarkers) return;
         if (this.getReadMarkerPosition() === 1) {
             // the read marker is at an event below the viewport,
@@ -801,11 +795,11 @@ const TimelinePanel = createReactClass({
 
         // Send the updated read marker (along with read receipt) to the server
         this.sendReadReceipt();
-    },
+    };
 
 
     // advance the read marker past any events we sent ourselves.
-    _advanceReadMarkerPastMyEvents: function() {
+    _advanceReadMarkerPastMyEvents() {
         if (!this.props.manageReadMarkers) return;
 
         // we call `_timelineWindow.getEvents()` rather than using
@@ -837,11 +831,11 @@ const TimelinePanel = createReactClass({
 
         const ev = events[i];
         this._setReadMarker(ev.getId(), ev.getTs());
-    },
+    }
 
     /* jump down to the bottom of this room, where new events are arriving
      */
-    jumpToLiveTimeline: function() {
+    jumpToLiveTimeline = () => {
         // if we can't forward-paginate the existing timeline, then there
         // is no point reloading it - just jump straight to the bottom.
         //
@@ -854,12 +848,12 @@ const TimelinePanel = createReactClass({
                 this._messagePanel.current.scrollToBottom();
             }
         }
-    },
+    };
 
     /* scroll to show the read-up-to marker. We put it 1/3 of the way down
      * the container.
      */
-    jumpToReadMarker: function() {
+    jumpToReadMarker = () => {
         if (!this.props.manageReadMarkers) return;
         if (!this._messagePanel.current) return;
         if (!this.state.readMarkerEventId) return;
@@ -883,11 +877,11 @@ const TimelinePanel = createReactClass({
         // As with jumpToLiveTimeline, we want to reload the timeline around the
         // read-marker.
         this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
-    },
+    };
 
     /* update the read-up-to marker to match the read receipt
      */
-    forgetReadMarker: function() {
+    forgetReadMarker = () => {
         if (!this.props.manageReadMarkers) return;
 
         const rmId = this._getCurrentReadReceipt();
@@ -903,17 +897,17 @@ const TimelinePanel = createReactClass({
         }
 
         this._setReadMarker(rmId, rmTs);
-    },
+    };
 
     /* return true if the content is fully scrolled down and we are
      * at the end of the live timeline.
      */
-    isAtEndOfLiveTimeline: function() {
+    isAtEndOfLiveTimeline = () => {
         return this._messagePanel.current
             && this._messagePanel.current.isAtBottom()
             && this._timelineWindow
             && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
-    },
+    }
 
 
     /* get the current scroll state. See ScrollPanel.getScrollState for
@@ -921,10 +915,10 @@ const TimelinePanel = createReactClass({
      *
      * returns null if we are not mounted.
      */
-    getScrollState: function() {
+    getScrollState = () => {
         if (!this._messagePanel.current) { return null; }
         return this._messagePanel.current.getScrollState();
-    },
+    };
 
     // returns one of:
     //
@@ -932,7 +926,7 @@ const TimelinePanel = createReactClass({
     //  -1: read marker is above the window
     //   0: read marker is visible
     //  +1: read marker is below the window
-    getReadMarkerPosition: function() {
+    getReadMarkerPosition = () => {
         if (!this.props.manageReadMarkers) return null;
         if (!this._messagePanel.current) return null;
 
@@ -953,9 +947,9 @@ const TimelinePanel = createReactClass({
         }
 
         return null;
-    },
+    };
 
-    canJumpToReadMarker: function() {
+    canJumpToReadMarker = () => {
         // 1. Do not show jump bar if neither the RM nor the RR are set.
         // 3. We want to show the bar if the read-marker is off the top of the screen.
         // 4. Also, if pos === null, the event might not be paginated - show the unread bar
@@ -963,14 +957,14 @@ const TimelinePanel = createReactClass({
         const ret = this.state.readMarkerEventId !== null && // 1.
             (pos < 0 || pos === null); // 3., 4.
         return ret;
-    },
+    };
 
     /*
      * called by the parent component when PageUp/Down/etc is pressed.
      *
      * We pass it down to the scroll panel.
      */
-    handleScrollKey: function(ev) {
+    handleScrollKey = ev => {
         if (!this._messagePanel.current) { return; }
 
         // jump to the live timeline on ctrl-end, rather than the end of the
@@ -980,9 +974,9 @@ const TimelinePanel = createReactClass({
         } else {
             this._messagePanel.current.handleScrollKey(ev);
         }
-    },
+    };
 
-    _initTimeline: function(props) {
+    _initTimeline(props) {
         const initialEvent = props.eventId;
         const pixelOffset = props.eventPixelOffset;
 
@@ -994,7 +988,7 @@ const TimelinePanel = createReactClass({
         }
 
         return this._loadTimeline(initialEvent, pixelOffset, offsetBase);
-    },
+    }
 
     /**
      * (re)-load the event timeline, and initialise the scroll state, centered
@@ -1012,7 +1006,7 @@ const TimelinePanel = createReactClass({
      *
      * returns a promise which will resolve when the load completes.
      */
-    _loadTimeline: function(eventId, pixelOffset, offsetBase) {
+    _loadTimeline(eventId, pixelOffset, offsetBase) {
         this._timelineWindow = new Matrix.TimelineWindow(
             MatrixClientPeg.get(), this.props.timelineSet,
             {windowLimit: this.props.timelineCap});
@@ -1122,21 +1116,21 @@ const TimelinePanel = createReactClass({
             });
             prom.then(onLoaded, onError);
         }
-    },
+    }
 
     // handle the completion of a timeline load or localEchoUpdate, by
     // reloading the events from the timelinewindow and pending event list into
     // the state.
-    _reloadEvents: function() {
+    _reloadEvents() {
         // we might have switched rooms since the load started - just bin
         // the results if so.
         if (this.unmounted) return;
 
         this.setState(this._getEvents());
-    },
+    }
 
     // get the list of events from the timeline window and the pending event list
-    _getEvents: function() {
+    _getEvents() {
         const events = this._timelineWindow.getEvents();
         const firstVisibleEventIndex = this._checkForPreJoinUISI(events);
 
@@ -1154,7 +1148,7 @@ const TimelinePanel = createReactClass({
             liveEvents,
             firstVisibleEventIndex,
         };
-    },
+    }
 
     /**
      * Check for undecryptable messages that were sent while the user was not in
@@ -1166,7 +1160,7 @@ const TimelinePanel = createReactClass({
      * undecryptable event that was sent while the user was not in the room.  If no
      * such events were found, then it returns 0.
      */
-    _checkForPreJoinUISI: function(events) {
+    _checkForPreJoinUISI(events) {
         const room = this.props.timelineSet.room;
 
         if (events.length === 0 || !room ||
@@ -1228,18 +1222,18 @@ const TimelinePanel = createReactClass({
             }
         }
         return 0;
-    },
+    }
 
-    _indexForEventId: function(evId) {
+    _indexForEventId(evId) {
         for (let i = 0; i < this.state.events.length; ++i) {
             if (evId == this.state.events[i].getId()) {
                 return i;
             }
         }
         return null;
-    },
+    }
 
-    _getLastDisplayedEventIndex: function(opts) {
+    _getLastDisplayedEventIndex(opts) {
         opts = opts || {};
         const ignoreOwn = opts.ignoreOwn || false;
         const allowPartial = opts.allowPartial || false;
@@ -1313,7 +1307,7 @@ const TimelinePanel = createReactClass({
         }
 
         return null;
-    },
+    }
 
     /**
      * Get the id of the event corresponding to our user's latest read-receipt.
@@ -1324,7 +1318,7 @@ const TimelinePanel = createReactClass({
      *                                    SDK.
      * @return {String} the event ID
      */
-    _getCurrentReadReceipt: function(ignoreSynthesized) {
+    _getCurrentReadReceipt(ignoreSynthesized) {
         const client = MatrixClientPeg.get();
         // the client can be null on logout
         if (client == null) {
@@ -1333,9 +1327,9 @@ const TimelinePanel = createReactClass({
 
         const myUserId = client.credentials.userId;
         return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized);
-    },
+    }
 
-    _setReadMarker: function(eventId, eventTs, inhibitSetState) {
+    _setReadMarker(eventId, eventTs, inhibitSetState) {
         const roomId = this.props.timelineSet.room.roomId;
 
         // don't update the state (and cause a re-render) if there is
@@ -1358,9 +1352,9 @@ const TimelinePanel = createReactClass({
         this.setState({
             readMarkerEventId: eventId,
         }, this.props.onReadMarkerUpdated);
-    },
+    }
 
-    _shouldPaginate: function() {
+    _shouldPaginate() {
         // don't try to paginate while events in the timeline are
         // still being decrypted. We don't render events while they're
         // being decrypted, so they don't take up space in the timeline.
@@ -1369,13 +1363,11 @@ const TimelinePanel = createReactClass({
         return !this.state.events.some((e) => {
             return e.isBeingDecrypted();
         });
-    },
+    }
 
-    getRelationsForEvent(...args) {
+    getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args);
-        return this.props.timelineSet.getRelationsForEvent(...args);
-    },
 
-    render: function() {
+    render() {
         const MessagePanel = sdk.getComponent("structures.MessagePanel");
         const Loader = sdk.getComponent("elements.Spinner");
 
@@ -1456,7 +1448,7 @@ const TimelinePanel = createReactClass({
                 useIRCLayout={this.props.useIRCLayout}
             />
         );
-    },
+    }
-});
+}
 
 export default TimelinePanel;

src/components/structures/UploadBar.js

@@ -16,30 +16,28 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import ContentMessages from '../../ContentMessages';
 import dis from "../../dispatcher/dispatcher";
 import filesize from "filesize";
 import { _t } from '../../languageHandler';
 
-export default createReactClass({
+export default class UploadBar extends React.Component {
-    displayName: 'UploadBar',
+    static propTypes = {
-    propTypes: {
         room: PropTypes.object,
-    },
+    };
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         this.mounted = true;
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this.mounted = false;
         dis.unregister(this.dispatcherRef);
-    },
+    }
 
-    onAction: function(payload) {
+    onAction = payload => {
         switch (payload.action) {
             case 'upload_progress':
             case 'upload_finished':
@@ -48,9 +46,9 @@ export default createReactClass({
                 if (this.mounted) this.forceUpdate();
                 break;
         }
-    },
+    };
 
-    render: function() {
+    render() {
         const uploads = ContentMessages.sharedInstance().getCurrentUploads();
 
         // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
@@ -105,5 +103,5 @@ export default createReactClass({
                 <div className="mx_UploadBar_uploadFilename">{ uploadText }</div>
             </div>
         );
-    },
+    }
-});
+}

src/components/structures/UserMenu.tsx

@@ -42,6 +42,14 @@ import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../views/context_menus/IconizedContextMenu";
+import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
+import * as fbEmitter from "fbemitter";
+import TagOrderStore from "../../stores/TagOrderStore";
+import { showCommunityInviteDialog } from "../../RoomInvite";
+import dis from "../../dispatcher/dispatcher";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import ErrorDialog from "../views/dialogs/ErrorDialog";
+import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototypeDialog";
 
 interface IProps {
     isMinimized: boolean;
@@ -58,6 +66,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private themeWatcherRef: string;
     private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+    private tagStoreRef: fbEmitter.EventSubscription;
 
     constructor(props: IProps) {
         super(props);
@@ -77,14 +86,20 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
         if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
         if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
+        this.tagStoreRef.remove();
     }
 
+    private onTagStoreUpdate = () => {
+        this.forceUpdate(); // we don't have anything useful in state to update
+    };
+
     private isUserOnDarkTheme(): boolean {
         const theme = SettingsStore.getValue("theme");
         if (theme.startsWith("custom-")) {
@@ -189,9 +204,54 @@ export default class UserMenu extends React.Component<IProps, IState> {
         defaultDispatcher.dispatch({action: 'view_home_page'});
     };
 
+    private onCommunitySettingsClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Edit Community', '', EditCommunityPrototypeDialog, {
+            communityId: CommunityPrototypeStore.instance.getSelectedCommunityId(),
+        });
+        this.setState({contextMenuPosition: null}); // also close the menu
+    };
+
+    private onCommunityMembersClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        // We'd ideally just pop open a right panel with the member list, but the current
+        // way the right panel is structured makes this exceedingly difficult. Instead, we'll
+        // switch to the general room and open the member list there as it should be in sync
+        // anyways.
+        const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
+        if (chat) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: chat.roomId,
+            }, true);
+            dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList});
+        } else {
+            // "This should never happen" clauses go here for the prototype.
+            Modal.createTrackedDialog('Failed to find general chat', '', ErrorDialog, {
+                title: _t('Failed to find the general chat for this community'),
+                description: _t("Failed to find the general chat for this community"),
+            });
+        }
+        this.setState({contextMenuPosition: null}); // also close the menu
+    };
+
+    private onCommunityInviteClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
+        this.setState({contextMenuPosition: null}); // also close the menu
+    };
+
     private renderContextMenu = (): React.ReactNode => {
         if (!this.state.contextMenuPosition) return null;
 
+        const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+
         let hostingLink;
         const signupLink = getHostingLink("user-context-menu");
         if (signupLink) {
@@ -225,14 +285,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             );
         }
 
-        return <IconizedContextMenu
+        let primaryHeader = (
-            // -20 to overlap the context menu by just over the width of the `...` icon and make it look connected
-            left={this.state.contextMenuPosition.width + this.state.contextMenuPosition.left - 20}
-            top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
-            onFinished={this.onCloseMenu}
-            className="mx_UserMenu_contextMenu"
-        >
-            <div className="mx_UserMenu_contextMenu_header">
             <div className="mx_UserMenu_contextMenu_name">
                 <span className="mx_UserMenu_contextMenu_displayName">
                     {OwnProfileStore.instance.displayName}
@@ -241,19 +294,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     {MatrixClientPeg.get().getUserId()}
                 </span>
             </div>
-                <AccessibleTooltipButton
+        );
-                    className="mx_UserMenu_contextMenu_themeButton"
+        let primaryOptionList = (
-                    onClick={this.onSwitchThemeClick}
+            <React.Fragment>
-                    title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
-                >
-                    <img
-                        src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
-                        alt={_t("Switch theme")}
-                        width={16}
-                    />
-                </AccessibleTooltipButton>
-            </div>
-            {hostingLink}
                 <IconizedContextMenuOptionList>
                     {homeButton}
                     <IconizedContextMenuOption
@@ -289,6 +332,105 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         onClick={this.onSignOutClick}
                     />
                 </IconizedContextMenuOptionList>
+            </React.Fragment>
+        );
+        let secondarySection = null;
+
+        if (prototypeCommunityName) {
+            primaryHeader = (
+                <div className="mx_UserMenu_contextMenu_name">
+                    <span className="mx_UserMenu_contextMenu_displayName">
+                        {prototypeCommunityName}
+                    </span>
+                </div>
+            );
+            primaryOptionList = (
+                <IconizedContextMenuOptionList>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconSettings"
+                        label={_t("Settings")}
+                        aria-label={_t("Community settings")}
+                        onClick={this.onCommunitySettingsClick}
+                    />
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconMembers"
+                        label={_t("Members")}
+                        onClick={this.onCommunityMembersClick}
+                    />
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconInvite"
+                        label={_t("Invite")}
+                        onClick={this.onCommunityInviteClick}
+                    />
+                </IconizedContextMenuOptionList>
+            );
+            secondarySection = (
+                <React.Fragment>
+                    <hr />
+                    <div className="mx_UserMenu_contextMenu_header">
+                        <div className="mx_UserMenu_contextMenu_name">
+                            <span className="mx_UserMenu_contextMenu_displayName">
+                                {OwnProfileStore.instance.displayName}
+                            </span>
+                            <span className="mx_UserMenu_contextMenu_userId">
+                                {MatrixClientPeg.get().getUserId()}
+                            </span>
+                        </div>
+                    </div>
+                    <IconizedContextMenuOptionList>
+                        <IconizedContextMenuOption
+                            iconClassName="mx_UserMenu_iconSettings"
+                            label={_t("Settings")}
+                            aria-label={_t("User settings")}
+                            onClick={(e) => this.onSettingsOpen(e, null)}
+                        />
+                        <IconizedContextMenuOption
+                            iconClassName="mx_UserMenu_iconMessage"
+                            label={_t("Feedback")}
+                            onClick={this.onProvideFeedback}
+                        />
+                    </IconizedContextMenuOptionList>
+                    <IconizedContextMenuOptionList red>
+                        <IconizedContextMenuOption
+                            iconClassName="mx_UserMenu_iconSignOut"
+                            label={_t("Sign out")}
+                            onClick={this.onSignOutClick}
+                        />
+                    </IconizedContextMenuOptionList>
+                </React.Fragment>
+            )
+        }
+
+        const classes = classNames({
+            "mx_UserMenu_contextMenu": true,
+            "mx_UserMenu_contextMenu_prototype": !!prototypeCommunityName,
+        });
+
+        return <IconizedContextMenu
+            // numerical adjustments to overlap the context menu by just over the width of the
+            // menu icon and make it look connected
+            left={this.state.contextMenuPosition.width + this.state.contextMenuPosition.left - 10}
+            top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height + 8}
+            onFinished={this.onCloseMenu}
+            className={classes}
+        >
+            <div className="mx_UserMenu_contextMenu_header">
+                {primaryHeader}
+                <AccessibleTooltipButton
+                    className="mx_UserMenu_contextMenu_themeButton"
+                    onClick={this.onSwitchThemeClick}
+                    title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
+                >
+                    <img
+                        src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
+                        alt={_t("Switch theme")}
+                        width={16}
+                    />
+                </AccessibleTooltipButton>
+            </div>
+            {hostingLink}
+            {primaryOptionList}
+            {secondarySection}
         </IconizedContextMenu>;
     };
 
@@ -298,12 +440,34 @@ export default class UserMenu extends React.Component<IProps, IState> {
         const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
         const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
 
+        const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+
+        let isPrototype = false;
+        let menuName = _t("User menu");
         let name = <span className="mx_UserMenu_userName">{displayName}</span>;
         let buttons = (
             <span className="mx_UserMenu_headerButtons">
                 {/* masked image in CSS */}
             </span>
         );
+        if (prototypeCommunityName) {
+            name = (
+                <div className="mx_UserMenu_doubleName">
+                    <span className="mx_UserMenu_userName">{prototypeCommunityName}</span>
+                    <span className="mx_UserMenu_subUserName">{displayName}</span>
+                </div>
+            );
+            menuName = _t("Community and user menu");
+            isPrototype = true;
+        } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
+            name = (
+                <div className="mx_UserMenu_doubleName">
+                    <span className="mx_UserMenu_userName">{_t("Home")}</span>
+                    <span className="mx_UserMenu_subUserName">{displayName}</span>
+                </div>
+            );
+            isPrototype = true;
+        }
         if (this.props.isMinimized) {
             name = null;
             buttons = null;
@@ -312,6 +476,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         const classes = classNames({
             'mx_UserMenu': true,
             'mx_UserMenu_minimized': this.props.isMinimized,
+            'mx_UserMenu_prototype': isPrototype,
         });
 
         return (
@@ -320,7 +485,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     className={classes}
                     onClick={this.onOpenMenuClick}
                     inputRef={this.buttonRef}
-                    label={_t("User menu")}
+                    label={menuName}
                     isExpanded={!!this.state.contextMenuPosition}
                     onContextMenu={this.onContextMenu}
                 >

src/components/structures/ViewSource.js

@@ -17,24 +17,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import SyntaxHighlight from '../views/elements/SyntaxHighlight';
 import {_t} from "../../languageHandler";
 import * as sdk from "../../index";
 
 
-export default createReactClass({
+export default class ViewSource extends React.Component {
-    displayName: 'ViewSource',
+    static propTypes = {
-
-    propTypes: {
         content: PropTypes.object.isRequired,
         onFinished: PropTypes.func.isRequired,
         roomId: PropTypes.string.isRequired,
         eventId: PropTypes.string.isRequired,
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
@@ -49,5 +46,5 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/structures/auth/ForgotPassword.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
@@ -40,18 +39,15 @@ const PHASE_EMAIL_SENT = 3;
 // User has clicked the link in email and completed reset
 const PHASE_DONE = 4;
 
-export default createReactClass({
+export default class ForgotPassword extends React.Component {
-    displayName: 'ForgotPassword',
+    static propTypes = {
-
-    propTypes: {
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
         onServerConfigChange: PropTypes.func.isRequired,
         onLoginClick: PropTypes.func,
         onComplete: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         phase: PHASE_FORGOT,
         email: "",
         password: "",
@@ -67,23 +63,23 @@ export default createReactClass({
         serverDeadError: "",
         serverRequiresIdServer: null,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.reset = null;
         this._checkServerLiveliness(this.props.serverConfig);
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(newProps) {
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
 
         // Do a liveliness check on the new URLs
         this._checkServerLiveliness(newProps.serverConfig);
-    },
+    }
 
-    _checkServerLiveliness: async function(serverConfig) {
+    async _checkServerLiveliness(serverConfig) {
         try {
             await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(
                 serverConfig.hsUrl,
@@ -100,9 +96,9 @@ export default createReactClass({
         } catch (e) {
             this.setState(AutoDiscoveryUtils.authComponentStateForError(e, "forgot_password"));
         }
-    },
+    }
 
-    submitPasswordReset: function(email, password) {
+    submitPasswordReset(email, password) {
         this.setState({
             phase: PHASE_SENDING_EMAIL,
         });
@@ -117,9 +113,9 @@ export default createReactClass({
                 phase: PHASE_FORGOT,
             });
         });
-    },
+    }
 
-    onVerify: async function(ev) {
+    onVerify = async ev => {
         ev.preventDefault();
         if (!this.reset) {
             console.error("onVerify called before submitPasswordReset!");
@@ -131,9 +127,9 @@ export default createReactClass({
         } catch (err) {
             this.showErrorDialog(err.message);
         }
-    },
+    };
 
-    onSubmitForm: async function(ev) {
+    onSubmitForm = async ev => {
         ev.preventDefault();
 
         // refresh the server errors, just in case the server came back online
@@ -166,41 +162,41 @@ export default createReactClass({
                 },
             });
         }
-    },
+    };
 
-    onInputChanged: function(stateKey, ev) {
+    onInputChanged = (stateKey, ev) => {
         this.setState({
             [stateKey]: ev.target.value,
         });
-    },
+    };
 
-    async onServerDetailsNextPhaseClick() {
+    onServerDetailsNextPhaseClick = async () => {
         this.setState({
             phase: PHASE_FORGOT,
         });
-    },
+    };
 
-    onEditServerDetailsClick(ev) {
+    onEditServerDetailsClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this.setState({
             phase: PHASE_SERVER_DETAILS,
         });
-    },
+    };
 
-    onLoginClick: function(ev) {
+    onLoginClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this.props.onLoginClick();
-    },
+    };
 
-    showErrorDialog: function(body, title) {
+    showErrorDialog(body, title) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
             title: title,
             description: body,
         });
-    },
+    }
 
     renderServerDetails() {
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
@@ -218,7 +214,7 @@ export default createReactClass({
             submitText={_t("Next")}
             submitClass="mx_Login_submit"
         />;
-    },
+    }
 
     renderForgot() {
         const Field = sdk.getComponent('elements.Field');
@@ -335,12 +331,12 @@ export default createReactClass({
                 {_t('Sign in instead')}
             </a>
         </div>;
-    },
+    }
 
     renderSendingEmail() {
         const Spinner = sdk.getComponent("elements.Spinner");
         return <Spinner />;
-    },
+    }
 
     renderEmailSent() {
         return <div>
@@ -350,7 +346,7 @@ export default createReactClass({
             <input className="mx_Login_submit" type="button" onClick={this.onVerify}
                 value={_t('I have verified my email address')} />
         </div>;
-    },
+    }
 
     renderDone() {
         return <div>
@@ -363,9 +359,9 @@ export default createReactClass({
             <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
                 value={_t('Return to login screen')} />
         </div>;
-    },
+    }
 
-    render: function() {
+    render() {
         const AuthHeader = sdk.getComponent("auth.AuthHeader");
         const AuthBody = sdk.getComponent("auth.AuthBody");
 
@@ -397,5 +393,5 @@ export default createReactClass({
                 </AuthBody>
             </AuthPage>
         );
-    },
+    }
-});
+}

src/components/structures/auth/Login.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import {_t, _td} from '../../../languageHandler';
 import * as sdk from '../../../index';
@@ -53,13 +52,11 @@ _td("Invalid base_url for m.identity_server");
 _td("Identity server URL does not appear to be a valid identity server");
 _td("General failure");
 
-/**
+/*
  * A wire component which glues together login UI components and Login logic
  */
-export default createReactClass({
+export default class LoginComponent extends React.Component {
-    displayName: 'Login',
+    static propTypes = {
-
-    propTypes: {
         // Called when the user has logged in. Params:
         // - The object returned by the login API
         // - The user's password, if applicable, (may be cached in memory for a
@@ -85,10 +82,14 @@ export default createReactClass({
 
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
         isSyncing: PropTypes.bool,
-    },
+    };
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this._unmounted = false;
+
+        this.state = {
             busy: false,
             busyLoggingIn: null,
             errorText: null,
@@ -113,11 +114,6 @@ export default createReactClass({
             serverErrorIsFatal: false,
             serverDeadError: "",
         };
-    },
-
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount: function() {
-        this._unmounted = false;
 
         // map from login step type to a function which will render a control
         // letting you do that login type
@@ -130,33 +126,32 @@ export default createReactClass({
         };
 
         this._initLoginLogic();
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    // eslint-disable-next-line camelcase
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
 
         // Ensure that we end up actually logging in to the right place
         this._initLoginLogic(newProps.serverConfig.hsUrl, newProps.serverConfig.isUrl);
-    },
+    }
 
-    onPasswordLoginError: function(errorText) {
+    onPasswordLoginError = errorText => {
         this.setState({
             errorText,
             loginIncorrect: Boolean(errorText),
         });
-    },
+    };
 
-    isBusy: function() {
+    isBusy = () => this.state.busy || this.props.busy;
-        return this.state.busy || this.props.busy;
-    },
 
-    onPasswordLogin: async function(username, phoneCountry, phoneNumber, password) {
+    onPasswordLogin = async (username, phoneCountry, phoneNumber, password) => {
         if (!this.state.serverIsAlive) {
             this.setState({busy: true});
             // Do a quick liveliness check on the URLs
@@ -263,13 +258,13 @@ export default createReactClass({
                 loginIncorrect: error.httpStatus === 401 || error.httpStatus === 403,
             });
         });
-    },
+    };
 
-    onUsernameChanged: function(username) {
+    onUsernameChanged = username => {
         this.setState({ username: username });
-    },
+    };
 
-    onUsernameBlur: async function(username) {
+    onUsernameBlur = async username => {
         const doWellknownLookup = username[0] === "@";
         this.setState({
             username: username,
@@ -314,19 +309,19 @@ export default createReactClass({
                 });
             }
         }
-    },
+    };
 
-    onPhoneCountryChanged: function(phoneCountry) {
+    onPhoneCountryChanged = phoneCountry => {
         this.setState({ phoneCountry: phoneCountry });
-    },
+    };
 
-    onPhoneNumberChanged: function(phoneNumber) {
+    onPhoneNumberChanged = phoneNumber => {
         this.setState({
             phoneNumber: phoneNumber,
         });
-    },
+    };
 
-    onPhoneNumberBlur: function(phoneNumber) {
+    onPhoneNumberBlur = phoneNumber => {
         // Validate the phone number entered
         if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
             this.setState({
@@ -339,15 +334,15 @@ export default createReactClass({
                 canTryLogin: true,
             });
         }
-    },
+    };
 
-    onRegisterClick: function(ev) {
+    onRegisterClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this.props.onRegisterClick();
-    },
+    };
 
-    onTryRegisterClick: function(ev) {
+    onTryRegisterClick = ev => {
         const step = this._getCurrentFlowStep();
         if (step === 'm.login.sso' || step === 'm.login.cas') {
             // If we're showing SSO it means that registration is also probably disabled,
@@ -361,23 +356,23 @@ export default createReactClass({
             // Don't intercept - just go through to the register page
             this.onRegisterClick(ev);
         }
-    },
+    };
 
-    async onServerDetailsNextPhaseClick() {
+    onServerDetailsNextPhaseClick = () => {
         this.setState({
             phase: PHASE_LOGIN,
         });
-    },
+    };
 
-    onEditServerDetailsClick(ev) {
+    onEditServerDetailsClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this.setState({
             phase: PHASE_SERVER_DETAILS,
         });
-    },
+    };
 
-    _initLoginLogic: async function(hsUrl, isUrl) {
+    async _initLoginLogic(hsUrl, isUrl) {
         hsUrl = hsUrl || this.props.serverConfig.hsUrl;
         isUrl = isUrl || this.props.serverConfig.isUrl;
 
@@ -465,9 +460,9 @@ export default createReactClass({
                 busy: false,
             });
         });
-    },
+    }
 
-    _isSupportedFlow: function(flow) {
+    _isSupportedFlow(flow) {
         // technically the flow can have multiple steps, but no one does this
         // for login and loginLogic doesn't support it so we can ignore it.
         if (!this._stepRendererMap[flow.type]) {
@@ -475,11 +470,11 @@ export default createReactClass({
             return false;
         }
         return true;
-    },
+    }
 
-    _getCurrentFlowStep: function() {
+    _getCurrentFlowStep() {
         return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null;
-    },
+    }
 
     _errorTextFromError(err) {
         let errCode = err.errcode;
@@ -526,7 +521,7 @@ export default createReactClass({
         }
 
         return errorText;
-    },
+    }
 
     renderServerComponent() {
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
@@ -552,7 +547,7 @@ export default createReactClass({
             delayTimeMs={250}
             {...serverDetailsProps}
         />;
-    },
+    }
 
     renderLoginComponentForStep() {
         if (PHASES_ENABLED && this.state.phase !== PHASE_LOGIN) {
@@ -572,9 +567,9 @@ export default createReactClass({
         }
 
         return null;
-    },
+    }
 
-    _renderPasswordStep: function() {
+    _renderPasswordStep = () => {
         const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
 
         let onEditServerDetailsClick = null;
@@ -603,9 +598,9 @@ export default createReactClass({
                busy={this.props.isSyncing || this.state.busyLoggingIn}
             />
         );
-    },
+    };
 
-    _renderSsoStep: function(loginType) {
+    _renderSsoStep = loginType => {
         const SignInToText = sdk.getComponent('views.auth.SignInToText');
 
         let onEditServerDetailsClick = null;
@@ -634,9 +629,9 @@ export default createReactClass({
                 />
             </div>
         );
-    },
+    };
 
-    render: function() {
+    render() {
         const Loader = sdk.getComponent("elements.Spinner");
         const InlineSpinner = sdk.getComponent("elements.InlineSpinner");
         const AuthHeader = sdk.getComponent("auth.AuthHeader");
@@ -704,5 +699,5 @@ export default createReactClass({
                 </AuthBody>
             </AuthPage>
         );
-    },
+    }
-});
+}

src/components/structures/auth/PostRegistration.js

@@ -15,29 +15,24 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import AuthPage from "../../views/auth/AuthPage";
 
-export default createReactClass({
+export default class PostRegistration extends React.Component {
-    displayName: 'PostRegistration',
+    static propTypes = {
-
-    propTypes: {
         onComplete: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         avatarUrl: null,
         errorString: null,
         busy: false,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         // There is some assymetry between ChangeDisplayName and ChangeAvatar,
         // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
         // the URL to be passed to you (because it's also used for room avatars).
@@ -55,9 +50,9 @@ export default createReactClass({
                 busy: false,
             });
         });
-    },
+    }
 
-    render: function() {
+    render() {
         const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
         const AuthHeader = sdk.getComponent('auth.AuthHeader');
@@ -78,5 +73,5 @@ export default createReactClass({
                 </AuthBody>
             </AuthPage>
         );
-    },
+    }
-});
+}

src/components/structures/auth/Registration.js

@@ -19,7 +19,6 @@ limitations under the License.
 
 import Matrix from 'matrix-js-sdk';
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
@@ -43,10 +42,8 @@ const PHASE_REGISTRATION = 1;
 // Enable phases for registration
 const PHASES_ENABLED = true;
 
-export default createReactClass({
+export default class Registration extends React.Component {
-    displayName: 'Registration',
+    static propTypes = {
-
-    propTypes: {
         // Called when the user has logged in. Params:
         // - object with userId, deviceId, homeserverUrl, identityServerUrl, accessToken
         // - The user's password, if available and applicable (may be cached in memory
@@ -65,12 +62,13 @@ export default createReactClass({
         onLoginClick: PropTypes.func.isRequired,
         onServerConfigChange: PropTypes.func.isRequired,
         defaultDeviceDisplayName: PropTypes.string,
-    },
+    };
+
+    constructor(props) {
+        super(props);
 
-    getInitialState: function() {
         const serverType = ServerType.getTypeFromServerConfig(this.props.serverConfig);
-
+        this.state = {
-        return {
             busy: false,
             errorText: null,
             // We remember the values entered by the user because
@@ -118,14 +116,15 @@ export default createReactClass({
             // this is the user ID that's logged in.
             differentLoggedInUserId: null,
         };
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._unmounted = false;
         this._replaceClient();
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    // eslint-disable-next-line camelcase
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
@@ -142,7 +141,7 @@ export default createReactClass({
                 phase: this.getDefaultPhaseForServerType(serverType),
             });
         }
-    },
+    }
 
     getDefaultPhaseForServerType(type) {
         switch (type) {
@@ -155,9 +154,9 @@ export default createReactClass({
             case ServerType.ADVANCED:
                 return PHASE_SERVER_DETAILS;
         }
-    },
+    }
 
-    onServerTypeChange(type) {
+    onServerTypeChange = type => {
         this.setState({
             serverType: type,
         });
@@ -184,9 +183,9 @@ export default createReactClass({
         this.setState({
             phase: this.getDefaultPhaseForServerType(type),
         });
-    },
+    };
 
-    _replaceClient: async function(serverConfig) {
+    async _replaceClient(serverConfig) {
         this.setState({
             errorText: null,
             serverDeadError: null,
@@ -286,18 +285,18 @@ export default createReactClass({
                 showGenericError(e);
             }
         }
-    },
+    }
 
-    onFormSubmit: function(formVals) {
+    onFormSubmit = formVals => {
         this.setState({
             errorText: "",
             busy: true,
             formVals: formVals,
             doingUIAuth: true,
         });
-    },
+    };
 
-    _requestEmailToken: function(emailAddress, clientSecret, sendAttempt, sessionId) {
+    _requestEmailToken = (emailAddress, clientSecret, sendAttempt, sessionId) => {
         return this.state.matrixClient.requestRegisterEmailToken(
             emailAddress,
             clientSecret,
@@ -309,9 +308,9 @@ export default createReactClass({
                 session_id: sessionId,
             }),
         );
-    },
+    }
 
-    _onUIAuthFinished: async function(success, response, extra) {
+    _onUIAuthFinished = async (success, response, extra) => {
         if (!success) {
             let msg = response.message || response.toString();
             // can we give a better error message?
@@ -395,9 +394,9 @@ export default createReactClass({
         }
 
         this.setState(newState);
-    },
+    };
 
-    _setupPushers: function() {
+    _setupPushers() {
         if (!this.props.brand) {
             return Promise.resolve();
         }
@@ -418,15 +417,15 @@ export default createReactClass({
         }, (error) => {
             console.error("Couldn't get pushers: " + error);
         });
-    },
+    }
 
-    onLoginClick: function(ev) {
+    onLoginClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this.props.onLoginClick();
-    },
+    };
 
-    onGoToFormClicked(ev) {
+    onGoToFormClicked = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this._replaceClient();
@@ -435,23 +434,23 @@ export default createReactClass({
             doingUIAuth: false,
             phase: PHASE_REGISTRATION,
         });
-    },
+    };
 
-    async onServerDetailsNextPhaseClick() {
+    onServerDetailsNextPhaseClick = async () => {
         this.setState({
             phase: PHASE_REGISTRATION,
         });
-    },
+    };
 
-    onEditServerDetailsClick(ev) {
+    onEditServerDetailsClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
         this.setState({
             phase: PHASE_SERVER_DETAILS,
         });
-    },
+    };
 
-    _makeRegisterRequest: function(auth) {
+    _makeRegisterRequest = auth => {
         // We inhibit login if we're trying to register with an email address: this
         // avoids a lot of complex race conditions that can occur if we try to log
         // the user in one one or both of the tabs they might end up with after
@@ -471,20 +470,20 @@ export default createReactClass({
         if (auth) registerParams.auth = auth;
         if (inhibitLogin !== undefined && inhibitLogin !== null) registerParams.inhibit_login = inhibitLogin;
         return this.state.matrixClient.registerRequest(registerParams);
-    },
+    };
 
-    _getUIAuthInputs: function() {
+    _getUIAuthInputs() {
         return {
             emailAddress: this.state.formVals.email,
             phoneCountry: this.state.formVals.phoneCountry,
             phoneNumber: this.state.formVals.phoneNumber,
         };
-    },
+    }
 
     // Links to the login page shown after registration is completed are routed through this
     // which checks the user hasn't already logged in somewhere else (perhaps we should do
     // this more generally?)
-    _onLoginClickWithCheck: async function(ev) {
+    _onLoginClickWithCheck = async ev => {
         ev.preventDefault();
 
         const sessionLoaded = await Lifecycle.loadSession({ignoreGuest: true});
@@ -492,7 +491,7 @@ export default createReactClass({
             // ok fine, there's still no session: really go to the login page
             this.props.onLoginClick();
         }
-    },
+    };
 
     renderServerComponent() {
         const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
@@ -553,7 +552,7 @@ export default createReactClass({
             />
             {serverDetails}
         </div>;
-    },
+    }
 
     renderRegisterComponent() {
         if (PHASES_ENABLED && this.state.phase !== PHASE_REGISTRATION) {
@@ -608,9 +607,9 @@ export default createReactClass({
                 serverRequiresIdServer={this.state.serverRequiresIdServer}
             />;
         }
-    },
+    }
 
-    render: function() {
+    render() {
         const AuthHeader = sdk.getComponent('auth.AuthHeader');
         const AuthBody = sdk.getComponent("auth.AuthBody");
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -706,5 +705,5 @@ export default createReactClass({
                 </AuthBody>
             </AuthPage>
         );
-    },
+    }
-});
+}

src/components/views/auth/AuthFooter.js

@@ -18,16 +18,13 @@ limitations under the License.
 
 import { _t } from '../../../languageHandler';
 import React from 'react';
-import createReactClass from 'create-react-class';
 
-export default createReactClass({
+export default class AuthFooter extends React.Component {
-    displayName: 'AuthFooter',
+    render() {
-
-    render: function() {
         return (
             <div className="mx_AuthFooter">
                 <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>
             </div>
         );
-    },
+    }
-});
+}

src/components/views/auth/AuthHeader.js

@@ -17,17 +17,14 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 
-export default createReactClass({
+export default class AuthHeader extends React.Component {
-    displayName: 'AuthHeader',
+    static propTypes = {
-
-    propTypes: {
         disableLanguageSelector: PropTypes.bool,
-    },
+    };
 
-    render: function() {
+    render() {
         const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
         const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
 
@@ -37,5 +34,5 @@ export default createReactClass({
                 <LanguageSelector disabled={this.props.disableLanguageSelector} />
             </div>
         );
-    },
+    }
-});
+}

src/components/views/auth/CaptchaForm.js

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
@@ -24,36 +23,31 @@ const DIV_ID = 'mx_recaptcha';
 /**
  * A pure UI component which displays a captcha form.
  */
-export default createReactClass({
+export default class CaptchaForm extends React.Component {
-    displayName: 'CaptchaForm',
+    static propTypes = {
-
-    propTypes: {
         sitePublicKey: PropTypes.string,
 
         // called with the captcha response
         onCaptchaResponse: PropTypes.func,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         onCaptchaResponse: () => {},
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this.state = {
             errorText: null,
         };
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         this._captchaWidgetId = null;
 
         this._recaptchaContainer = createRef();
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
         if (global.grecaptcha) {
@@ -68,13 +62,13 @@ export default createReactClass({
             );
             this._recaptchaContainer.current.appendChild(scriptTag);
         }
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this._resetRecaptcha();
-    },
+    }
 
-    _renderRecaptcha: function(divId) {
+    _renderRecaptcha(divId) {
         if (!global.grecaptcha) {
             console.error("grecaptcha not loaded!");
             throw new Error("Recaptcha did not load successfully");
@@ -93,15 +87,15 @@ export default createReactClass({
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
-    },
+    }
 
-    _resetRecaptcha: function() {
+    _resetRecaptcha() {
         if (this._captchaWidgetId !== null) {
             global.grecaptcha.reset(this._captchaWidgetId);
         }
-    },
+    }
 
-    _onCaptchaLoaded: function() {
+    _onCaptchaLoaded() {
         console.log("Loaded recaptcha script.");
         try {
             this._renderRecaptcha(DIV_ID);
@@ -110,9 +104,9 @@ export default createReactClass({
                 errorText: e.toString(),
             });
         }
-    },
+    }
 
-    render: function() {
+    render() {
         let error = null;
         if (this.state.errorText) {
             error = (
@@ -131,5 +125,5 @@ export default createReactClass({
                 { error }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/auth/CustomServerDialog.js

@@ -16,14 +16,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 
-export default createReactClass({
+export default class CustomServerDialog extends React.Component {
-    displayName: 'CustomServerDialog',
+    render() {
-
-    render: function() {
         const brand = SdkConfig.get().brand;
         return (
             <div className="mx_ErrorDialog">
@@ -46,5 +43,5 @@ export default createReactClass({
                 </div>
             </div>
         );
-    },
+    }
-});
+}

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import url from 'url';
 import classnames from 'classnames';
@@ -75,14 +74,10 @@ import AccessibleButton from "../elements/AccessibleButton";
 
 export const DEFAULT_PHASE = 0;
 
-export const PasswordAuthEntry = createReactClass({
+export class PasswordAuthEntry extends React.Component {
-    displayName: 'PasswordAuthEntry',
+    static LOGIN_TYPE = "m.login.password";
 
-    statics: {
+    static propTypes = {
-        LOGIN_TYPE: "m.login.password",
-    },
-
-    propTypes: {
         matrixClient: PropTypes.object.isRequired,
         submitAuthDict: PropTypes.func.isRequired,
         errorText: PropTypes.string,
@@ -90,19 +85,17 @@ export const PasswordAuthEntry = createReactClass({
         // happen?
         busy: PropTypes.bool,
         onPhaseChange: PropTypes.func.isRequired,
-    },
+    };
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
-    },
+    }
 
-    getInitialState: function() {
+    state = {
-        return {
         password: "",
     };
-    },
 
-    _onSubmit: function(e) {
+    _onSubmit = e => {
         e.preventDefault();
         if (this.props.busy) return;
 
@@ -117,16 +110,16 @@ export const PasswordAuthEntry = createReactClass({
             },
             password: this.state.password,
         });
-    },
+    };
 
-    _onPasswordFieldChange: function(ev) {
+    _onPasswordFieldChange = ev => {
         // enable the submit button iff the password is non-empty
         this.setState({
             password: ev.target.value,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const passwordBoxClass = classnames({
             "error": this.props.errorText,
         });
@@ -176,36 +169,32 @@ export const PasswordAuthEntry = createReactClass({
             { errorSection }
             </div>
         );
-    },
+    }
-});
+}
 
-export const RecaptchaAuthEntry = createReactClass({
+export class RecaptchaAuthEntry extends React.Component {
-    displayName: 'RecaptchaAuthEntry',
+    static LOGIN_TYPE = "m.login.recaptcha";
 
-    statics: {
+    static propTypes = {
-        LOGIN_TYPE: "m.login.recaptcha",
-    },
-
-    propTypes: {
         submitAuthDict: PropTypes.func.isRequired,
         stageParams: PropTypes.object.isRequired,
         errorText: PropTypes.string,
         busy: PropTypes.bool,
         onPhaseChange: PropTypes.func.isRequired,
-    },
+    };
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
-    },
+    }
 
-    _onCaptchaResponse: function(response) {
+    _onCaptchaResponse = response => {
         this.props.submitAuthDict({
             type: RecaptchaAuthEntry.LOGIN_TYPE,
             response: response,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         if (this.props.busy) {
             const Loader = sdk.getComponent("elements.Spinner");
             return <Loader />;
@@ -241,31 +230,24 @@ export const RecaptchaAuthEntry = createReactClass({
                 { errorSection }
             </div>
         );
-    },
+    }
-});
+}
 
-export const TermsAuthEntry = createReactClass({
+export class TermsAuthEntry extends React.Component {
-    displayName: 'TermsAuthEntry',
+    static LOGIN_TYPE = "m.login.terms";
 
-    statics: {
+    static propTypes = {
-        LOGIN_TYPE: "m.login.terms",
-    },
-
-    propTypes: {
         submitAuthDict: PropTypes.func.isRequired,
         stageParams: PropTypes.object.isRequired,
         errorText: PropTypes.string,
         busy: PropTypes.bool,
         showContinue: PropTypes.bool,
         onPhaseChange: PropTypes.func.isRequired,
-    },
+    };
 
-    componentDidMount: function() {
+    constructor(props) {
-        this.props.onPhaseChange(DEFAULT_PHASE);
+        super(props);
-    },
 
-    // TODO: [REACT-WARNING] Move this to constructor
-    componentWillMount: function() {
         // example stageParams:
         //
         // {
@@ -310,17 +292,22 @@ export const TermsAuthEntry = createReactClass({
             pickedPolicies.push(langPolicy);
         }
 
-        this.setState({
+        this.state = {
-            "toggledPolicies": initToggles,
+            toggledPolicies: initToggles,
-            "policies": pickedPolicies,
+            policies: pickedPolicies,
-        });
+        };
-    },
+    }
 
-    tryContinue: function() {
+
+    componentDidMount() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
+    }
+
+    tryContinue = () => {
         this._trySubmit();
-    },
+    };
 
-    _togglePolicy: function(policyId) {
+    _togglePolicy(policyId) {
         const newToggles = {};
         for (const policy of this.state.policies) {
             let checked = this.state.toggledPolicies[policy.id];
@@ -329,9 +316,9 @@ export const TermsAuthEntry = createReactClass({
             newToggles[policy.id] = checked;
         }
         this.setState({"toggledPolicies": newToggles});
-    },
+    }
 
-    _trySubmit: function() {
+    _trySubmit = () => {
         let allChecked = true;
         for (const policy of this.state.policies) {
             const checked = this.state.toggledPolicies[policy.id];
@@ -340,9 +327,9 @@ export const TermsAuthEntry = createReactClass({
 
         if (allChecked) this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
         else this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
-    },
+    };
 
-    render: function() {
+    render() {
         if (this.props.busy) {
             const Loader = sdk.getComponent("elements.Spinner");
             return <Loader />;
@@ -387,17 +374,13 @@ export const TermsAuthEntry = createReactClass({
                 { submitButton }
             </div>
         );
-    },
+    }
-});
+}
 
-export const EmailIdentityAuthEntry = createReactClass({
+export class EmailIdentityAuthEntry extends React.Component {
-    displayName: 'EmailIdentityAuthEntry',
+    static LOGIN_TYPE = "m.login.email.identity";
 
-    statics: {
+    static propTypes = {
-        LOGIN_TYPE: "m.login.email.identity",
-    },
-
-    propTypes: {
         matrixClient: PropTypes.object.isRequired,
         submitAuthDict: PropTypes.func.isRequired,
         authSessionId: PropTypes.string.isRequired,
@@ -407,13 +390,13 @@ export const EmailIdentityAuthEntry = createReactClass({
         fail: PropTypes.func.isRequired,
         setEmailSid: PropTypes.func.isRequired,
         onPhaseChange: PropTypes.func.isRequired,
-    },
+    };
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
-    },
+    }
 
-    render: function() {
+    render() {
         // This component is now only displayed once the token has been requested,
         // so we know the email has been sent. It can also get loaded after the user
         // has clicked the validation link if the server takes a while to propagate
@@ -434,17 +417,13 @@ export const EmailIdentityAuthEntry = createReactClass({
                 </div>
             );
         }
-    },
+    }
-});
+}
 
-export const MsisdnAuthEntry = createReactClass({
+export class MsisdnAuthEntry extends React.Component {
-    displayName: 'MsisdnAuthEntry',
+    static LOGIN_TYPE = "m.login.msisdn";
 
-    statics: {
+    static propTypes = {
-        LOGIN_TYPE: "m.login.msisdn",
-    },
-
-    propTypes: {
         inputs: PropTypes.shape({
             phoneCountry: PropTypes.string,
             phoneNumber: PropTypes.string,
@@ -454,16 +433,14 @@ export const MsisdnAuthEntry = createReactClass({
         submitAuthDict: PropTypes.func.isRequired,
         matrixClient: PropTypes.object,
         onPhaseChange: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         token: '',
         requestingToken: false,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
 
         this._submitUrl = null;
@@ -477,12 +454,12 @@ export const MsisdnAuthEntry = createReactClass({
         }).finally(() => {
             this.setState({requestingToken: false});
         });
-    },
+    }
 
     /*
      * Requests a verification token by SMS.
      */
-    _requestMsisdnToken: function() {
+    _requestMsisdnToken() {
         return this.props.matrixClient.requestRegisterMsisdnToken(
             this.props.inputs.phoneCountry,
             this.props.inputs.phoneNumber,
@@ -493,15 +470,15 @@ export const MsisdnAuthEntry = createReactClass({
             this._sid = result.sid;
             this._msisdn = result.msisdn;
         });
-    },
+    }
 
-    _onTokenChange: function(e) {
+    _onTokenChange = e => {
         this.setState({
             token: e.target.value,
         });
-    },
+    };
 
-    _onFormSubmit: async function(e) {
+    _onFormSubmit = async e => {
         e.preventDefault();
         if (this.state.token == '') return;
 
@@ -552,9 +529,9 @@ export const MsisdnAuthEntry = createReactClass({
             this.props.fail(e);
             console.log("Failed to submit msisdn token");
         }
-    },
+    };
 
-    render: function() {
+    render() {
         if (this.state.requestingToken) {
             const Loader = sdk.getComponent("elements.Spinner");
             return <Loader />;
@@ -598,8 +575,8 @@ export const MsisdnAuthEntry = createReactClass({
                 </div>
             );
         }
-    },
+    }
-});
+}
 
 export class SSOAuthEntry extends React.Component {
     static propTypes = {
@@ -686,46 +663,46 @@ export class SSOAuthEntry extends React.Component {
     }
 }
 
-export const FallbackAuthEntry = createReactClass({
+export class FallbackAuthEntry extends React.Component {
-    displayName: 'FallbackAuthEntry',
+    static propTypes = {
-
-    propTypes: {
         matrixClient: PropTypes.object.isRequired,
         authSessionId: PropTypes.string.isRequired,
         loginType: PropTypes.string.isRequired,
         submitAuthDict: PropTypes.func.isRequired,
         errorText: PropTypes.string,
         onPhaseChange: PropTypes.func.isRequired,
-    },
+    };
 
-    componentDidMount: function() {
+    constructor(props) {
-        this.props.onPhaseChange(DEFAULT_PHASE);
+        super(props);
-    },
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         // 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();
-    },
+    }
 
-    componentWillUnmount: function() {
+
+    componentDidMount() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
+    }
+
+    componentWillUnmount() {
         window.removeEventListener("message", this._onReceiveMessage);
         if (this._popupWindow) {
             this._popupWindow.close();
         }
-    },
+    }
 
-    focus: function() {
+    focus = () => {
         if (this._fallbackButton.current) {
             this._fallbackButton.current.focus();
         }
-    },
+    };
 
-    _onShowFallbackClick: function(e) {
+    _onShowFallbackClick = e => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -735,18 +712,18 @@ export const FallbackAuthEntry = createReactClass({
         );
         this._popupWindow = window.open(url);
         this._popupWindow.opener = null;
-    },
+    };
 
-    _onReceiveMessage: function(event) {
+    _onReceiveMessage = event => {
         if (
             event.data === "authDone" &&
             event.origin === this.props.matrixClient.getHomeserverUrl()
         ) {
             this.props.submitAuthDict({});
         }
-    },
+    };
 
-    render: function() {
+    render() {
         let errorSection;
         if (this.props.errorText) {
             errorSection = (
@@ -761,8 +738,8 @@ export const FallbackAuthEntry = createReactClass({
                 {errorSection}
             </div>
         );
-    },
+    }
-});
+}
 
 const AuthEntryComponents = [
     PasswordAuthEntry,

src/components/views/auth/RegistrationForm.js

@@ -18,7 +18,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import * as Email from '../../../email';
@@ -39,13 +38,11 @@ const FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
 
 const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
 
-/**
+/*
  * A pure UI component which displays a registration form.
  */
-export default createReactClass({
+export default class RegistrationForm extends React.Component {
-    displayName: 'RegistrationForm',
+    static propTypes = {
-
-    propTypes: {
         // Values pre-filled in the input boxes when the component loads
         defaultEmail: PropTypes.string,
         defaultPhoneCountry: PropTypes.string,
@@ -58,17 +55,17 @@ export default createReactClass({
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
         canSubmit: PropTypes.bool,
         serverRequiresIdServer: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         onValidationChange: console.error,
         canSubmit: true,
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this.state = {
             // Field error codes by field ID
             fieldValid: {},
             // The ISO2 country code selected in the phone number entry
@@ -80,9 +77,9 @@ export default createReactClass({
             passwordConfirm: this.props.defaultPassword || "",
             passwordComplexity: null,
         };
-    },
+    }
 
-    onSubmit: async function(ev) {
+    onSubmit = async ev => {
         ev.preventDefault();
 
         if (!this.props.canSubmit) return;
@@ -118,7 +115,7 @@ export default createReactClass({
                 title: _t("Warning!"),
                 description: desc,
                 button: _t("Continue"),
-                onFinished: function(confirmed) {
+                onFinished(confirmed) {
                     if (confirmed) {
                         self._doSubmit(ev);
                     }
@@ -127,9 +124,9 @@ export default createReactClass({
         } else {
             self._doSubmit(ev);
         }
-    },
+    };
 
-    _doSubmit: function(ev) {
+    _doSubmit(ev) {
         const email = this.state.email.trim();
         const promise = this.props.onRegisterClick({
             username: this.state.username.trim(),
@@ -145,7 +142,7 @@ export default createReactClass({
                 ev.target.disabled = false;
             });
         }
-    },
+    }
 
     async verifyFieldsBeforeSubmit() {
         // Blur the active element if any, so we first run its blur validation,
@@ -196,12 +193,12 @@ export default createReactClass({
         invalidField.focus();
         invalidField.validate({ allowEmpty: false, focused: true });
         return false;
-    },
+    }
 
     /**
      * @returns {boolean} true if all fields were valid last time they were validated.
      */
-    allFieldsValid: function() {
+    allFieldsValid() {
         const keys = Object.keys(this.state.fieldValid);
         for (let i = 0; i < keys.length; ++i) {
             if (!this.state.fieldValid[keys[i]]) {
@@ -209,7 +206,7 @@ export default createReactClass({
             }
         }
         return true;
-    },
+    }
 
     findFirstInvalidField(fieldIDs) {
         for (const fieldID of fieldIDs) {
@@ -218,34 +215,34 @@ export default createReactClass({
             }
         }
         return null;
-    },
+    }
 
-    markFieldValid: function(fieldID, valid) {
+    markFieldValid(fieldID, valid) {
         const { fieldValid } = this.state;
         fieldValid[fieldID] = valid;
         this.setState({
             fieldValid,
         });
-    },
+    }
 
-    onEmailChange(ev) {
+    onEmailChange = ev => {
         this.setState({
             email: ev.target.value,
         });
-    },
+    };
 
-    async onEmailValidate(fieldState) {
+    onEmailValidate = async fieldState => {
         const result = await this.validateEmailRules(fieldState);
         this.markFieldValid(FIELD_EMAIL, result.valid);
         return result;
-    },
+    };
 
-    validateEmailRules: withValidation({
+    validateEmailRules = withValidation({
         description: () => _t("Use an email address to recover your account"),
         rules: [
             {
                 key: "required",
-                test: function({ value, allowEmpty }) {
+                test({ value, allowEmpty }) {
                     return allowEmpty || !this._authStepIsRequired('m.login.email.identity') || !!value;
                 },
                 invalid: () => _t("Enter email address (required on this homeserver)"),
@@ -256,31 +253,31 @@ export default createReactClass({
                 invalid: () => _t("Doesn't look like a valid email address"),
             },
         ],
-    }),
+    });
 
-    onPasswordChange(ev) {
+    onPasswordChange = ev => {
         this.setState({
             password: ev.target.value,
         });
-    },
+    };
 
-    onPasswordValidate(result) {
+    onPasswordValidate = result => {
         this.markFieldValid(FIELD_PASSWORD, result.valid);
-    },
+    };
 
-    onPasswordConfirmChange(ev) {
+    onPasswordConfirmChange = ev => {
         this.setState({
             passwordConfirm: ev.target.value,
         });
-    },
+    };
 
-    async onPasswordConfirmValidate(fieldState) {
+    onPasswordConfirmValidate = async fieldState => {
         const result = await this.validatePasswordConfirmRules(fieldState);
         this.markFieldValid(FIELD_PASSWORD_CONFIRM, result.valid);
         return result;
-    },
+    };
 
-    validatePasswordConfirmRules: withValidation({
+    validatePasswordConfirmRules = withValidation({
         rules: [
             {
                 key: "required",
@@ -289,39 +286,39 @@ export default createReactClass({
             },
             {
                 key: "match",
-                test: function({ value }) {
+                test({ value }) {
                     return !value || value === this.state.password;
                 },
                 invalid: () => _t("Passwords don't match"),
             },
          ],
-    }),
+    });
 
-    onPhoneCountryChange(newVal) {
+    onPhoneCountryChange = newVal => {
         this.setState({
             phoneCountry: newVal.iso2,
             phonePrefix: newVal.prefix,
         });
-    },
+    };
 
-    onPhoneNumberChange(ev) {
+    onPhoneNumberChange = ev => {
         this.setState({
             phoneNumber: ev.target.value,
         });
-    },
+    };
 
-    async onPhoneNumberValidate(fieldState) {
+    onPhoneNumberValidate = async fieldState => {
         const result = await this.validatePhoneNumberRules(fieldState);
         this.markFieldValid(FIELD_PHONE_NUMBER, result.valid);
         return result;
-    },
+    };
 
-    validatePhoneNumberRules: withValidation({
+    validatePhoneNumberRules = withValidation({
         description: () => _t("Other users can invite you to rooms using your contact details"),
         rules: [
             {
                 key: "required",
-                test: function({ value, allowEmpty }) {
+                test({ value, allowEmpty }) {
                     return allowEmpty || !this._authStepIsRequired('m.login.msisdn') || !!value;
                 },
                 invalid: () => _t("Enter phone number (required on this homeserver)"),
@@ -332,21 +329,21 @@ export default createReactClass({
                 invalid: () => _t("Doesn't look like a valid phone number"),
             },
         ],
-    }),
+    });
 
-    onUsernameChange(ev) {
+    onUsernameChange = ev => {
         this.setState({
             username: ev.target.value,
         });
-    },
+    };
 
-    async onUsernameValidate(fieldState) {
+    onUsernameValidate = async fieldState => {
         const result = await this.validateUsernameRules(fieldState);
         this.markFieldValid(FIELD_USERNAME, result.valid);
         return result;
-    },
+    };
 
-    validateUsernameRules: withValidation({
+    validateUsernameRules = withValidation({
         description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
         rules: [
             {
@@ -360,7 +357,7 @@ export default createReactClass({
                 invalid: () => _t("Some characters not allowed"),
             },
         ],
-    }),
+    });
 
     /**
      * A step is required if all flows include that step.
@@ -372,7 +369,7 @@ export default createReactClass({
         return this.props.flows.every((flow) => {
             return flow.stages.includes(step);
         });
-    },
+    }
 
     /**
      * A step is used if any flows include that step.
@@ -384,7 +381,7 @@ export default createReactClass({
         return this.props.flows.some((flow) => {
             return flow.stages.includes(step);
         });
-    },
+    }
 
     _showEmail() {
         const haveIs = Boolean(this.props.serverConfig.isUrl);
@@ -395,7 +392,7 @@ export default createReactClass({
             return false;
         }
         return true;
-    },
+    }
 
     _showPhoneNumber() {
         const threePidLogin = !SdkConfig.get().disable_3pid_login;
@@ -408,7 +405,7 @@ export default createReactClass({
             return false;
         }
         return true;
-    },
+    }
 
     renderEmail() {
         if (!this._showEmail()) {
@@ -426,7 +423,7 @@ export default createReactClass({
             onChange={this.onEmailChange}
             onValidate={this.onEmailValidate}
         />;
-    },
+    }
 
     renderPassword() {
         return <PassphraseField
@@ -437,7 +434,7 @@ export default createReactClass({
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}
         />;
-    },
+    }
 
     renderPasswordConfirm() {
         const Field = sdk.getComponent('elements.Field');
@@ -451,7 +448,7 @@ export default createReactClass({
             onChange={this.onPasswordConfirmChange}
             onValidate={this.onPasswordConfirmValidate}
         />;
-    },
+    }
 
     renderPhoneNumber() {
         if (!this._showPhoneNumber()) {
@@ -477,7 +474,7 @@ export default createReactClass({
             onChange={this.onPhoneNumberChange}
             onValidate={this.onPhoneNumberValidate}
         />;
-    },
+    }
 
     renderUsername() {
         const Field = sdk.getComponent('elements.Field');
@@ -491,9 +488,9 @@ export default createReactClass({
             onChange={this.onUsernameChange}
             onValidate={this.onUsernameValidate}
         />;
-    },
+    }
 
-    render: function() {
+    render() {
         let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
             serverName: this.props.serverConfig.hsName,
         });
@@ -578,5 +575,5 @@ export default createReactClass({
                 </form>
             </div>
         );
-    },
+    }
-});
+}

src/components/views/avatars/MemberAvatar.tsx

@@ -16,23 +16,24 @@ limitations under the License.
 */
 
 import React from 'react';
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+
 import dis from "../../../dispatcher/dispatcher";
 import {Action} from "../../../dispatcher/actions";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import BaseAvatar from "./BaseAvatar";
 
 interface IProps {
-    // TODO: replace with correct type
+    member: RoomMember;
-    member: any;
+    fallbackUserId?: string;
-    fallbackUserId: string;
     width: number;
     height: number;
-    resizeMethod: string;
+    resizeMethod?: string;
     // The onClick to give the avatar
-    onClick: React.MouseEventHandler;
+    onClick?: React.MouseEventHandler;
     // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
-    viewUserOnClick: boolean;
+    viewUserOnClick?: boolean;
-    title: string;
+    title?: string;
 }
 
 interface IState {

src/components/views/context_menus/MessageContextMenu.js

@@ -19,7 +19,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import {EventStatus} from 'matrix-js-sdk';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -37,10 +36,8 @@ function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
-export default createReactClass({
+export default class MessageContextMenu extends React.Component {
-    displayName: 'MessageContextMenu',
+    static propTypes = {
-
-    propTypes: {
         /* the MatrixEvent associated with the context menu */
         mxEvent: PropTypes.object.isRequired,
 
@@ -52,28 +49,26 @@ export default createReactClass({
 
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         canRedact: false,
         canPin: false,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
         this._checkPermissions();
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener('RoomMember.powerLevel', this._checkPermissions);
         }
-    },
+    }
 
-    _checkPermissions: function() {
+    _checkPermissions = () => {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.mxEvent.getRoomId());
 
@@ -84,47 +79,47 @@ export default createReactClass({
         if (!SettingsStore.getValue("feature_pinning")) canPin = false;
 
         this.setState({canRedact, canPin});
-    },
+    };
 
-    _isPinned: function() {
+    _isPinned() {
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
         if (!pinnedEvent) return false;
         const content = pinnedEvent.getContent();
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
-    },
+    }
 
-    onResendClick: function() {
+    onResendClick = () => {
         Resend.resend(this.props.mxEvent);
         this.closeMenu();
-    },
+    };
 
-    onResendEditClick: function() {
+    onResendEditClick = () => {
         Resend.resend(this.props.mxEvent.replacingEvent());
         this.closeMenu();
-    },
+    };
 
-    onResendRedactionClick: function() {
+    onResendRedactionClick = () => {
         Resend.resend(this.props.mxEvent.localRedactionEvent());
         this.closeMenu();
-    },
+    };
 
-    onResendReactionsClick: function() {
+    onResendReactionsClick = () => {
         for (const reaction of this._getUnsentReactions()) {
             Resend.resend(reaction);
         }
         this.closeMenu();
-    },
+    };
 
-    onReportEventClick: function() {
+    onReportEventClick = () => {
         const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
         Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
             mxEvent: this.props.mxEvent,
         }, 'mx_Dialog_reportEvent');
         this.closeMenu();
-    },
+    };
 
-    onViewSourceClick: function() {
+    onViewSourceClick = () => {
         const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
@@ -133,9 +128,9 @@ export default createReactClass({
             content: ev.event,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
-    },
+    };
 
-    onViewClearSourceClick: function() {
+    onViewClearSourceClick = () => {
         const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
@@ -145,9 +140,9 @@ export default createReactClass({
             content: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
-    },
+    };
 
-    onRedactClick: function() {
+    onRedactClick = () => {
         const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
         Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
             onFinished: async (proceed) => {
@@ -176,9 +171,9 @@ export default createReactClass({
             },
         }, 'mx_Dialog_confirmredact');
         this.closeMenu();
-    },
+    };
 
-    onCancelSendClick: function() {
+    onCancelSendClick = () => {
         const mxEvent = this.props.mxEvent;
         const editEvent = mxEvent.replacingEvent();
         const redactEvent = mxEvent.localRedactionEvent();
@@ -199,17 +194,17 @@ export default createReactClass({
             Resend.removeFromQueue(this.props.mxEvent);
         }
         this.closeMenu();
-    },
+    };
 
-    onForwardClick: function() {
+    onForwardClick = () => {
         dis.dispatch({
             action: 'forward_event',
             event: this.props.mxEvent,
         });
         this.closeMenu();
-    },
+    };
 
-    onPinClick: function() {
+    onPinClick = () => {
         MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
             .catch((e) => {
                 // Intercept the Event Not Found error and fall through the promise chain with no event.
@@ -230,28 +225,28 @@ export default createReactClass({
                 cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
             });
         this.closeMenu();
-    },
+    };
 
-    closeMenu: function() {
+    closeMenu = () => {
         if (this.props.onFinished) this.props.onFinished();
-    },
+    };
 
-    onUnhidePreviewClick: function() {
+    onUnhidePreviewClick = () => {
         if (this.props.eventTileOps) {
             this.props.eventTileOps.unhideWidget();
         }
         this.closeMenu();
-    },
+    };
 
-    onQuoteClick: function() {
+    onQuoteClick = () => {
         dis.dispatch({
             action: 'quote',
             event: this.props.mxEvent,
         });
         this.closeMenu();
-    },
+    };
 
-    onPermalinkClick: function(e: Event) {
+    onPermalinkClick = (e: Event) => {
         e.preventDefault();
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
@@ -259,12 +254,12 @@ export default createReactClass({
             permalinkCreator: this.props.permalinkCreator,
         });
         this.closeMenu();
-    },
+    };
 
-    onCollapseReplyThreadClick: function() {
+    onCollapseReplyThreadClick = () => {
         this.props.collapseReplyThread();
         this.closeMenu();
-    },
+    };
 
     _getReactions(filter) {
         const cli = MatrixClientPeg.get();
@@ -277,17 +272,17 @@ export default createReactClass({
                 relation.event_id === eventId &&
                 filter(e);
         });
-    },
+    }
 
     _getPendingReactions() {
         return this._getReactions(e => canCancel(e.status));
-    },
+    }
 
     _getUnsentReactions() {
         return this._getReactions(e => e.status === EventStatus.NOT_SENT);
-    },
+    }
 
-    render: function() {
+    render() {
         const cli = MatrixClientPeg.get();
         const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
@@ -489,5 +484,5 @@ export default createReactClass({
                 { reportEventButton }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/AddressPickerDialog.js

@@ -19,7 +19,6 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 
 import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
@@ -45,10 +44,8 @@ const addressTypeName = {
 };
 
 
-export default createReactClass({
+export default class AddressPickerDialog extends React.Component {
-    displayName: "AddressPickerDialog",
+    static propTypes = {
-
-    propTypes: {
         title: PropTypes.string.isRequired,
         description: PropTypes.node,
         // Extra node inserted after picker input, dropdown and errors
@@ -66,26 +63,28 @@ export default createReactClass({
         // Whether the current user should be included in the addresses returned. Only
         // applicable when pickerType is `user`. Default: false.
         includeSelf: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         value: "",
         focus: true,
         validAddressTypes: addressTypes,
         pickerType: 'user',
         includeSelf: false,
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
+        super(props);
+
+        this._textinput = createRef();
+
         let validAddressTypes = this.props.validAddressTypes;
         // Remove email from validAddressTypes if no IS is configured. It may be added at a later stage by the user
         if (!MatrixClientPeg.get().getIdentityServerUrl() && validAddressTypes.includes("email")) {
             validAddressTypes = validAddressTypes.filter(type => type !== "email");
         }
 
-        return {
+        this.state = {
             // Whether to show an error message because of an invalid address
             invalidAddressError: false,
             // List of UserAddressType objects representing
@@ -106,19 +105,14 @@ export default createReactClass({
             // dialog is open and represents the supported list of address types at this time.
             validAddressTypes,
         };
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    componentDidMount() {
-    UNSAFE_componentWillMount: function() {
-        this._textinput = createRef();
-    },
-
-    componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
             this._textinput.current.value = this.props.value;
         }
-    },
+    }
 
     getPlaceholder() {
         const { placeholder } = this.props;
@@ -127,9 +121,9 @@ export default createReactClass({
         }
         // Otherwise it's a function, as checked by prop types.
         return placeholder(this.state.validAddressTypes);
-    },
+    }
 
-    onButtonClick: function() {
+    onButtonClick = () => {
         let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
         // If there is and it's valid add it to the local selectedList
@@ -138,13 +132,13 @@ export default createReactClass({
             if (selectedList === null) return;
         }
         this.props.onFinished(true, selectedList);
-    },
+    };
 
-    onCancel: function() {
+    onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    onKeyDown: function(e) {
+    onKeyDown = e => {
         const textInput = this._textinput.current ? this._textinput.current.value : undefined;
 
         if (e.key === Key.ESCAPE) {
@@ -181,9 +175,9 @@ export default createReactClass({
             e.preventDefault();
             this._addAddressesToList([textInput]);
         }
-    },
+    };
 
-    onQueryChanged: function(ev) {
+    onQueryChanged = ev => {
         const query = ev.target.value;
         if (this.queryChangedDebouncer) {
             clearTimeout(this.queryChangedDebouncer);
@@ -216,10 +210,9 @@ export default createReactClass({
                 searchError: null,
             });
         }
-    },
+    };
 
-    onDismissed: function(index) {
+    onDismissed = index => () => {
-        return () => {
         const selectedList = this.state.selectedList.slice();
         selectedList.splice(index, 1);
         this.setState({
@@ -229,15 +222,12 @@ export default createReactClass({
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     };
-    },
 
-    onClick: function(index) {
+    onClick = index => () => {
-        return () => {
         this.onSelected(index);
     };
-    },
 
-    onSelected: function(index) {
+    onSelected = index => {
         const selectedList = this.state.selectedList.slice();
         selectedList.push(this._getFilteredSuggestions()[index]);
         this.setState({
@@ -246,9 +236,9 @@ export default createReactClass({
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-    },
+    };
 
-    _doNaiveGroupSearch: function(query) {
+    _doNaiveGroupSearch(query) {
         const lowerCaseQuery = query.toLowerCase();
         this.setState({
             busy: true,
@@ -280,9 +270,9 @@ export default createReactClass({
                 busy: false,
             });
         });
-    },
+    }
 
-    _doNaiveGroupRoomSearch: function(query) {
+    _doNaiveGroupRoomSearch(query) {
         const lowerCaseQuery = query.toLowerCase();
         const results = [];
         GroupStore.getGroupRooms(this.props.groupId).forEach((r) => {
@@ -302,9 +292,9 @@ export default createReactClass({
         this.setState({
             busy: false,
         });
-    },
+    }
 
-    _doRoomSearch: function(query) {
+    _doRoomSearch(query) {
         const lowerCaseQuery = query.toLowerCase();
         const rooms = MatrixClientPeg.get().getRooms();
         const results = [];
@@ -359,9 +349,9 @@ export default createReactClass({
         this.setState({
             busy: false,
         });
-    },
+    }
 
-    _doUserDirectorySearch: function(query) {
+    _doUserDirectorySearch(query) {
         this.setState({
             busy: true,
             query,
@@ -393,9 +383,9 @@ export default createReactClass({
                 busy: false,
             });
         });
-    },
+    }
 
-    _doLocalSearch: function(query) {
+    _doLocalSearch(query) {
         this.setState({
             query,
             searchError: null,
@@ -417,9 +407,9 @@ export default createReactClass({
             });
         });
         this._processResults(results, query);
-    },
+    }
 
-    _processResults: function(results, query) {
+    _processResults(results, query) {
         const suggestedList = [];
         results.forEach((result) => {
             if (result.room_id) {
@@ -485,9 +475,9 @@ export default createReactClass({
         }, () => {
             if (this.addressSelector) this.addressSelector.moveSelectionTop();
         });
-    },
+    }
 
-    _addAddressesToList: function(addressTexts) {
+    _addAddressesToList(addressTexts) {
         const selectedList = this.state.selectedList.slice();
 
         let hasError = false;
@@ -529,9 +519,9 @@ export default createReactClass({
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         return hasError ? null : selectedList;
-    },
+    }
 
-    _lookupThreepid: async function(medium, address) {
+    async _lookupThreepid(medium, address) {
         let cancelled = false;
         // Note that we can't safely remove this after we're done
         // because we don't know that it's the same one, so we just
@@ -577,9 +567,9 @@ export default createReactClass({
                 searchError: _t('Something went wrong!'),
             });
         }
-    },
+    }
 
-    _getFilteredSuggestions: function() {
+    _getFilteredSuggestions() {
         // map addressType => set of addresses to avoid O(n*m) operation
         const selectedAddresses = {};
         this.state.selectedList.forEach(({address, addressType}) => {
@@ -591,17 +581,17 @@ export default createReactClass({
         return this.state.suggestedList.filter(({address, addressType}) => {
             return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
         });
-    },
+    }
 
-    _onPaste: function(e) {
+    _onPaste = e => {
         // Prevent the text being pasted into the textarea
         e.preventDefault();
         const text = e.clipboardData.getData("text");
         // Process it as a list of addresses to add instead
         this._addAddressesToList(text.split(/[\s,]+/));
-    },
+    };
 
-    onUseDefaultIdentityServerClick(e) {
+    onUseDefaultIdentityServerClick = e => {
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
@@ -612,15 +602,15 @@ export default createReactClass({
         const { validAddressTypes } = this.state;
         validAddressTypes.push('email');
         this.setState({ validAddressTypes });
-    },
+    };
 
-    onManageSettingsClick(e) {
+    onManageSettingsClick = e => {
         e.preventDefault();
         dis.fire(Action.ViewUserSettings);
         this.onCancel();
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
@@ -738,5 +728,5 @@ export default createReactClass({
                     onCancel={this.onCancel} />
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/AskInviteAnywayDialog.js

@@ -16,37 +16,36 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import {SettingLevel} from "../../../settings/SettingLevel";
 
-export default createReactClass({
+export default class AskInviteAnywayDialog extends React.Component {
-    propTypes: {
+    static propTypes = {
         unknownProfileUsers: PropTypes.array.isRequired, // [ {userId, errorText}... ]
         onInviteAnyways: PropTypes.func.isRequired,
         onGiveUp: PropTypes.func.isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    _onInviteClicked: function() {
+    _onInviteClicked = () => {
         this.props.onInviteAnyways();
         this.props.onFinished(true);
-    },
+    };
 
-    _onInviteNeverWarnClicked: function() {
+    _onInviteNeverWarnClicked = () => {
         SettingsStore.setValue("promptBeforeInviteUnknownUsers", null, SettingLevel.ACCOUNT, false);
         this.props.onInviteAnyways();
         this.props.onFinished(true);
-    },
+    };
 
-    _onGiveUpClicked: function() {
+    _onGiveUpClicked = () => {
         this.props.onGiveUp();
         this.props.onFinished(false);
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         const errorList = this.props.unknownProfileUsers
@@ -78,5 +77,5 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/BaseDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import FocusLock from 'react-focus-lock';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -28,16 +27,14 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
-/**
+/*
  * Basic container for modal dialogs.
  *
  * Includes a div for the title, and a keypress handler which cancels the
  * dialog on escape.
  */
-export default createReactClass({
+export default class BaseDialog extends React.Component {
-    displayName: 'BaseDialog',
+    static propTypes = {
-
-    propTypes: {
         // onFinished callback to call when Escape is pressed
         // Take a boolean which is true if the dialog was dismissed
         // with a positive / confirm action or false if it was
@@ -81,21 +78,20 @@ export default createReactClass({
             PropTypes.object,
             PropTypes.arrayOf(PropTypes.string),
         ]),
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         hasCancel: true,
         fixedWidth: true,
     };
-    },
 
-    // TODO: [REACT-WARNING] Move this to constructor
+    constructor(props) {
-    UNSAFE_componentWillMount() {
+        super(props);
+
         this._matrixClient = MatrixClientPeg.get();
-    },
+    }
 
-    _onKeyDown: function(e) {
+    _onKeyDown = (e) => {
         if (this.props.onKeyDown) {
             this.props.onKeyDown(e);
         }
@@ -104,13 +100,13 @@ export default createReactClass({
             e.preventDefault();
             this.props.onFinished(false);
         }
-    },
+    };
 
-    _onCancelClick: function(e) {
+    _onCancelClick = (e) => {
         this.props.onFinished(false);
-    },
+    };
 
-    render: function() {
+    render() {
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = (
@@ -161,5 +157,5 @@ export default createReactClass({
                 </FocusLock>
             </MatrixClientContext.Provider>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -15,17 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 /*
  * A dialog for confirming a redaction.
  */
-export default createReactClass({
+export default class ConfirmRedactDialog extends React.Component {
-    displayName: 'ConfirmRedactDialog',
+    render() {
-
-    render: function() {
         const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
         return (
             <QuestionDialog onFinished={this.props.onFinished}
@@ -36,5 +33,5 @@ export default createReactClass({
                 button={_t("Remove")}>
             </QuestionDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
 import * as sdk from '../../../index';
@@ -30,9 +29,8 @@ import { GroupMemberType } from '../../../groups';
  * to make it obvious what is going to happen.
  * Also tweaks the style for 'dangerous' actions (albeit only with colour)
  */
-export default createReactClass({
+export default class ConfirmUserActionDialog extends React.Component {
-    displayName: 'ConfirmUserActionDialog',
+    static propTypes = {
-    propTypes: {
         // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
         member: PropTypes.object,
         // group member object. Supply either this or 'member'
@@ -48,35 +46,36 @@ export default createReactClass({
         askReason: PropTypes.bool,
         danger: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    getDefaultProps: () => ({
+    static defaultProps = {
         danger: false,
         askReason: false,
-    }),
+    };
+
+    constructor(props) {
+        super(props);
 
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount: function() {
         this._reasonField = null;
-    },
+    }
 
-    onOk: function() {
+    onOk = () => {
         let reason;
         if (this._reasonField) {
             reason = this._reasonField.value;
         }
         this.props.onFinished(true, reason);
-    },
+    };
 
-    onCancel: function() {
+    onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    _collectReasonField: function(e) {
+    _collectReasonField = e => {
         this._reasonField = e;
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
@@ -134,5 +133,5 @@ export default createReactClass({
                     onCancel={this.onCancel} />
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/CreateGroupDialog.js

@@ -15,46 +15,42 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 
-export default createReactClass({
+export default class CreateGroupDialog extends React.Component {
-    displayName: 'CreateGroupDialog',
+    static propTypes = {
-    propTypes: {
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         groupName: '',
         groupId: '',
         groupError: null,
         creating: false,
         createError: null,
     };
-    },
 
-    _onGroupNameChange: function(e) {
+    _onGroupNameChange = e => {
         this.setState({
             groupName: e.target.value,
         });
-    },
+    };
 
-    _onGroupIdChange: function(e) {
+    _onGroupIdChange = e => {
         this.setState({
             groupId: e.target.value,
         });
-    },
+    };
 
-    _onGroupIdBlur: function(e) {
+    _onGroupIdBlur = e => {
         this._checkGroupId();
-    },
+    };
 
-    _checkGroupId: function(e) {
+    _checkGroupId(e) {
         let error = null;
         if (!this.state.groupId) {
             error = _t("Community IDs cannot be empty.");
@@ -67,9 +63,9 @@ export default createReactClass({
             createError: null,
         });
         return error;
-    },
+    }
 
-    _onFormSubmit: function(e) {
+    _onFormSubmit = e => {
         e.preventDefault();
 
         if (this._checkGroupId()) return;
@@ -94,13 +90,13 @@ export default createReactClass({
         }).finally(() => {
             this.setState({creating: false});
         });
-    },
+    };
 
-    _onCancel: function() {
+    _onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Spinner = sdk.getComponent('elements.Spinner');
 
@@ -171,5 +167,5 @@ export default createReactClass({
                 </form>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/CreateRoomDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
@@ -25,19 +24,19 @@ import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
 import {privateShouldBeEncrypted} from "../../../createRoom";
-import TagOrderStore from "../../../stores/TagOrderStore";
+import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
-import GroupStore from "../../../stores/GroupStore";
 
-export default createReactClass({
+export default class CreateRoomDialog extends React.Component {
-    displayName: 'CreateRoomDialog',
+    static propTypes = {
-    propTypes: {
         onFinished: PropTypes.func.isRequired,
         defaultPublic: PropTypes.bool,
-    },
+    };
+
+    constructor(props) {
+        super(props);
 
-    getInitialState() {
         const config = SdkConfig.get();
-        return {
+        this.state = {
             isPublic: this.props.defaultPublic || false,
             isEncrypted: privateShouldBeEncrypted(),
             name: "",
@@ -47,7 +46,7 @@ export default createReactClass({
             noFederate: config.default_federate === false,
             nameIsValid: false,
         };
-    },
+    }
 
     _roomCreateOptions() {
         const opts = {};
@@ -72,32 +71,32 @@ export default createReactClass({
             opts.encryption = this.state.isEncrypted;
         }
 
-        if (TagOrderStore.getSelectedPrototypeTag()) {
+        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            opts.associatedWithCommunity = TagOrderStore.getSelectedPrototypeTag();
+            opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
         }
 
         return opts;
-    },
+    }
 
     componentDidMount() {
         this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
         // move focus to first field when showing dialog
         this._nameFieldRef.focus();
-    },
+    }
 
     componentWillUnmount() {
         this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
-    },
+    }
 
-    _onKeyDown: function(event) {
+    _onKeyDown = event => {
         if (event.key === Key.ENTER) {
             this.onOk();
             event.preventDefault();
             event.stopPropagation();
         }
-    },
+    };
 
-    onOk: async function() {
+    onOk = async () => {
         const activeElement = document.activeElement;
         if (activeElement) {
             activeElement.blur();
@@ -123,51 +122,51 @@ export default createReactClass({
                 field.validate({ allowEmpty: false, focused: true });
             }
         }
-    },
+    };
 
-    onCancel: function() {
+    onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    onNameChange(ev) {
+    onNameChange = ev => {
         this.setState({name: ev.target.value});
-    },
+    };
 
-    onTopicChange(ev) {
+    onTopicChange = ev => {
         this.setState({topic: ev.target.value});
-    },
+    };
 
-    onPublicChange(isPublic) {
+    onPublicChange = isPublic => {
         this.setState({isPublic});
-    },
+    };
 
-    onEncryptedChange(isEncrypted) {
+    onEncryptedChange = isEncrypted => {
         this.setState({isEncrypted});
-    },
+    };
 
-    onAliasChange(alias) {
+    onAliasChange = alias => {
         this.setState({alias});
-    },
+    };
 
-    onDetailsToggled(ev) {
+    onDetailsToggled = ev => {
         this.setState({detailsOpen: ev.target.open});
-    },
+    };
 
-    onNoFederateChange(noFederate) {
+    onNoFederateChange = noFederate => {
         this.setState({noFederate});
-    },
+    };
 
-    collectDetailsRef(ref) {
+    collectDetailsRef = ref => {
         this._detailsRef = ref;
-    },
+    };
 
-    async onNameValidate(fieldState) {
+    onNameValidate = async fieldState => {
-        const result = await this._validateRoomName(fieldState);
+        const result = await CreateRoomDialog._validateRoomName(fieldState);
         this.setState({nameIsValid: result.valid});
         return result;
-    },
+    };
 
-    _validateRoomName: withValidation({
+    static _validateRoomName = withValidation({
         rules: [
             {
                 key: "required",
@@ -175,9 +174,9 @@ export default createReactClass({
                 invalid: () => _t("Please enter a name for the room"),
             },
         ],
-    }),
+    });
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const Field = sdk.getComponent('views.elements.Field');
@@ -198,7 +197,7 @@ export default createReactClass({
             "Private rooms can be found and joined by invitation only. Public rooms can be " +
             "found and joined by anyone.",
         )}</p>;
-        if (TagOrderStore.getSelectedPrototypeTag()) {
+        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
             publicPrivateLabel = <p>{_t(
                 "Private rooms can be found and joined by invitation only. Public rooms can be " +
                 "found and joined by anyone in this community.",
@@ -239,9 +238,8 @@ export default createReactClass({
         }
 
         let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
-        if (TagOrderStore.getSelectedPrototypeTag()) {
+        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            const summary = GroupStore.getSummary(TagOrderStore.getSelectedPrototypeTag());
+            const name = CommunityPrototypeStore.instance.getSelectedCommunityName();
-            const name = summary?.profile?.name || TagOrderStore.getSelectedPrototypeTag();
             title = _t("Create a room in %(communityName)s", {communityName: name});
         }
         return (
@@ -275,5 +273,5 @@ export default createReactClass({
                     onCancel={this.onCancel} />
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/EditCommunityPrototypeDialog.tsx

@@ -0,0 +1,167 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ChangeEvent } from 'react';
+import BaseDialog from "./BaseDialog";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
+import FlairStore from "../../../stores/FlairStore";
+
+interface IProps extends IDialogProps {
+    communityId: string;
+}
+
+interface IState {
+    name: string;
+    error: string;
+    busy: boolean;
+    currentAvatarUrl: string;
+    avatarFile: File;
+    avatarPreview: string;
+}
+
+// XXX: This is a lot of duplication from the create dialog, just in a different shape
+export default class EditCommunityPrototypeDialog extends React.PureComponent<IProps, IState> {
+    private avatarUploadRef: React.RefObject<HTMLInputElement> = React.createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        const profile = CommunityPrototypeStore.instance.getCommunityProfile(props.communityId);
+
+        this.state = {
+            name: profile?.name || "",
+            error: null,
+            busy: false,
+            avatarFile: null,
+            avatarPreview: null,
+            currentAvatarUrl: profile?.avatarUrl,
+        };
+    }
+
+    private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({name: ev.target.value});
+    };
+
+    private onSubmit = async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if (this.state.busy) return;
+
+        // We'll create the community now to see if it's taken, leaving it active in
+        // the background for the user to look at while they invite people.
+        this.setState({busy: true});
+        try {
+            let avatarUrl = this.state.currentAvatarUrl || ""; // must be a string for synapse to accept it
+            if (this.state.avatarFile) {
+                avatarUrl = await MatrixClientPeg.get().uploadContent(this.state.avatarFile);
+            }
+
+            await MatrixClientPeg.get().setGroupProfile(this.props.communityId, {
+                name: this.state.name,
+                avatar_url: avatarUrl,
+            });
+
+            // ask the flair store to update the profile too
+            await FlairStore.refreshGroupProfile(MatrixClientPeg.get(), this.props.communityId);
+
+            // we did it, so close the dialog
+            this.props.onFinished(true);
+        } catch (e) {
+            console.error(e);
+            this.setState({
+                busy: false,
+                error: _t("There was an error updating your community. The server is unable to process your request."),
+            });
+        }
+    };
+
+    private onAvatarChanged = (e: ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files || !e.target.files.length) {
+            this.setState({avatarFile: null});
+        } else {
+            this.setState({busy: true});
+            const file = e.target.files[0];
+            const reader = new FileReader();
+            reader.onload = (ev: ProgressEvent<FileReader>) => {
+                this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
+    private onChangeAvatar = () => {
+        if (this.avatarUploadRef.current) this.avatarUploadRef.current.click();
+    };
+
+    public render() {
+        let preview = <img src={this.state.avatarPreview} className="mx_EditCommunityPrototypeDialog_avatar" />;
+        if (!this.state.avatarPreview) {
+            if (this.state.currentAvatarUrl) {
+                const url = MatrixClientPeg.get().mxcUrlToHttp(this.state.currentAvatarUrl);
+                preview = <img src={url} className="mx_EditCommunityPrototypeDialog_avatar" />;
+            } else {
+                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />
+            }
+        }
+
+        return (
+            <BaseDialog
+                className="mx_EditCommunityPrototypeDialog"
+                onFinished={this.props.onFinished}
+                title={_t("Update community")}
+            >
+                <form onSubmit={this.onSubmit}>
+                    <div className="mx_Dialog_content">
+                        <div className="mx_EditCommunityPrototypeDialog_rowName">
+                            <Field
+                                value={this.state.name}
+                                onChange={this.onNameChange}
+                                placeholder={_t("Enter name")}
+                                label={_t("Enter name")}
+                            />
+                        </div>
+                        <div className="mx_EditCommunityPrototypeDialog_rowAvatar">
+                            <input
+                                type="file" style={{display: "none"}}
+                                ref={this.avatarUploadRef} accept="image/*"
+                                onChange={this.onAvatarChanged}
+                            />
+                            <AccessibleButton
+                                onClick={this.onChangeAvatar}
+                                className="mx_EditCommunityPrototypeDialog_avatarContainer"
+                            >{preview}</AccessibleButton>
+                            <div className="mx_EditCommunityPrototypeDialog_tip">
+                                <b>{_t("Add image (optional)")}</b>
+                                <span>
+                                    {_t("An image will help people identify your community.")}
+                                </span>
+                            </div>
+                        </div>
+                        <AccessibleButton kind="primary" onClick={this.onSubmit} disabled={this.state.busy}>
+                            {_t("Save")}
+                        </AccessibleButton>
+                    </div>
+                </form>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/ErrorDialog.js

@@ -26,14 +26,12 @@ limitations under the License.
  */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
-export default createReactClass({
+export default class ErrorDialog extends React.Component {
-    displayName: 'ErrorDialog',
+    static propTypes = {
-    propTypes: {
         title: PropTypes.string,
         description: PropTypes.oneOfType([
             PropTypes.element,
@@ -43,18 +41,16 @@ export default createReactClass({
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
         headerImage: PropTypes.string,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         focus: true,
         title: null,
         description: null,
         button: null,
     };
-    },
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog
@@ -74,5 +70,5 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/InfoDialog.js

@@ -17,15 +17,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
 
-export default createReactClass({
+export default class InfoDialog extends React.Component {
-    displayName: 'InfoDialog',
+    static propTypes = {
-    propTypes: {
         className: PropTypes.string,
         title: PropTypes.string,
         description: PropTypes.node,
@@ -33,21 +31,19 @@ export default createReactClass({
         onFinished: PropTypes.func,
         hasCloseButton: PropTypes.bool,
         onKeyDown: PropTypes.func,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         title: '',
         description: '',
         hasCloseButton: false,
     };
-    },
 
-    onFinished: function() {
+    onFinished = () => {
         this.props.onFinished();
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
@@ -69,5 +65,5 @@ export default createReactClass({
                 </DialogButtons>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
@@ -27,10 +26,8 @@ import AccessibleButton from '../elements/AccessibleButton';
 import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
-export default createReactClass({
+export default class InteractiveAuthDialog extends React.Component {
-    displayName: 'InteractiveAuthDialog',
+    static propTypes = {
-
-    propTypes: {
         // matrix client to use for UI auth requests
         matrixClient: PropTypes.object.isRequired,
 
@@ -70,19 +67,17 @@ export default createReactClass({
         //
         // Default is defined in _getDefaultDialogAesthetics()
         aestheticsForStagePhases: PropTypes.object,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         authError: null,
 
         // See _onUpdateStagePhase()
         uiaStage: null,
         uiaStagePhase: null,
     };
-    },
 
-    _getDefaultDialogAesthetics: function() {
+    _getDefaultDialogAesthetics() {
         const ssoAesthetics = {
             [SSOAuthEntry.PHASE_PREAUTH]: {
                 title: _t("Use Single Sign On to continue"),
@@ -102,9 +97,9 @@ export default createReactClass({
             [SSOAuthEntry.LOGIN_TYPE]: ssoAesthetics,
             [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: ssoAesthetics,
         };
-    },
+    }
 
-    _onAuthFinished: function(success, result) {
+    _onAuthFinished = (success, result) => {
         if (success) {
             this.props.onFinished(true, result);
         } else {
@@ -116,18 +111,18 @@ export default createReactClass({
                 });
             }
         }
-    },
+    };
 
-    _onUpdateStagePhase: function(newStage, newPhase) {
+    _onUpdateStagePhase = (newStage, newPhase) => {
         // We copy the stage and stage phase params into state for title selection in render()
         this.setState({uiaStage: newStage, uiaStagePhase: newPhase});
-    },
+    };
 
-    _onDismissClick: function() {
+    _onDismissClick = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    render: function() {
+    render() {
         const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -190,5 +185,5 @@ export default createReactClass({
                 { content }
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/InviteDialog.js

@@ -32,11 +32,12 @@ import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../../createRoom";
-import {inviteMultipleToRoom} from "../../../RoomInvite";
+import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
 import {DefaultTagID} from "../../../stores/room-list/models";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
+import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -909,12 +910,23 @@ export default class InviteDialog extends React.PureComponent {
         this.props.onFinished();
     };
 
+    _onCommunityInviteClick = (e) => {
+        this.props.onFinished();
+        showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
+    };
+
     _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 lastActive = (m) => kind === 'recents' ? m.lastActive : null;
         let sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions");
+        let sectionSubname = null;
+
+        if (kind === 'suggestions' && CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+            const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+            sectionSubname = _t("May include members not in %(communityName)s", {communityName});
+        }
 
         if (this.props.kind === KIND_INVITE) {
             sectionName = kind === 'recents' ? _t("Recently Direct Messaged") : _t("Suggestions");
@@ -993,6 +1005,7 @@ export default class InviteDialog extends React.PureComponent {
         return (
             <div className='mx_InviteDialog_section'>
                 <h3>{sectionName}</h3>
+                {sectionSubname ? <p className="mx_InviteDialog_subname">{sectionSubname}</p> : null}
                 {tiles}
                 {showMore}
             </div>
@@ -1083,6 +1096,33 @@ export default class InviteDialog extends React.PureComponent {
                     return <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>;
                 }},
             );
+            if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+                const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+                helpText = _t(
+                    "Start a conversation with someone using their name, username (like <userId/>) or email address. " +
+                    "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click " +
+                    "<a>here</a>.",
+                    {communityName}, {
+                        userId: () => {
+                            return (
+                                <a
+                                    href={makeUserPermalink(userId)}
+                                    rel="noreferrer noopener"
+                                    target="_blank"
+                                >{userId}</a>
+                            );
+                        },
+                        a: (sub) => {
+                            return (
+                                <AccessibleButton
+                                    kind="link"
+                                    onClick={this._onCommunityInviteClick}
+                                >{sub}</AccessibleButton>
+                            );
+                        },
+                    },
+                );
+            }
             buttonText = _t("Go");
             goButtonFn = this._startDm;
         } else { // KIND_INVITE

src/components/views/dialogs/QuestionDialog.js

@@ -16,14 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
-export default createReactClass({
+export default class QuestionDialog extends React.Component {
-    displayName: 'QuestionDialog',
+    static propTypes = {
-    propTypes: {
         title: PropTypes.string,
         description: PropTypes.node,
         extraButtons: PropTypes.node,
@@ -34,10 +32,9 @@ export default createReactClass({
         headerImage: PropTypes.string,
         quitOnly: PropTypes.bool, // quitOnly doesn't show the cancel button just the quit [x].
         fixedWidth: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         title: "",
         description: "",
         extraButtons: null,
@@ -46,17 +43,16 @@ export default createReactClass({
         danger: false,
         quitOnly: false,
     };
-    },
 
-    onOk: function() {
+    onOk = () => {
         this.props.onFinished(true);
-    },
+    };
 
-    onCancel: function() {
+    onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         let primaryButtonClass = "";
@@ -88,5 +84,5 @@ export default createReactClass({
                 </DialogButtons>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -15,38 +15,33 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
-export default createReactClass({
+export default class RoomUpgradeDialog extends React.Component {
-    displayName: 'RoomUpgradeDialog',
+    static propTypes = {
-
-    propTypes: {
         room: PropTypes.object.isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    componentDidMount: async function() {
+    state = {
+        busy: true,
+    };
+
+    async componentDidMount() {
         const recommended = await this.props.room.getRecommendedVersion();
         this._targetVersion = recommended.version;
         this.setState({busy: false});
-    },
+    }
 
-    getInitialState: function() {
+    _onCancelClick = () => {
-        return {
-            busy: true,
-        };
-    },
-
-    _onCancelClick: function() {
         this.props.onFinished(false);
-    },
+    };
 
-    _onUpgradeClick: function() {
+    _onUpgradeClick = () => {
         this.setState({busy: true});
         MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => {
             this.props.onFinished(true);
@@ -59,9 +54,9 @@ export default createReactClass({
         }).finally(() => {
             this.setState({busy: false});
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const Spinner = sdk.getComponent('views.elements.Spinner');
@@ -106,5 +101,5 @@ export default createReactClass({
                 {buttons}
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
@@ -25,20 +24,18 @@ import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
 
-export default createReactClass({
+export default class SessionRestoreErrorDialog extends React.Component {
-    displayName: 'SessionRestoreErrorDialog',
+    static propTypes = {
-
-    propTypes: {
         error: PropTypes.string.isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    _sendBugReport: function() {
+    _sendBugReport = () => {
         const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         Modal.createTrackedDialog('Session Restore Error', 'Send Bug Report Dialog', BugReportDialog, {});
-    },
+    };
 
-    _onClearStorageClick: function() {
+    _onClearStorageClick = () => {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Session Restore Confirm Logout', '', QuestionDialog, {
             title: _t("Sign out"),
@@ -48,15 +45,15 @@ export default createReactClass({
             danger: true,
             onFinished: this.props.onFinished,
         });
-    },
+    };
 
-    _onRefreshClick: function() {
+    _onRefreshClick = () => {
         // Is this likely to help? Probably not, but giving only one button
         // that clears your storage seems awful.
         window.location.reload(true);
-    },
+    };
 
-    render: function() {
+    render() {
         const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -110,5 +107,5 @@ export default createReactClass({
                 { dialogButtons }
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/SetEmailDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import * as Email from '../../../email';
@@ -25,31 +24,28 @@ import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 
 
-/**
+/*
  * Prompt the user to set an email address.
  *
  * On success, `onFinished(true)` is called.
  */
-export default createReactClass({
+export default class SetEmailDialog extends React.Component {
-    displayName: 'SetEmailDialog',
+    static propTypes = {
-    propTypes: {
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         emailAddress: '',
         emailBusy: false,
     };
-    },
 
-    onEmailAddressChanged: function(value) {
+    onEmailAddressChanged = value => {
         this.setState({
             emailAddress: value,
         });
-    },
+    };
 
-    onSubmit: function() {
+    onSubmit = () => {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
@@ -81,21 +77,21 @@ export default createReactClass({
             });
         });
         this.setState({emailBusy: true});
-    },
+    };
 
-    onCancelled: function() {
+    onCancelled = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    onEmailDialogFinished: function(ok) {
+    onEmailDialogFinished = ok => {
         if (ok) {
             this.verifyEmailAddress();
         } else {
             this.setState({emailBusy: false});
         }
-    },
+    };
 
-    verifyEmailAddress: function() {
+    verifyEmailAddress() {
         this._addThreepid.checkEmailLinkClicked().then(() => {
             this.props.onFinished(true);
         }, (err) => {
@@ -119,9 +115,9 @@ export default createReactClass({
                 });
             }
         });
-    },
+    }
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Spinner = sdk.getComponent('elements.Spinner');
         const EditableText = sdk.getComponent('elements.EditableText');
@@ -161,5 +157,5 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/SetMxIdDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -29,23 +28,27 @@ import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 // sending a request to the server
 const USERNAME_CHECK_DEBOUNCE_MS = 250;
 
-/**
+/*
  * Prompt the user to set a display name.
  *
  * On success, `onFinished(true, newDisplayName)` is called.
  */
-export default createReactClass({
+export default class SetMxIdDialog extends React.Component {
-    displayName: 'SetMxIdDialog',
+    static propTypes = {
-    propTypes: {
         onFinished: PropTypes.func.isRequired,
         // Called when the user requests to register with a different homeserver
         onDifferentServerClicked: PropTypes.func.isRequired,
         // Called if the user wants to switch to login instead
         onLoginClick: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this._input_value = createRef();
+        this._uiAuth = createRef();
+
+        this.state = {
             // The entered username
             username: '',
             // Indicate ongoing work on the username
@@ -60,21 +63,15 @@ export default createReactClass({
             // Indicate error with auth
             authError: '',
         };
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    componentDidMount() {
-    UNSAFE_componentWillMount: function() {
-        this._input_value = createRef();
-        this._uiAuth = createRef();
-    },
-
-    componentDidMount: function() {
         this._input_value.current.select();
 
         this._matrixClient = MatrixClientPeg.get();
-    },
+    }
 
-    onValueChange: function(ev) {
+    onValueChange = ev => {
         this.setState({
             username: ev.target.value,
             usernameBusy: true,
@@ -99,24 +96,24 @@ export default createReactClass({
                 });
             }, USERNAME_CHECK_DEBOUNCE_MS);
         });
-    },
+    };
 
-    onKeyUp: function(ev) {
+    onKeyUp = ev => {
         if (ev.key === Key.ENTER) {
             this.onSubmit();
         }
-    },
+    };
 
-    onSubmit: function(ev) {
+    onSubmit = ev => {
         if (this._uiAuth.current) {
             this._uiAuth.current.tryContinue();
         }
         this.setState({
             doingUIAuth: true,
         });
-    },
+    };
 
-    _doUsernameCheck: function() {
+    _doUsernameCheck() {
         // We do a quick check ahead of the username availability API to ensure the
         // user ID roughly looks okay from a Matrix perspective.
         if (!SAFE_LOCALPART_REGEX.test(this.state.username)) {
@@ -167,13 +164,13 @@ export default createReactClass({
                 this.setState(newState);
             },
         );
-    },
+    }
 
-    _generatePassword: function() {
+    _generatePassword() {
         return Math.random().toString(36).slice(2);
-    },
+    }
 
-    _makeRegisterRequest: function(auth) {
+    _makeRegisterRequest = auth => {
         // Not upgrading - changing mxids
         const guestAccessToken = null;
         if (!this._generatedPassword) {
@@ -187,9 +184,9 @@ export default createReactClass({
             {},
             guestAccessToken,
         );
-    },
+    };
 
-    _onUIAuthFinished: function(success, response) {
+    _onUIAuthFinished = (success, response) => {
         this.setState({
             doingUIAuth: false,
         });
@@ -207,9 +204,9 @@ export default createReactClass({
             accessToken: response.access_token,
             password: this._generatedPassword,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
 
@@ -303,5 +300,5 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/SetPasswordDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -63,32 +62,25 @@ const WarmFuzzy = function(props) {
  *
  * On success, `onFinished()` when finished
  */
-export default createReactClass({
+export default class SetPasswordDialog extends React.Component {
-    displayName: 'SetPasswordDialog',
+    static propTypes = {
-    propTypes: {
         onFinished: PropTypes.func.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         error: null,
     };
-    },
 
-    componentDidMount: function() {
+    _onPasswordChanged = res => {
-        console.info('SetPasswordDialog component did mount');
-    },
-
-    _onPasswordChanged: function(res) {
         Modal.createDialog(WarmFuzzy, {
             didSetEmail: res.didSetEmail,
             onFinished: () => {
                 this.props.onFinished();
             },
         });
-    },
+    };
 
-    _onPasswordChangeError: function(err) {
+    _onPasswordChangeError = err => {
         let errMsg = err.error || "";
         if (err.httpStatus === 403) {
             errMsg = _t('Failed to change password. Is your password correct?');
@@ -101,9 +93,9 @@ export default createReactClass({
         this.setState({
             error: errMsg,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const ChangePassword = sdk.getComponent('views.settings.ChangePassword');
 
@@ -132,5 +124,5 @@ export default createReactClass({
                 </div>
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/TextInputDialog.js

@@ -15,14 +15,12 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import Field from "../elements/Field";
 
-export default createReactClass({
+export default class TextInputDialog extends React.Component {
-    displayName: 'TextInputDialog',
+    static propTypes = {
-    propTypes: {
         title: PropTypes.string,
         description: PropTypes.oneOfType([
             PropTypes.element,
@@ -36,39 +34,36 @@ export default createReactClass({
         hasCancel: PropTypes.bool,
         validator: PropTypes.func, // result of withValidation
         fixedWidth: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         title: "",
         value: "",
         description: "",
         focus: true,
         hasCancel: true,
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this._field = createRef();
+
+        this.state = {
             value: this.props.value,
             valid: false,
         };
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    componentDidMount() {
-    UNSAFE_componentWillMount: function() {
-        this._field = createRef();
-    },
-
-    componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
             // this._field.current.value = this.props.value;
             this._field.current.focus();
         }
-    },
+    }
 
-    onOk: async function(ev) {
+    onOk = async ev => {
         ev.preventDefault();
         if (this.props.validator) {
             await this._field.current.validate({ allowEmpty: false });
@@ -80,27 +75,27 @@ export default createReactClass({
             }
         }
         this.props.onFinished(true, this.state.value);
-    },
+    };
 
-    onCancel: function() {
+    onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    onChange: function(ev) {
+    onChange = ev => {
         this.setState({
             value: ev.target.value,
         });
-    },
+    };
 
-    onValidate: async function(fieldState) {
+    onValidate = async fieldState => {
         const result = await this.props.validator(fieldState);
         this.setState({
             valid: result.valid,
         });
         return result;
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
@@ -137,5 +132,5 @@ export default createReactClass({
                 />
             </BaseDialog>
         );
-    },
+    }
-});
+}

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -21,7 +21,7 @@ import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { MatrixClient } from 'matrix-js-sdk';
 import { _t } from '../../../../languageHandler';
-import { accessSecretStorage } from '../../../../CrossSigningManager';
+import { accessSecretStorage } from '../../../../SecurityManager';
 
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { debounce } from 'lodash';
+import {debounce} from "lodash";
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from "prop-types";

src/components/views/elements/ActionButton.js

@@ -16,16 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
 
-export default createReactClass({
+export default class ActionButton extends React.Component {
-    displayName: 'RoleButton',
+    static propTypes = {
-
-    propTypes: {
         size: PropTypes.string,
         tooltip: PropTypes.bool,
         action: PropTypes.string.isRequired,
@@ -33,39 +30,35 @@ export default createReactClass({
         label: PropTypes.string.isRequired,
         iconPath: PropTypes.string,
         className: PropTypes.string,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         size: "25",
         tooltip: false,
     };
-    },
 
-    getInitialState: function() {
+    state = {
-        return {
         showTooltip: false,
     };
-    },
 
-    _onClick: function(ev) {
+    _onClick = (ev) => {
         ev.stopPropagation();
         Analytics.trackEvent('Action Button', 'click', this.props.action);
         dis.dispatch({action: this.props.action});
-    },
+    };
 
-    _onMouseEnter: function() {
+    _onMouseEnter = () => {
         if (this.props.tooltip) this.setState({showTooltip: true});
         if (this.props.mouseOverAction) {
             dis.dispatch({action: this.props.mouseOverAction});
         }
-    },
+    };
 
-    _onMouseLeave: function() {
+    _onMouseLeave = () => {
         this.setState({showTooltip: false});
-    },
+    };
 
-    render: function() {
+    render() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let tooltip;
@@ -94,5 +87,5 @@ export default createReactClass({
                 { tooltip }
             </AccessibleButton>
         );
-    },
+    }
-});
+}

src/components/views/elements/AddressSelector.js

@@ -17,15 +17,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
 
-export default createReactClass({
+export default class AddressSelector extends React.Component {
-    displayName: 'AddressSelector',
+    static propTypes = {
-
-    propTypes: {
         onSelected: PropTypes.func.isRequired,
 
         // List of the addresses to display
@@ -37,90 +34,91 @@ export default createReactClass({
 
         // Element to put as a header on top of the list
         header: PropTypes.node,
-    },
+    };
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
+
+        this.state = {
             selected: this.props.selected === undefined ? 0 : this.props.selected,
             hover: false,
         };
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(props) {
+    UNSAFE_componentWillReceiveProps(props) {
         // Make sure the selected item isn't outside the list bounds
         const selected = this.state.selected;
         const maxSelected = this._maxSelected(props.addressList);
         if (selected > maxSelected) {
             this.setState({ selected: maxSelected });
         }
-    },
+    }
 
-    componentDidUpdate: function() {
+    componentDidUpdate() {
         // As the user scrolls with the arrow keys keep the selected item
         // at the top of the window.
         if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {
             const elementHeight = this.addressListElement.getBoundingClientRect().height;
             this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
         }
-    },
+    }
 
-    moveSelectionTop: function() {
+    moveSelectionTop = () => {
         if (this.state.selected > 0) {
             this.setState({
                 selected: 0,
                 hover: false,
             });
         }
-    },
+    };
 
-    moveSelectionUp: function() {
+    moveSelectionUp = () => {
         if (this.state.selected > 0) {
             this.setState({
                 selected: this.state.selected - 1,
                 hover: false,
             });
         }
-    },
+    };
 
-    moveSelectionDown: function() {
+    moveSelectionDown = () => {
         if (this.state.selected < this._maxSelected(this.props.addressList)) {
             this.setState({
                 selected: this.state.selected + 1,
                 hover: false,
             });
         }
-    },
+    };
 
-    chooseSelection: function() {
+    chooseSelection = () => {
         this.selectAddress(this.state.selected);
-    },
+    };
 
-    onClick: function(index) {
+    onClick = index => {
         this.selectAddress(index);
-    },
+    };
 
-    onMouseEnter: function(index) {
+    onMouseEnter = index => {
         this.setState({
             selected: index,
             hover: true,
         });
-    },
+    };
 
-    onMouseLeave: function() {
+    onMouseLeave = () => {
         this.setState({ hover: false });
-    },
+    };
 
-    selectAddress: function(index) {
+    selectAddress = index => {
         // Only try to select an address if one exists
         if (this.props.addressList.length !== 0) {
             this.props.onSelected(index);
             this.setState({ hover: false });
         }
-    },
+    };
 
-    createAddressListTiles: function() {
+    createAddressListTiles() {
-        const self = this;
         const AddressTile = sdk.getComponent("elements.AddressTile");
         const maxSelected = this._maxSelected(this.props.addressList);
         const addressList = [];
@@ -157,15 +155,15 @@ export default createReactClass({
             }
         }
         return addressList;
-    },
+    }
 
-    _maxSelected: function(list) {
+    _maxSelected(list) {
         const listSize = list.length === 0 ? 0 : list.length - 1;
         const maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
         return maxSelected;
-    },
+    }
 
-    render: function() {
+    render() {
         const classes = classNames({
             "mx_AddressSelector": true,
             "mx_AddressSelector_empty": this.props.addressList.length === 0,
@@ -177,5 +175,5 @@ export default createReactClass({
                 { this.createAddressListTiles() }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/elements/AddressTile.js

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -25,25 +24,21 @@ import { _t } from '../../../languageHandler';
 import { UserAddressType } from '../../../UserAddress.js';
 
 
-export default createReactClass({
+export default class AddressTile extends React.Component {
-    displayName: 'AddressTile',
+    static propTypes = {
-
-    propTypes: {
         address: UserAddressType.isRequired,
         canDismiss: PropTypes.bool,
         onDismissed: PropTypes.func,
         justified: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         canDismiss: false,
         onDismissed: function() {}, // NOP
         justified: false,
     };
-    },
 
-    render: function() {
+    render() {
         const address = this.props.address;
         const name = address.displayName || address.address;
 
@@ -144,5 +139,5 @@ export default createReactClass({
                 { dismiss }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/elements/DialogButtons.js

@@ -18,16 +18,13 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
 /**
  * Basic container for buttons in modal dialogs.
  */
-export default createReactClass({
+export default class DialogButtons extends React.Component {
-    displayName: "DialogButtons",
+    static propTypes = {
-
-    propTypes: {
         // The primary button which is styled differently and has default focus.
         primaryButton: PropTypes.node.isRequired,
 
@@ -57,20 +54,18 @@ export default createReactClass({
 
         // disables only the primary button
         primaryDisabled: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         hasCancel: true,
         disabled: false,
     };
-    },
 
-    _onCancelClick: function() {
+    _onCancelClick = () => {
         this.props.onCancel();
-    },
+    };
 
-    render: function() {
+    render() {
         let primaryButtonClassName = "mx_Dialog_primary";
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
@@ -104,5 +99,5 @@ export default createReactClass({
                 </button>
             </div>
         );
-    },
+    }
-});
+}

src/components/views/elements/EditableText.js

@@ -17,13 +17,10 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import {Key} from "../../../Keyboard";
 
-export default createReactClass({
+export default class EditableText extends React.Component {
-    displayName: 'EditableText',
+    static propTypes = {
-
-    propTypes: {
         onValueChanged: PropTypes.func,
         initialValue: PropTypes.string,
         label: PropTypes.string,
@@ -36,16 +33,15 @@ export default createReactClass({
         // Will cause onValueChanged(value, true) to fire on blur
         blurToSubmit: PropTypes.bool,
         editable: PropTypes.bool,
-    },
+    };
 
-    Phases: {
+    static Phases = {
         Display: "display",
         Edit: "edit",
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
+        onValueChanged() {},
-            onValueChanged: function() {},
         initialValue: '',
         label: '',
         placeholder: '',
@@ -54,42 +50,41 @@ export default createReactClass({
         placeholderClassName: "mx_EditableText_placeholder",
         blurToSubmit: false,
     };
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
-            phase: this.Phases.Display,
-        };
-    },
 
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(nextProps) {
-        if (nextProps.initialValue !== this.props.initialValue) {
-            this.value = nextProps.initialValue;
-            if (this._editable_div.current) {
-                this.showPlaceholder(!this.value);
-            }
-        }
-    },
-
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         // we track value as an JS object field rather than in React state
         // as React doesn't play nice with contentEditable.
         this.value = '';
         this.placeholder = false;
 
         this._editable_div = createRef();
-    },
+    }
 
-    componentDidMount: function() {
+    state = {
+        phase: EditableText.Phases.Display,
+    };
+
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (nextProps.initialValue !== this.props.initialValue) {
+            this.value = nextProps.initialValue;
+            if (this._editable_div.current) {
+                this.showPlaceholder(!this.value);
+            }
+        }
+    }
+
+    componentDidMount() {
         this.value = this.props.initialValue;
         if (this._editable_div.current) {
             this.showPlaceholder(!this.value);
         }
-    },
+    }
 
-    showPlaceholder: function(show) {
+    showPlaceholder = show => {
         if (show) {
             this._editable_div.current.textContent = this.props.placeholder;
             this._editable_div.current.setAttribute("class", this.props.className
@@ -101,38 +96,36 @@ export default createReactClass({
             this._editable_div.current.setAttribute("class", this.props.className);
             this.placeholder = false;
         }
-    },
+    };
 
-    getValue: function() {
+    getValue = () => this.value;
-        return this.value;
-    },
 
-    setValue: function(value) {
+    setValue = value => {
         this.value = value;
         this.showPlaceholder(!this.value);
-    },
+    };
 
-    edit: function() {
+    edit = () => {
         this.setState({
-            phase: this.Phases.Edit,
+            phase: EditableText.Phases.Edit,
         });
-    },
+    };
 
-    cancelEdit: function() {
+    cancelEdit = () => {
         this.setState({
-            phase: this.Phases.Display,
+            phase: EditableText.Phases.Display,
         });
         this.value = this.props.initialValue;
         this.showPlaceholder(!this.value);
         this.onValueChanged(false);
         this._editable_div.current.blur();
-    },
+    };
 
-    onValueChanged: function(shouldSubmit) {
+    onValueChanged = shouldSubmit => {
         this.props.onValueChanged(this.value, shouldSubmit);
-    },
+    };
 
-    onKeyDown: function(ev) {
+    onKeyDown = ev => {
         // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
 
         if (this.placeholder) {
@@ -145,9 +138,9 @@ export default createReactClass({
         }
 
         // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
-    },
+    };
 
-    onKeyUp: function(ev) {
+    onKeyUp = ev => {
         // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
 
         if (!ev.target.textContent) {
@@ -163,17 +156,17 @@ export default createReactClass({
         }
 
         // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
-    },
+    };
 
-    onClickDiv: function(ev) {
+    onClickDiv = ev => {
         if (!this.props.editable) return;
 
         this.setState({
-            phase: this.Phases.Edit,
+            phase: EditableText.Phases.Edit,
         });
-    },
+    };
 
-    onFocus: function(ev) {
+    onFocus = ev => {
         //ev.target.setSelectionRange(0, ev.target.textContent.length);
 
         const node = ev.target.childNodes[0];
@@ -186,21 +179,21 @@ export default createReactClass({
             sel.removeAllRanges();
             sel.addRange(range);
         }
-    },
+    };
 
-    onFinish: function(ev, shouldSubmit) {
+    onFinish = (ev, shouldSubmit) => {
         const self = this;
         const submit = (ev.key === Key.ENTER) || shouldSubmit;
         this.setState({
-            phase: this.Phases.Display,
+            phase: EditableText.Phases.Display,
         }, () => {
             if (this.value !== this.props.initialValue) {
                 self.onValueChanged(submit);
             }
         });
-    },
+    };
 
-    onBlur: function(ev) {
+    onBlur = ev => {
         const sel = window.getSelection();
         sel.removeAllRanges();
 
@@ -211,13 +204,15 @@ export default createReactClass({
         }
 
         this.showPlaceholder(!this.value);
-    },
+    };
 
-    render: function() {
+    render() {
         const {className, editable, initialValue, label, labelClassName} = this.props;
         let editableEl;
 
-        if (!editable || (this.state.phase === this.Phases.Display && (label || labelClassName) && !this.value)) {
+        if (!editable || (this.state.phase === EditableText.Phases.Display &&
+            (label || labelClassName) && !this.value)
+        ) {
             // show the label
             editableEl = <div className={className + " " + labelClassName} onClick={this.onClickDiv}>
                 { label || initialValue }
@@ -234,5 +229,5 @@ export default createReactClass({
         }
 
         return editableEl;
-    },
+    }
-});
+}

src/components/views/elements/Field.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
-import { debounce } from 'lodash';
+import {debounce} from "lodash";
 import {IFieldState, IValidationResult} from "./Validation";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.

src/components/views/elements/InlineSpinner.js

@@ -15,14 +15,11 @@ limitations under the License.
 */
 
 import React from "react";
-import createReactClass from 'create-react-class';
 import {_t} from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 
-export default createReactClass({
+export default class InlineSpinner extends React.Component {
-    displayName: 'InlineSpinner',
+    render() {
-
-    render: function() {
         const w = this.props.w || 16;
         const h = this.props.h || 16;
         const imgClass = this.props.imgClassName || "";
@@ -45,5 +42,5 @@ export default createReactClass({
                 />
             </div>
         );
-    },
+    }
-});
+}

src/components/views/elements/MemberEventListSummary.js

@@ -18,17 +18,14 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import * as sdk from "../../../index";
 import {MatrixEvent} from "matrix-js-sdk";
 import {isValid3pidInvite} from "../../../RoomInvite";
 
-export default createReactClass({
+export default class MemberEventListSummary extends React.Component {
-    displayName: 'MemberEventListSummary',
+    static propTypes = {
-
-    propTypes: {
         // An array of member events to summarise
         events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
         // An array of EventTiles to render when expanded
@@ -43,17 +40,15 @@ export default createReactClass({
         onToggle: PropTypes.func,
         // Whether or not to begin with state.expanded=true
         startExpanded: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps = {
-        return {
         summaryLength: 1,
         threshold: 3,
         avatarsMaxLength: 5,
     };
-    },
 
-    shouldComponentUpdate: function(nextProps) {
+    shouldComponentUpdate(nextProps) {
         // Update if
         //  - The number of summarised events has changed
         //  - or if the summary is about to toggle to become collapsed
@@ -62,7 +57,7 @@ export default createReactClass({
             nextProps.events.length !== this.props.events.length ||
             nextProps.events.length < this.props.threshold
         );
-    },
+    }
 
     /**
      * Generate the text for users aggregated by their transition sequences (`eventAggregates`) where
@@ -73,7 +68,7 @@ export default createReactClass({
      * `Object.keys(eventAggregates)`.
      * @returns {string} the textual summary of the aggregated events that occurred.
      */
-    _generateSummary: function(eventAggregates, orderedTransitionSequences) {
+    _generateSummary(eventAggregates, orderedTransitionSequences) {
         const summaries = orderedTransitionSequences.map((transitions) => {
             const userNames = eventAggregates[transitions];
             const nameList = this._renderNameList(userNames);
@@ -105,7 +100,7 @@ export default createReactClass({
         }
 
         return summaries.join(", ");
-    },
+    }
 
     /**
      * @param {string[]} users an array of user display names or user IDs.
@@ -113,9 +108,9 @@ export default createReactClass({
      * more items in `users` than `this.props.summaryLength`, which is the number of names
      * included before "and [n] others".
      */
-    _renderNameList: function(users) {
+    _renderNameList(users) {
         return formatCommaSeparatedList(users, this.props.summaryLength);
-    },
+    }
 
     /**
      * Canonicalise an array of transitions such that some pairs of transitions become
@@ -124,7 +119,7 @@ export default createReactClass({
      * @param {string[]} transitions an array of transitions.
      * @returns {string[]} an array of transitions.
      */
-    _getCanonicalTransitions: function(transitions) {
+    _getCanonicalTransitions(transitions) {
         const modMap = {
             'joined': {
                 'after': 'left',
@@ -155,7 +150,7 @@ export default createReactClass({
             res.push(transition);
         }
         return res;
-    },
+    }
 
     /**
      * Transform an array of transitions into an array of transitions and how many times
@@ -171,7 +166,7 @@ export default createReactClass({
      * @param {string[]} transitions the array of transitions to transform.
      * @returns {object[]} an array of coalesced transitions.
      */
-    _coalesceRepeatedTransitions: function(transitions) {
+    _coalesceRepeatedTransitions(transitions) {
         const res = [];
         for (let i = 0; i < transitions.length; i++) {
             if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
@@ -184,7 +179,7 @@ export default createReactClass({
             }
         }
         return res;
-    },
+    }
 
     /**
      * For a certain transition, t, describe what happened to the users that
@@ -268,11 +263,11 @@ export default createReactClass({
         }
 
         return res;
-    },
+    }
 
-    _getTransitionSequence: function(events) {
+    _getTransitionSequence(events) {
         return events.map(this._getTransition);
-    },
+    }
 
     /**
      * Label a given membership event, `e`, where `getContent().membership` has
@@ -282,7 +277,7 @@ export default createReactClass({
      * @returns {string?} the transition type given to this event. This defaults to `null`
      * if a transition is not recognised.
      */
-    _getTransition: function(e) {
+    _getTransition(e) {
         if (e.mxEvent.getType() === 'm.room.third_party_invite') {
             // Handle 3pid invites the same as invites so they get bundled together
             if (!isValid3pidInvite(e.mxEvent)) {
@@ -323,9 +318,9 @@ export default createReactClass({
                 }
             default: return null;
         }
-    },
+    }
 
-    _getAggregate: function(userEvents) {
+    _getAggregate(userEvents) {
         // A map of aggregate type to arrays of display names. Each aggregate type
         // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
         // The array of display names is the array of users who went through that
@@ -364,9 +359,9 @@ export default createReactClass({
             names: aggregate,
             indices: aggregateIndices,
         };
-    },
+    }
 
-    render: function() {
+    render() {
         const eventsToRender = this.props.events;
 
         // Map user IDs to an array of objects:
@@ -420,5 +415,5 @@ export default createReactClass({
             children={this.props.children}
             summaryMembers={avatarMembers}
             summaryText={this._generateSummary(aggregate.names, orderedTransitionSequences)} />;
-    },
+    }
-});
+}

src/components/views/elements/PersistentApp.js

@@ -16,49 +16,44 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 
-export default createReactClass({
+export default class PersistentApp extends React.Component {
-    displayName: 'PersistentApp',
+    state = {
-
-    getInitialState: function() {
-        return {
         roomId: RoomViewStore.getRoomId(),
         persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         if (this._roomStoreToken) {
             this._roomStoreToken.remove();
         }
         ActiveWidgetStore.removeListener('update', this._onActiveWidgetStoreUpdate);
-    },
+    }
 
-    _onRoomViewStoreUpdate: function(payload) {
+    _onRoomViewStoreUpdate = payload => {
         if (RoomViewStore.getRoomId() === this.state.roomId) return;
         this.setState({
             roomId: RoomViewStore.getRoomId(),
         });
-    },
+    };
 
-    _onActiveWidgetStoreUpdate: function() {
+    _onActiveWidgetStoreUpdate = () => {
         this.setState({
             persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
         });
-    },
+    };
 
-    render: function() {
+    render() {
         if (this.state.persistentWidgetId) {
             const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
             if (this.state.roomId !== persistentWidgetInRoomId) {
@@ -91,6 +86,6 @@ export default createReactClass({
             }
         }
         return null;
-    },
+    }
-});
+}
 

src/components/views/elements/Pill.js

@@ -16,7 +16,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
@@ -32,27 +31,29 @@ import {Action} from "../../../dispatcher/actions";
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
 const REGEX_LOCAL_PERMALINK = /^#\/(?:user|room|group)\/(([#!@+])[^/]*)$/;
 
-const Pill = createReactClass({
+class Pill extends React.Component {
-    statics: {
+    static isPillUrl(url) {
-        isPillUrl: (url) => {
         return !!getPrimaryPermalinkEntity(url);
-        },
+    }
-        isMessagePillUrl: (url) => {
-            return !!REGEX_LOCAL_PERMALINK.exec(url);
-        },
-        roomNotifPos: (text) => {
-            return text.indexOf("@room");
-        },
-        roomNotifLen: () => {
-            return "@room".length;
-        },
-        TYPE_USER_MENTION: 'TYPE_USER_MENTION',
-        TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
-        TYPE_GROUP_MENTION: 'TYPE_GROUP_MENTION',
-        TYPE_AT_ROOM_MENTION: 'TYPE_AT_ROOM_MENTION', // '@room' mention
-    },
 
-    props: {
+    static isMessagePillUrl(url) {
+        return !!REGEX_LOCAL_PERMALINK.exec(url);
+    }
+
+    static roomNotifPos(text) {
+        return text.indexOf("@room");
+    }
+
+    static roomNotifLen() {
+        return "@room".length;
+    }
+
+    static TYPE_USER_MENTION = 'TYPE_USER_MENTION';
+    static TYPE_ROOM_MENTION = 'TYPE_ROOM_MENTION';
+    static TYPE_GROUP_MENTION = 'TYPE_GROUP_MENTION';
+    static TYPE_AT_ROOM_MENTION = 'TYPE_AT_ROOM_MENTION'; // '@room' mention
+
+    static propTypes = {
         // The Type of this Pill. If url is given, this is auto-detected.
         type: PropTypes.string,
         // The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
@@ -65,10 +66,9 @@ const Pill = createReactClass({
         shouldShowPillAvatar: PropTypes.bool,
         // Whether to render this pill as if it were highlit by a selection
         isSelected: PropTypes.bool,
-    },
+    };
 
-    getInitialState() {
+    state = {
-        return {
         // ID/alias of the room/user
         resourceId: null,
         // Type of pill
@@ -81,9 +81,9 @@ const Pill = createReactClass({
         // The room related to the room pill
         room: null,
     };
-    },
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    // eslint-disable-next-line camelcase
     async UNSAFE_componentWillReceiveProps(nextProps) {
         let resourceId;
         let prefix;
@@ -155,7 +155,7 @@ const Pill = createReactClass({
             }
         }
         this.setState({resourceId, pillType, member, group, room});
-    },
+    }
 
     componentDidMount() {
         this._unmounted = false;
@@ -163,13 +163,13 @@ const Pill = createReactClass({
 
         // eslint-disable-next-line new-cap
         this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
-    },
+    }
 
     componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    doProfileLookup: function(userId, member) {
+    doProfileLookup(userId, member) {
         MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
             if (this._unmounted) {
                 return;
@@ -188,15 +188,16 @@ const Pill = createReactClass({
         }).catch((err) => {
             console.error('Could not retrieve profile data for ' + userId + ':', err);
         });
-    },
+    }
 
-    onUserPillClicked: function() {
+    onUserPillClicked = () => {
         dis.dispatch({
             action: Action.ViewUser,
             member: this.state.member,
         });
-    },
+    };
-    render: function() {
+
+    render() {
         const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
@@ -285,7 +286,7 @@ const Pill = createReactClass({
             // Deliberately render nothing if the URL isn't recognised
             return null;
         }
-    },
+    }
-});
+}
 
 export default Pill;

src/components/views/elements/PowerSelector.js

@@ -16,16 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
 import {Key} from "../../../Keyboard";
 
-export default createReactClass({
+export default class PowerSelector extends React.Component {
-    displayName: 'PowerSelector',
+    static propTypes = {
-
-    propTypes: {
         value: PropTypes.number.isRequired,
         // The maximum value that can be set with the power selector
         maxValue: PropTypes.number.isRequired,
@@ -42,10 +39,17 @@ export default createReactClass({
 
         // The name to annotate the selector with
         label: PropTypes.string,
-    },
+    }
 
-    getInitialState: function() {
+    static defaultProps = {
-        return {
+        maxValue: Infinity,
+        usersDefault: 0,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
             levelRoleMap: {},
             // List of power levels to show in the drop-down
             options: [],
@@ -53,26 +57,17 @@ export default createReactClass({
             customValue: this.props.value,
             selectValue: 0,
         };
-    },
 
-    getDefaultProps: function() {
-        return {
-            maxValue: Infinity,
-            usersDefault: 0,
-        };
-    },
-
-    componentDidMount: function() {
-        // TODO: [REACT-WARNING] Move this to class constructor
         this._initStateFromProps(this.props);
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(newProps) {
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(newProps) {
         this._initStateFromProps(newProps);
-    },
+    }
 
-    _initStateFromProps: function(newProps) {
+    _initStateFromProps(newProps) {
         // This needs to be done now because levelRoleMap has translated strings
         const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
         const options = Object.keys(levelRoleMap).filter(level => {
@@ -92,9 +87,9 @@ export default createReactClass({
             customLevel: newProps.value,
             selectValue: isCustom ? "SELECT_VALUE_CUSTOM" : newProps.value,
         });
-    },
+    }
 
-    onSelectChange: function(event) {
+    onSelectChange = event => {
         const isCustom = event.target.value === "SELECT_VALUE_CUSTOM";
         if (isCustom) {
             this.setState({custom: true});
@@ -102,20 +97,20 @@ export default createReactClass({
             this.props.onChange(event.target.value, this.props.powerLevelKey);
             this.setState({selectValue: event.target.value});
         }
-    },
+    };
 
-    onCustomChange: function(event) {
+    onCustomChange = event => {
         this.setState({customValue: event.target.value});
-    },
+    };
 
-    onCustomBlur: function(event) {
+    onCustomBlur = event => {
         event.preventDefault();
         event.stopPropagation();
 
         this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey);
-    },
+    };
 
-    onCustomKeyDown: function(event) {
+    onCustomKeyDown = event => {
         if (event.key === Key.ENTER) {
             event.preventDefault();
             event.stopPropagation();
@@ -127,9 +122,9 @@ export default createReactClass({
             // handle the onBlur safely.
             event.target.blur();
         }
-    },
+    };
 
-    render: function() {
+    render() {
         let picker;
         const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
         if (this.state.custom) {
@@ -166,5 +161,5 @@ export default createReactClass({
                 { picker }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/elements/ReplyThread.js

@@ -45,8 +45,8 @@ export default class ReplyThread extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         this.state = {
             // The loaded events to be rendered as linear-replies
@@ -331,8 +331,14 @@ export default class ReplyThread extends React.Component {
                 {
                     _t('<a>In reply to</a> <pill>', {}, {
                         'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
-                        'pill': <Pill type={Pill.TYPE_USER_MENTION} room={room}
+                        'pill': (
-                                      url={makeUserPermalink(ev.getSender())} shouldShowPillAvatar={true} />,
+                            <Pill
+                                type={Pill.TYPE_USER_MENTION}
+                                room={room}
+                                url={makeUserPermalink(ev.getSender())}
+                                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
+                            />
+                        ),
                     })
                 }
             </blockquote>;

src/components/views/elements/TagTile.js

@@ -18,7 +18,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
@@ -37,10 +36,8 @@ import SettingsStore from "../../../settings/SettingsStore";
 //  - Rooms that are part of the group
 //  - Direct messages with members of the group
 // with the intention that this could be expanded to arbitrary tags in future.
-export default createReactClass({
+export default class TagTile extends React.Component {
-    displayName: 'TagTile',
+    static propTypes = {
-
-    propTypes: {
         // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
         // For now, only group IDs are handled.
         tag: PropTypes.string,
@@ -48,20 +45,16 @@ export default createReactClass({
         openMenu: PropTypes.func,
         menuDisplayed: PropTypes.bool,
         selected: PropTypes.bool,
-    },
+    };
 
-    statics: {
+    static contextType = MatrixClientContext;
-        contextType: MatrixClientContext,
-    },
 
-    getInitialState() {
+    state = {
-        return {
         // Whether the mouse is over the tile
         hover: false,
         // The profile data of the group if this.props.tag is a group ID
         profile: null,
     };
-    },
 
     componentDidMount() {
         this.unmounted = false;
@@ -71,16 +64,16 @@ export default createReactClass({
             // New rooms or members may have been added to the group, fetch async
             this._refreshGroup(this.props.tag);
         }
-    },
+    }
 
     componentWillUnmount() {
         this.unmounted = true;
         if (this.props.tag[0] === '+') {
             FlairStore.removeListener('updateGroupProfile', this._onFlairStoreUpdated);
         }
-    },
+    }
 
-    _onFlairStoreUpdated() {
+    _onFlairStoreUpdated = () => {
         if (this.unmounted) return;
         FlairStore.getGroupProfileCached(
             this.context,
@@ -91,14 +84,14 @@ export default createReactClass({
         }).catch((err) => {
             console.warn('Could not fetch group profile for ' + this.props.tag, err);
         });
-    },
+    };
 
     _refreshGroup(groupId) {
         GroupStore.refreshGroupRooms(groupId);
         GroupStore.refreshGroupMembers(groupId);
-    },
+    }
 
-    onClick: function(e) {
+    onClick = e => {
         e.preventDefault();
         e.stopPropagation();
         dis.dispatch({
@@ -111,27 +104,27 @@ export default createReactClass({
             // New rooms or members may have been added to the group, fetch async
             this._refreshGroup(this.props.tag);
         }
-    },
+    };
 
-    onMouseOver: function() {
+    onMouseOver = () => {
         if (SettingsStore.getValue("feature_communities_v2_prototypes")) return;
         this.setState({ hover: true });
-    },
+    };
 
-    onMouseLeave: function() {
+    onMouseLeave = () => {
         this.setState({ hover: false });
-    },
+    };
 
-    openMenu: function(e) {
+    openMenu = e => {
         // Prevent the TagTile onClick event firing as well
         e.stopPropagation();
         e.preventDefault();
         if (SettingsStore.getValue("feature_communities_v2_prototypes")) return;
         this.setState({ hover: false });
         this.props.openMenu();
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
@@ -192,5 +185,5 @@ export default createReactClass({
                 {badgeElement}
             </div>
         </AccessibleTooltipButton>;
-    },
+    }
-});
+}

src/components/views/elements/TintableSvg.js

@@ -17,49 +17,44 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import Tinter from "../../../Tinter";
 
-const TintableSvg = createReactClass({
+class TintableSvg extends React.Component {
-    displayName: 'TintableSvg',
+    static propTypes = {
-
-    propTypes: {
         src: PropTypes.string.isRequired,
         width: PropTypes.string.isRequired,
         height: PropTypes.string.isRequired,
         className: PropTypes.string,
-    },
+    };
 
-    statics: {
     // list of currently mounted TintableSvgs
-        mounts: {},
+    static mounts = {};
-        idSequence: 0,
+    static idSequence = 0;
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.fixups = [];
 
         this.id = TintableSvg.idSequence++;
         TintableSvg.mounts[this.id] = this;
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         delete TintableSvg.mounts[this.id];
-    },
+    }
 
-    tint: function() {
+    tint = () => {
         // TODO: only bother running this if the global tint settings have changed
         // since we loaded!
         Tinter.applySvgFixups(this.fixups);
-    },
+    };
 
-    onLoad: function(event) {
+    onLoad = event => {
         // console.log("TintableSvg.onLoad for " + this.props.src);
         this.fixups = Tinter.calcSvgFixups([event.target]);
         Tinter.applySvgFixups(this.fixups);
-    },
+    };
 
-    render: function() {
+    render() {
         return (
             <object className={"mx_TintableSvg " + (this.props.className ? this.props.className : "")}
                     type="image/svg+xml"
@@ -70,8 +65,8 @@ const TintableSvg = createReactClass({
                     tabIndex="-1"
                 />
         );
-    },
+    }
-});
+}
 
 // Register with the Tinter so that we will be told if the tint changes
 Tinter.registerTintable(function() {

src/components/views/elements/TooltipButton.js

@@ -16,31 +16,26 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 
-export default createReactClass({
+export default class TooltipButton extends React.Component {
-    displayName: 'TooltipButton',
+    state = {
-
-    getInitialState: function() {
-        return {
         hover: false,
     };
-    },
 
-    onMouseOver: function() {
+    onMouseOver = () => {
         this.setState({
             hover: true,
         });
-    },
+    };
 
-    onMouseLeave: function() {
+    onMouseLeave = () => {
         this.setState({
             hover: false,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         const tip = this.state.hover ? <Tooltip
             className="mx_TooltipButton_container"
@@ -53,5 +48,5 @@ export default createReactClass({
                 { tip }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/elements/TruncatedList.js

@@ -17,13 +17,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-export default createReactClass({
+export default class TruncatedList extends React.Component {
-    displayName: 'TruncatedList',
+    static propTypes = {
-
-    propTypes: {
         // The number of elements to show before truncating. If negative, no truncation is done.
         truncateAt: PropTypes.number,
         // The className to apply to the wrapping div
@@ -40,20 +37,18 @@ export default createReactClass({
         // A function which will be invoked when an overflow element is required.
         // This will be inserted after the children.
         createOverflowElement: PropTypes.func,
-    },
+    };
 
-    getDefaultProps: function() {
+    static defaultProps ={
-        return {
         truncateAt: 2,
-            createOverflowElement: function(overflowCount, totalCount) {
+        createOverflowElement(overflowCount, totalCount) {
             return (
                 <div>{ _t("And %(count)s more...", {count: overflowCount}) }</div>
             );
         },
     };
-    },
 
-    _getChildren: function(start, end) {
+    _getChildren(start, end) {
         if (this.props.getChildren && this.props.getChildCount) {
             return this.props.getChildren(start, end);
         } else {
@@ -64,9 +59,9 @@ export default createReactClass({
                 return c != null;
             }).slice(start, end);
         }
-    },
+    }
 
-    _getChildCount: function() {
+    _getChildCount() {
         if (this.props.getChildren && this.props.getChildCount) {
             return this.props.getChildCount();
         } else {
@@ -74,9 +69,9 @@ export default createReactClass({
                 return c != null;
             }).length;
         }
-    },
+    }
 
-    render: function() {
+    render() {
         let overflowNode = null;
 
         const totalChildren = this._getChildCount();
@@ -98,5 +93,5 @@ export default createReactClass({
                 { overflowNode }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/groups/GroupInviteTile.js

@@ -18,7 +18,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import {_t} from '../../../languageHandler';
@@ -29,50 +28,48 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
 
 // XXX this class copies a lot from RoomTile.js
-export default createReactClass({
+export default class GroupInviteTile extends React.Component {
-    displayName: 'GroupInviteTile',
+    static propTypes: {
-
-    propTypes: {
         group: PropTypes.object.isRequired,
-    },
+    };
 
-    statics: {
+    static contextType = MatrixClientContext;
-        contextType: MatrixClientContext,
-    },
 
-    getInitialState: function() {
+    constructor(props, context) {
-        return ({
+        super(props, context);
+
+        this.state = {
             hover: false,
             badgeHover: false,
             menuDisplayed: false,
             selected: this.props.group.groupId === null, // XXX: this needs linking to LoggedInView/GroupView state
-        });
+        };
-    },
+    }
 
-    onClick: function(e) {
+    onClick = e => {
         dis.dispatch({
             action: 'view_group',
             group_id: this.props.group.groupId,
         });
-    },
+    };
 
-    onMouseEnter: function() {
+    onMouseEnter = () => {
         const state = {hover: true};
         // Only allow non-guests to access the context menu
         if (!this.context.isGuest()) {
             state.badgeHover = true;
         }
         this.setState(state);
-    },
+    };
 
-    onMouseLeave: function() {
+    onMouseLeave = () => {
         this.setState({
             badgeHover: false,
             hover: false,
         });
-    },
+    };
 
-    _showContextMenu: function(boundingClientRect) {
+    _showContextMenu(boundingClientRect) {
         // Only allow non-guests to access the context menu
         if (MatrixClientPeg.get().isGuest()) return;
 
@@ -86,17 +83,17 @@ export default createReactClass({
         }
 
         this.setState(state);
-    },
+    }
 
-    onContextMenuButtonClick: function(e) {
+    onContextMenuButtonClick = e => {
         // Prevent the RoomTile onClick event firing as well
         e.stopPropagation();
         e.preventDefault();
 
         this._showContextMenu(e.target.getBoundingClientRect());
-    },
+    };
 
-    onContextMenu: function(e) {
+    onContextMenu = e => {
         // Prevent the native context menu
         e.preventDefault();
 
@@ -105,15 +102,15 @@ export default createReactClass({
             top: e.clientY,
             height: 0,
         });
-    },
+    };
 
-    closeMenu: function() {
+    closeMenu = () => {
         this.setState({
             contextMenuPosition: null,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
 
@@ -197,5 +194,5 @@ export default createReactClass({
 
             { contextMenu }
         </React.Fragment>;
-    },
+    }
-});
+}

src/components/views/groups/GroupMemberList.js

@@ -16,7 +16,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
@@ -30,33 +29,29 @@ import {Action} from "../../../dispatcher/actions";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
-export default createReactClass({
+export default class GroupMemberList extends React.Component {
-    displayName: 'GroupMemberList',
+    static propTypes = {
-
-    propTypes: {
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         members: null,
         membersError: null,
         invitedMembers: null,
         invitedMembersError: null,
         truncateAt: INITIAL_LOAD_NUM_MEMBERS,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this._unmounted = true;
-    },
+    }
 
-    _initGroupStore: function(groupId) {
+    _initGroupStore(groupId) {
         GroupStore.registerListener(groupId, () => {
             this._fetchMembers();
         });
@@ -73,17 +68,17 @@ export default createReactClass({
                 });
             }
         });
-    },
+    }
 
-    _fetchMembers: function() {
+    _fetchMembers() {
         if (this._unmounted) return;
         this.setState({
             members: GroupStore.getGroupMembers(this.props.groupId),
             invitedMembers: GroupStore.getGroupInvitedMembers(this.props.groupId),
         });
-    },
+    }
 
-    _createOverflowTile: function(overflowCount, totalCount) {
+    _createOverflowTile = (overflowCount, totalCount) => {
         // For now we'll pretend this is any entity. It should probably be a separate tile.
         const EntityTile = sdk.getComponent("rooms.EntityTile");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
@@ -94,19 +89,19 @@ export default createReactClass({
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showFullMemberList} />
         );
-    },
+    };
 
-    _showFullMemberList: function() {
+    _showFullMemberList = () => {
         this.setState({
             truncateAt: -1,
         });
-    },
+    };
 
-    onSearchQueryChanged: function(ev) {
+    onSearchQueryChanged = ev => {
         this.setState({ searchQuery: ev.target.value });
-    },
+    };
 
-    makeGroupMemberTiles: function(query, memberList, memberListError) {
+    makeGroupMemberTiles(query, memberList, memberListError) {
         if (memberListError) {
             return <div className="warning">{ _t("Failed to load group members") }</div>;
         }
@@ -160,9 +155,9 @@ export default createReactClass({
         >
             { memberTiles }
         </TruncatedList>;
-    },
+    }
 
-    onInviteToGroupButtonClick() {
+    onInviteToGroupButtonClick = () => {
         showGroupInviteDialog(this.props.groupId).then(() => {
             dis.dispatch({
                 action: Action.SetRightPanelPhase,
@@ -170,9 +165,9 @@ export default createReactClass({
                 refireParams: { groupId: this.props.groupId },
             });
         });
-    },
+    };
 
-    render: function() {
+    render() {
         if (this.state.fetching || this.state.fetchingInvitedMembers) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return (<div className="mx_MemberList">
@@ -230,5 +225,5 @@ export default createReactClass({
                 { inputBox }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/groups/GroupMemberTile.js

@@ -18,37 +18,28 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { GroupMemberType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
-export default createReactClass({
+export default class GroupMemberTile extends React.Component {
-    displayName: 'GroupMemberTile',
+    static propTypes = {
-
-    propTypes: {
         groupId: PropTypes.string.isRequired,
         member: GroupMemberType.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    static contextType = MatrixClientContext;
-        return {};
-    },
 
-    statics: {
+    onClick = e => {
-        contextType: MatrixClientContext,
-    },
-
-    onClick: function(e) {
         dis.dispatch({
             action: 'view_group_user',
             member: this.props.member,
             groupId: this.props.groupId,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EntityTile = sdk.getComponent('rooms.EntityTile');
 
@@ -74,5 +65,5 @@ export default createReactClass({
                 powerStatus={this.props.member.isPrivileged ? EntityTile.POWER_STATUS_ADMIN : null}
             />
         );
-    },
+    }
-});
+}

src/components/views/groups/GroupPublicityToggle.js

@@ -16,44 +16,39 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import ToggleSwitch from "../elements/ToggleSwitch";
 
-export default createReactClass({
+export default class GroupPublicityToggle extends React.Component {
-    displayName: 'GroupPublicityToggle',
+    static propTypes = {
-
-    propTypes: {
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    getInitialState() {
+    state = {
-        return {
         busy: false,
         ready: false,
         isGroupPublicised: false, // assume false as <ToggleSwitch /> expects a boolean
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
-    _initGroupStore: function(groupId) {
+    _initGroupStore(groupId) {
         this._groupStoreToken = GroupStore.registerListener(groupId, () => {
             this.setState({
                 isGroupPublicised: Boolean(GroupStore.getGroupPublicity(groupId)),
                 ready: GroupStore.isStateReady(groupId, GroupStore.STATE_KEY.Summary),
             });
         });
-    },
+    }
 
     componentWillUnmount() {
         if (this._groupStoreToken) this._groupStoreToken.unregister();
-    },
+    }
 
-    _onPublicityToggle: function() {
+    _onPublicityToggle = () => {
         this.setState({
             busy: true,
             // Optimistic early update
@@ -64,7 +59,7 @@ export default createReactClass({
                 busy: false,
             });
         });
-    },
+    };
 
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
@@ -76,5 +71,5 @@ export default createReactClass({
                           disabled={!this.state.ready || this.state.busy}
                           onChange={this._onPublicityToggle} />
         </div>;
-    },
+    }
-});
+}

src/components/views/groups/GroupRoomInfo.js

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
@@ -26,50 +25,45 @@ import GroupStore from '../../../stores/GroupStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
-export default createReactClass({
+export default class GroupRoomInfo extends React.Component {
-    displayName: 'GroupRoomInfo',
+    static contextType = MatrixClientContext;
 
-    statics: {
+    static propTypes = {
-        contextType: MatrixClientContext,
-    },
-
-    propTypes: {
         groupId: PropTypes.string,
         groupRoomId: PropTypes.string,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         isUserPrivilegedInGroup: null,
         groupRoom: null,
         groupRoomPublicityLoading: false,
         groupRoomRemoveLoading: false,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    // eslint-disable-next-line camelcase
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.groupId !== this.props.groupId) {
             this._unregisterGroupStore(this.props.groupId);
             this._initGroupStore(newProps.groupId);
         }
-    },
+    }
 
     componentWillUnmount() {
         this._unregisterGroupStore(this.props.groupId);
-    },
+    }
 
     _initGroupStore(groupId) {
         GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
-    },
+    }
 
     _unregisterGroupStore(groupId) {
         GroupStore.unregisterListener(this.onGroupStoreUpdated);
-    },
+    }
 
     _updateGroupRoom() {
         this.setState({
@@ -77,16 +71,16 @@ export default createReactClass({
                 (r) => r.roomId === this.props.groupRoomId,
             ),
         });
-    },
+    }
 
-    onGroupStoreUpdated: function() {
+    onGroupStoreUpdated = () => {
         this.setState({
             isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
         });
         this._updateGroupRoom();
-    },
+    };
 
-    _onRemove: function(e) {
+    _onRemove = e => {
         const groupId = this.props.groupId;
         const roomName = this.state.groupRoom.displayname;
         e.preventDefault();
@@ -119,15 +113,15 @@ export default createReactClass({
                 });
             },
         });
-    },
+    };
 
-    _onCancel: function(e) {
+    _onCancel = e => {
         dis.dispatch({
             action: "view_group_room_list",
         });
-    },
+    };
 
-    _changeGroupRoomPublicity(e) {
+    _changeGroupRoomPublicity = e => {
         const isPublic = e.target.value === "public";
         this.setState({
             groupRoomPublicityLoading: true,
@@ -150,9 +144,9 @@ export default createReactClass({
                 groupRoomPublicityLoading: false,
             });
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
         if (this.state.groupRoomRemoveLoading || !this.state.groupRoom) {
@@ -235,5 +229,5 @@ export default createReactClass({
                 </AutoHideScrollbar>
             </div>
         );
-    },
+    }
-});
+}

src/components/views/groups/GroupRoomList.js

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
@@ -25,34 +24,32 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
 
-export default createReactClass({
+export default class GroupRoomList extends React.Component {
-    propTypes: {
+    static propTypes = {
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    getInitialState: function() {
+    state = {
-        return {
         rooms: null,
         truncateAt: INITIAL_LOAD_NUM_ROOMS,
         searchQuery: "",
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
     componentWillUnmount() {
         this._unmounted = true;
         this._unregisterGroupStore();
-    },
+    }
 
     _unregisterGroupStore() {
         GroupStore.unregisterListener(this.onGroupStoreUpdated);
-    },
+    }
 
-    _initGroupStore: function(groupId) {
+    _initGroupStore(groupId) {
         GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
         // XXX: This should be more fluxy - let's get the error from GroupStore .getError or something
         // XXX: This is also leaked - we should remove it when unmounting
@@ -62,16 +59,16 @@ export default createReactClass({
                 rooms: null,
             });
         });
-    },
+    }
 
-    onGroupStoreUpdated: function() {
+    onGroupStoreUpdated = () => {
         if (this._unmounted) return;
         this.setState({
             rooms: GroupStore.getGroupRooms(this.props.groupId),
         });
-    },
+    };
 
-    _createOverflowTile: function(overflowCount, totalCount) {
+    _createOverflowTile = (overflowCount, totalCount) => {
         // For now we'll pretend this is any entity. It should probably be a separate tile.
         const EntityTile = sdk.getComponent("rooms.EntityTile");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
@@ -82,25 +79,25 @@ export default createReactClass({
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showFullRoomList} />
         );
-    },
+    };
 
-    _showFullRoomList: function() {
+    _showFullRoomList = () => {
         this.setState({
             truncateAt: -1,
         });
-    },
+    };
 
-    onSearchQueryChanged: function(ev) {
+    onSearchQueryChanged = ev => {
         this.setState({ searchQuery: ev.target.value });
-    },
+    };
 
-    onAddRoomToGroupButtonClick() {
+    onAddRoomToGroupButtonClick = () => {
         showGroupAddRoomDialog(this.props.groupId).then(() => {
             this.forceUpdate();
         });
-    },
+    };
 
-    makeGroupRoomTiles: function(query) {
+    makeGroupRoomTiles(query) {
         const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
         query = (query || "").toLowerCase();
 
@@ -123,9 +120,9 @@ export default createReactClass({
         });
 
         return roomList;
-    },
+    }
 
-    render: function() {
+    render() {
         if (this.state.rooms === null) {
             return null;
         }
@@ -160,5 +157,5 @@ export default createReactClass({
                 { inputBox }
             </div>
         );
-    },
+    }
-});
+}

src/components/views/groups/GroupRoomTile.js

@@ -16,29 +16,28 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { GroupRoomType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
-const GroupRoomTile = createReactClass({
+class GroupRoomTile extends React.Component {
-    displayName: 'GroupRoomTile',
+    static propTypes = {
-
-    propTypes: {
         groupId: PropTypes.string.isRequired,
         groupRoom: GroupRoomType.isRequired,
-    },
+    };
 
-    onClick: function(e) {
+    static contextType = MatrixClientContext
+
+    onClick = e => {
         dis.dispatch({
             action: 'view_group_room',
             groupId: this.props.groupId,
             groupRoomId: this.props.groupRoom.roomId,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const avatarUrl = this.context.mxcUrlToHttp(
@@ -63,10 +62,7 @@ const GroupRoomTile = createReactClass({
                 </div>
             </AccessibleButton>
         );
-    },
+    }
-});
+}
-
-GroupRoomTile.contextType = MatrixClientContext;
-
 
 export default GroupRoomTile;

src/components/views/groups/GroupTile.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
@@ -25,53 +24,45 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 function nop() {}
 
-const GroupTile = createReactClass({
+class GroupTile extends React.Component {
-    displayName: 'GroupTile',
+    static propTypes = {
-
-    propTypes: {
         groupId: PropTypes.string.isRequired,
         // Whether to show the short description of the group on the tile
         showDescription: PropTypes.bool,
         // Height of the group avatar in pixels
         avatarHeight: PropTypes.number,
         draggable: PropTypes.bool,
-    },
-
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    getInitialState() {
-        return {
-            profile: null,
     };
-    },
 
-    getDefaultProps() {
+    static contextType = MatrixClientContext;
-        return {
+
+    static defaultProps = {
         showDescription: true,
         avatarHeight: 50,
         draggable: true,
     };
-    },
 
-    componentDidMount: function() {
+    state = {
+        profile: null,
+    };
+
+    componentDidMount() {
         FlairStore.getGroupProfileCached(this.context, this.props.groupId).then((profile) => {
             this.setState({profile});
         }).catch((err) => {
             console.error('Error whilst getting cached profile for GroupTile', err);
         });
-    },
+    }
 
-    onMouseDown: function(e) {
+    onMouseDown = e => {
         e.preventDefault();
         dis.dispatch({
             action: 'view_group',
             group_id: this.props.groupId,
         });
-    },
+    };
 
-    render: function() {
+    render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const profile = this.state.profile || {};
@@ -135,7 +126,7 @@ const GroupTile = createReactClass({
                 <div className="mx_GroupTile_groupId">{ this.props.groupId }</div>
             </div>
         </AccessibleButton>;
-    },
+    }
-});
+}
 
 export default GroupTile;

src/components/views/groups/GroupUserSettings.js

@@ -15,33 +15,26 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
-export default createReactClass({
+export default class GroupUserSettings extends React.Component {
-    displayName: 'GroupUserSettings',
+    static contextType = MatrixClientContext;
 
-    statics: {
+    state = {
-        contextType: MatrixClientContext,
-    },
-
-    getInitialState() {
-        return {
         error: null,
         groups: null,
     };
-    },
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.context.getJoinedGroups().then((result) => {
             this.setState({groups: result.groups || [], error: null});
         }, (err) => {
             console.error(err);
             this.setState({groups: null, error: err});
         });
-    },
+    }
 
     render() {
         let text = "";
@@ -70,5 +63,5 @@ export default createReactClass({
                 </div>
             </div>
         );
-    },
+    }
-});
+}