Remove create-react-class

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({
-    displayName: 'GroupInviteTile',
-
-    propTypes: {
+export default class GroupInviteTile extends React.Component {
+    static propTypes: {
         group: PropTypes.object.isRequired,
-    },
+    };
 
-    statics: {
-        contextType: MatrixClientContext,
-    },
+    static contextType = MatrixClientContext;
 
-    getInitialState: function() {
-        return ({
+    constructor(props) {
+        super(props);
+
+        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({
-    displayName: 'GroupMemberList',
-
-    propTypes: {
+export default class GroupMemberList extends React.Component {
+    static propTypes = {
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    getInitialState: function() {
-        return {
-            members: null,
-            membersError: null,
-            invitedMembers: null,
-            invitedMembersError: null,
-            truncateAt: INITIAL_LOAD_NUM_MEMBERS,
-        };
-    },
+    state = {
+        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({
-    displayName: 'GroupMemberTile',
-
-    propTypes: {
+export default class GroupMemberTile extends React.Component {
+    static propTypes = {
         groupId: PropTypes.string.isRequired,
         member: GroupMemberType.isRequired,
-    },
+    };
 
-    getInitialState: function() {
-        return {};
-    },
+    static contextType = MatrixClientContext;
 
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    onClick: function(e) {
+    onClick = 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({
-    displayName: 'GroupPublicityToggle',
-
-    propTypes: {
+export default class GroupPublicityToggle extends React.Component {
+    static propTypes = {
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    getInitialState() {
-        return {
-            busy: false,
-            ready: false,
-            isGroupPublicised: false, // assume false as <ToggleSwitch /> expects a boolean
-        };
-    },
+    state = {
+        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,30 +25,24 @@ import GroupStore from '../../../stores/GroupStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
-export default createReactClass({
-    displayName: 'GroupRoomInfo',
+export default class GroupRoomInfo extends React.Component {
+    static contextType = MatrixClientContext;
 
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    propTypes: {
+    static propTypes = {
         groupId: PropTypes.string,
         groupRoomId: PropTypes.string,
-    },
+    };
 
-    getInitialState: function() {
-        return {
-            isUserPrivilegedInGroup: null,
-            groupRoom: null,
-            groupRoomPublicityLoading: false,
-            groupRoomRemoveLoading: false,
-        };
-    },
+    state = {
+        isUserPrivilegedInGroup: null,
+        groupRoom: null,
+        groupRoomPublicityLoading: false,
+        groupRoomRemoveLoading: false,
+    };
 
-    componentDidMount: function() {
+    componentDidMount() {
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     UNSAFE_componentWillReceiveProps(newProps) {
@@ -57,19 +50,19 @@ export default createReactClass({
             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 +70,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 +112,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 +143,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 +228,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({
-    propTypes: {
+export default class GroupRoomList extends React.Component {
+    static propTypes = {
         groupId: PropTypes.string.isRequired,
-    },
+    };
 
-    getInitialState: function() {
-        return {
-            rooms: null,
-            truncateAt: INITIAL_LOAD_NUM_ROOMS,
-            searchQuery: "",
-        };
-    },
+    state = {
+        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({
-    displayName: 'GroupRoomTile',
-
-    propTypes: {
+class GroupRoomTile extends React.Component {
+    static 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({
-    displayName: 'GroupTile',
-
-    propTypes: {
+class GroupTile extends React.Component {
+    static 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,
-    },
+    static contextType = MatrixClientContext;
 
-    getInitialState() {
-        return {
-            profile: null,
-        };
-    },
+    static defaultProps = {
+        showDescription: true,
+        avatarHeight: 50,
+        draggable: true,
+    };
 
-    getDefaultProps() {
-        return {
-            showDescription: true,
-            avatarHeight: 50,
-            draggable: true,
-        };
-    },
+    state = {
+        profile: null,
+    };
 
-    componentDidMount: function() {
+    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({
-    displayName: 'GroupUserSettings',
+export default class GroupUserSettings extends React.Component {
+    static contextType = MatrixClientContext;
 
-    statics: {
-        contextType: MatrixClientContext,
-    },
+    state = {
+        error: null,
+        groups: null,
+    };
 
-    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>
         );
-    },
-});
+    }
+}