Merge pull request #6283 from matrix-org/gsouquet/filepanel-typescript

src/components/structures/FilePanel.tsx

@@ -16,37 +16,49 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import {Filter} from 'matrix-js-sdk/src/filter';
+import { Filter } from 'matrix-js-sdk/src/filter';
+import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
+
 import * as sdk from '../../index';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 import BaseCard from "../views/right_panel/BaseCard";
 import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
-import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice";
+import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+
+import ResizeNotifier from '../../utils/ResizeNotifier';
+
+interface IProps {
+    roomId: string;
+    onClose: () => void;
+    resizeNotifier: ResizeNotifier
+}
+
+interface IState {
+    timelineSet: EventTimelineSet;
+}
 
 /*
  * Component which shows the filtered file using a TimelinePanel
  */
 @replaceableComponent("structures.FilePanel")
-class FilePanel extends React.Component {
+class FilePanel extends React.Component<IProps, IState> {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onClose: PropTypes.func.isRequired,
-    };
-
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.
-    decryptingEvents = new Set();
+    private decryptingEvents = new Set<string>();
+    public noRoom: boolean;
 
     state = {
         timelineSet: null,
     };
 
-    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
+    private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: true, removed: true, data: any): void => {
         if (room?.roomId !== this.props?.roomId) return;
         if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
 
@@ -60,7 +72,7 @@ class FilePanel extends React.Component {
         }
     };
 
-    onEventDecrypted = (ev, err) => {
+    private onEventDecrypted = (ev: MatrixEvent, err?: any): void => {
         if (ev.getRoomId() !== this.props.roomId) return;
         const eventId = ev.getId();
 
@@ -70,7 +82,7 @@ class FilePanel extends React.Component {
         this.addEncryptedLiveEvent(ev);
     };
 
-    addEncryptedLiveEvent(ev, toStartOfTimeline) {
+    public addEncryptedLiveEvent(ev: MatrixEvent): void {
         if (!this.state.timelineSet) return;
 
         const timeline = this.state.timelineSet.getLiveTimeline();
@@ -84,7 +96,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    async componentDidMount() {
+    public async componentDidMount(): Promise<void> {
         const client = MatrixClientPeg.get();
 
         await this.updateTimelineSet(this.props.roomId);
@@ -105,7 +117,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         const client = MatrixClientPeg.get();
         if (client === null) return;
 
@@ -117,7 +129,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    async fetchFileEventsServer(room) {
+    public async fetchFileEventsServer(room: Room): Promise<void> {
         const client = MatrixClientPeg.get();
 
         const filter = new Filter(client.credentials.userId);
@@ -141,7 +153,7 @@ class FilePanel extends React.Component {
         return timelineSet;
     }
 
-    onPaginationRequest = (timelineWindow, direction, limit) => {
+    private onPaginationRequest = (timelineWindow: TimelineWindow, direction: string, limit: number): void => {
         const client = MatrixClientPeg.get();
         const eventIndex = EventIndexPeg.get();
         const roomId = this.props.roomId;
@@ -159,7 +171,7 @@ class FilePanel extends React.Component {
         }
     };
 
-    async updateTimelineSet(roomId: string) {
+    public async updateTimelineSet(roomId: string): Promise<void> {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
         const eventIndex = EventIndexPeg.get();
@@ -195,7 +207,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    render() {
+    public render() {
         if (MatrixClientPeg.get().isGuest()) {
             return <BaseCard
                 className="mx_FilePanel mx_RoomView_messageListWrapper"