Remove create-react-class

src/components/views/rooms/MemberTile.js

@@ -18,34 +18,31 @@ limitations under the License.
 import SettingsStore from "../../../settings/SettingsStore";
 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';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import {Action} from "../../../dispatcher/actions";
 
-export default createReactClass({
-    displayName: 'MemberTile',
-
-    propTypes: {
+export default class MemberTile extends React.Component {
+    static propTypes = {
         member: PropTypes.any.isRequired, // RoomMember
         showPresence: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
-        return {
-            showPresence: true,
-        };
-    },
+    static defaultProps = {
+        showPresence: true,
+    };
 
-    getInitialState: function() {
-        return {
+    constructor(props) {
+        super(props);
+
+        this.state = {
             statusMessage: this.getStatusMessage(),
             isRoomEncrypted: false,
             e2eStatus: null,
         };
-    },
+    }
 
     componentDidMount() {
         const cli = MatrixClientPeg.get();
@@ -72,7 +69,7 @@ export default createReactClass({
                 cli.on("RoomState.events", this.onRoomStateEvents);
             }
         }
-    },
+    }
 
     componentWillUnmount() {
         const cli = MatrixClientPeg.get();
@@ -90,9 +87,9 @@ export default createReactClass({
             cli.removeListener("userTrustStatusChanged", this.onUserTrustStatusChanged);
             cli.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         }
-    },
+    }
 
-    onRoomStateEvents: function(ev) {
+    onRoomStateEvents = ev => {
         if (ev.getType() !== "m.room.encryption") return;
         const { roomId } = this.props.member;
         if (ev.getRoomId() !== roomId) return;
@@ -104,19 +101,19 @@ export default createReactClass({
             isRoomEncrypted: true,
         });
         this.updateE2EStatus();
-    },
+    };
 
-    onUserTrustStatusChanged: function(userId, trustStatus) {
+    onUserTrustStatusChanged = (userId, trustStatus) => {
         if (userId !== this.props.member.userId) return;
         this.updateE2EStatus();
-    },
+    };
 
-    onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
+    onDeviceVerificationChanged = (userId, deviceId, deviceInfo) => {
         if (userId !== this.props.member.userId) return;
         this.updateE2EStatus();
-    },
+    };
 
-    updateE2EStatus: async function() {
+    async updateE2EStatus() {
         const cli = MatrixClientPeg.get();
         const { userId } = this.props.member;
         const isMe = userId === cli.getUserId();
@@ -142,7 +139,7 @@ export default createReactClass({
         this.setState({
             e2eStatus: anyDeviceUnverified ? "warning" : "verified",
         });
-    },
+    }
 
     getStatusMessage() {
         const { user } = this.props.member;
@@ -150,16 +147,16 @@ export default createReactClass({
             return "";
         }
         return user._unstable_statusMessage;
-    },
+    }
 
-    _onStatusMessageCommitted() {
+    _onStatusMessageCommitted = () => {
         // The `User` object has observed a status message change.
         this.setState({
             statusMessage: this.getStatusMessage(),
         });
-    },
+    };
 
-    shouldComponentUpdate: function(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (
             this.member_last_modified_time === undefined ||
             this.member_last_modified_time < nextProps.member.getLastModifiedTime()
@@ -180,27 +177,27 @@ export default createReactClass({
             return true;
         }
         return false;
-    },
+    }
 
-    onClick: function(e) {
+    onClick = e => {
         dis.dispatch({
             action: Action.ViewUser,
             member: this.props.member,
         });
-    },
+    };
 
-    _getDisplayName: function() {
+    _getDisplayName() {
         return this.props.member.name;
-    },
+    }
 
-    getPowerLabel: function() {
+    getPowerLabel() {
         return _t("%(userName)s (power %(powerLevelNumber)s)", {
             userName: this.props.member.userId,
             powerLevelNumber: this.props.member.powerLevel,
         });
-    },
+    }
 
-    render: function() {
+    render() {
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const EntityTile = sdk.getComponent('rooms.EntityTile');
 
@@ -260,5 +257,5 @@ export default createReactClass({
                 onClick={this.onClick}
             />
         );
-    },
-});
+    }
+}