Remove create-react-class

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({
-    displayName: 'FilePanel',
+class FilePanel extends React.Component {
+    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: {
-        roomId: PropTypes.string.isRequired,
-    },
+    state = {
+        timelineSet: null,
+    };
 
-    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">
@@ -239,7 +235,7 @@ const FilePanel = createReactClass({
                 </div>
             );
         }
-    },
-});
+    }
+}
 
 export default FilePanel;