Convert RoomHeader to TS

Also add a type of OOBData... possibly this should be in the js-sdk,
but threepid invites themselves have a type in react-sdk so it can
live alongside it I guess (also I'm not entirely sure we actually
use it anymore...)

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -30,13 +30,14 @@ import { _t } from "../../../languageHandler";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IOOBData } from "../../../stores/ThreepidInviteStore";
 
 interface IProps {
     room: Room;
     avatarSize: number;
     displayBadge?: boolean;
     forceCount?: boolean;
-    oobData?: object;
+    oobData?: IOOBData;
     viewAvatarOnClick?: boolean;
 }
 

src/components/views/avatars/RoomAvatar.tsx

@@ -24,14 +24,14 @@ import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import { IOOBData } from '../../../stores/ThreepidInviteStore';
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     room?: Room;
-    // TODO: type when js-sdk has types
-    oobData?: any;
+    oobData?: IOOBData;
     width?: number;
     height?: number;
     resizeMethod?: ResizeMethod;

src/components/views/rooms/RoomHeader.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -31,53 +30,64 @@ import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { throttle } from 'lodash';
+import { Room } from '../../../../../matrix-js-sdk/src';
+import { E2EStatus } from '../../../utils/ShieldUtils';
+import { IOOBData } from '../../../stores/ThreepidInviteStore';
+import { SearchScope } from './SearchBar';
+
+export interface ISearchInfo {
+    searchTerm: string;
+    searchScope: SearchScope;
+    searchCount: number;
+}
+
+interface IProps {
+    room: Room,
+    oobData?: IOOBData,
+    inRoom: boolean,
+    onSettingsClick: () => void;
+    onSearchClick: () => void;
+    onForgetClick: () => void;
+    onCallPlaced: (PlaceCallType) => void;
+    onAppsClick: () => void;
+    e2eStatus: E2EStatus;
+    appsShown: boolean;
+    searchInfo: ISearchInfo;
+}
 
 @replaceableComponent("views.rooms.RoomHeader")
-export default class RoomHeader extends React.Component {
-    static propTypes = {
-        room: PropTypes.object,
-        oobData: PropTypes.object,
-        inRoom: PropTypes.bool,
-        onSettingsClick: PropTypes.func,
-        onSearchClick: PropTypes.func,
-        onLeaveClick: PropTypes.func,
-        e2eStatus: PropTypes.string,
-        onAppsClick: PropTypes.func,
-        appsShown: PropTypes.bool,
-        onCallPlaced: PropTypes.func, // (PlaceCallType) => void;
-    };
-
+export default class RoomHeader extends React.Component<IProps> {
     static defaultProps = {
         editing: false,
         inRoom: false,
     };
 
-    componentDidMount() {
+    public componentDidMount() {
         const cli = MatrixClientPeg.get();
-        cli.on("RoomState.events", this._onRoomStateEvents);
+        cli.on("RoomState.events", this.onRoomStateEvents);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener("RoomState.events", this._onRoomStateEvents);
+            cli.removeListener("RoomState.events", this.onRoomStateEvents);
         }
     }
 
-    _onRoomStateEvents = (event, state) => {
+    private onRoomStateEvents = (event, state) => {
         if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
             return;
         }
 
         // redisplay the room name, topic, etc.
-        this._rateLimitedUpdate();
+        this.rateLimitedUpdate();
     };
 
-    _rateLimitedUpdate = throttle(() => {
+    private rateLimitedUpdate = throttle(() => {
         this.forceUpdate();
     }, 500, { leading: true, trailing: true });
 
-    render() {
+    public render() {
         let searchStatus = null;
 
         // don't display the search count until the search completes and