Convert /structures to TS

src/components/structures/EmbeddedPage.tsx

@@ -25,6 +25,7 @@ import { MatrixClientPeg } from '../../MatrixClientPeg';
 import classnames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
+import { ActionPayload } from "../../dispatcher/payloads";
 
 interface IProps {
     // URL to request embedded page content from
@@ -43,14 +44,12 @@ interface IState {
 
 export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    private unmounted = true;
-    private dispatcherRef: string;
+    private unmounted = false;
+    private dispatcherRef: string = null;
 
     constructor(props: IProps, context: typeof MatrixClientContext) {
         super(props, context);
 
-        this.dispatcherRef = null;
-
         this.state = {
             page: '',
         };
@@ -105,7 +104,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
         if (this.dispatcherRef !== null) dis.unregister(this.dispatcherRef);
     }
 
-    private onAction = (payload): void => {
+    private onAction = (payload: ActionPayload): void => {
         // HACK: Workaround for the context's MatrixClient not being set up at render time.
         if (payload.action === 'client_started') {
             this.forceUpdate();

src/components/structures/GenericErrorPage.tsx

@@ -18,8 +18,8 @@ import React from 'react';
 import { replaceableComponent } from "../../utils/replaceableComponent";
 
 interface IProps {
-    title: JSX.Element;
-    message: JSX.Element;
+    title: React.ReactNode;
+    message: React.ReactNode;
 }
 
 @replaceableComponent("structures.GenericErrorPage")

src/components/structures/IndicatorScrollbar.tsx

@@ -29,7 +29,7 @@ interface IProps {
     // with no vertical scroll opportunity.
     verticalScrollsHorizontally?: boolean;
 
-    children: JSX.Element | JSX.Element[];
+    children: React.ReactNode;
     className: string;
 }
 
@@ -65,8 +65,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
     };
 
     public componentDidUpdate(prevProps: IProps): void {
-        const prevLen = ("length" in prevProps?.children) ? prevProps.children.length : 0;
-        const curLen = ("length" in this.props?.children) ? this.props.children.length : 0;
+        const prevLen = React.Children.count(prevProps.children);
+        const curLen = React.Children.count(this.props.children);
         // check overflow only if amount of children changes.
         // if we don't guard here, we end up with an infinite
         // render > componentDidUpdate > checkOverflow > setState > render loop

src/components/structures/RoomStatusBar.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import { _t, _td } from '../../languageHandler';
-import { MatrixClientPeg } from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
 import { messageForResourceLimitError } from '../../utils/ErrorUtils';
@@ -30,6 +29,7 @@ import InlineSpinner from "../views/elements/InlineSpinner";
 import { SyncState } from "matrix-js-sdk/src/sync.api";
 import { ISyncStateData } from "matrix-js-sdk/src/sync";
 import { Room } from "matrix-js-sdk/src/models/room";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -84,20 +84,23 @@ interface IState {
 
 @replaceableComponent("structures.RoomStatusBar")
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
+    public static contextType = MatrixClientContext;
+
+    constructor(props: IProps, context: typeof MatrixClientContext) {
+        super(props, context);
 
         this.state = {
-            syncState: MatrixClientPeg.get().getSyncState(),
-            syncStateData: MatrixClientPeg.get().getSyncStateData(),
+            syncState: this.context.getSyncState(),
+            syncStateData: this.context.getSyncStateData(),
             unsentMessages: getUnsentMessages(this.props.room),
             isResending: false,
         };
     }
 
     public componentDidMount(): void {
-        MatrixClientPeg.get().on("sync", this.onSyncStateChange);
-        MatrixClientPeg.get().on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+        const client = this.context;
+        client.on("sync", this.onSyncStateChange);
+        client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
 
         this.checkSize();
     }
@@ -108,7 +111,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
 
     public componentWillUnmount(): void {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
             client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);

src/components/structures/UserView.tsx

@@ -28,7 +28,6 @@ import MainSplit from "./MainSplit";
 import RightPanel from "./RightPanel";
 import Spinner from "../views/elements/Spinner";
 import ResizeNotifier from "../../utils/ResizeNotifier";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
 
 interface IProps {
     userId?: string;
@@ -78,10 +77,9 @@ export default class UserView extends React.Component<IProps, IState> {
             this.setState({ loading: false });
             return;
         }
-        const fakeRoomState = new RoomState("roomId");
         const fakeEvent = new MatrixEvent({ type: "m.room.member", content: profileInfo });
         const member = new RoomMember(null, this.props.userId);
-        member.setMembershipEvent(fakeEvent, fakeRoomState);
+        member.setMembershipEvent(fakeEvent);
         this.setState({ member, loading: false });
     }
 

src/components/structures/ViewSource.tsx

@@ -29,7 +29,6 @@ import { IDialogProps } from "../views/dialogs/IDialogProps";
 import BaseDialog from "../views/dialogs/BaseDialog";
 
 interface IProps extends IDialogProps {
-    onFinished: () => void;
     mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu
 }