Fix types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/RoomStatusBar.tsx

@@ -15,7 +15,16 @@ limitations under the License.
 */
 
 import React, { ReactNode } from "react";
-import { EventStatus, MatrixEvent, Room, MatrixError, SyncState, SyncStateData } from "matrix-js-sdk/src/matrix";
+import {
+    ClientEvent,
+    EventStatus,
+    MatrixError,
+    MatrixEvent,
+    Room,
+    RoomEvent,
+    SyncState,
+    SyncStateData,
+} from "matrix-js-sdk/src/matrix";
 
 import { Icon as WarningIcon } from "../../../res/img/feather-customised/warning-triangle.svg";
 import { _t, _td } from "../../languageHandler";
@@ -79,8 +88,8 @@ interface IProps {
 }
 
 interface IState {
-    syncState: SyncState;
+    syncState: SyncState | null;
-    syncStateData: SyncStateData;
+    syncStateData: SyncStateData | null;
     unsentMessages: MatrixEvent[];
     isResending: boolean;
 }
@@ -103,8 +112,8 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
 
     public componentDidMount(): void {
         const client = this.context;
-        client.on("sync", this.onSyncStateChange);
+        client.on(ClientEvent.Sync, this.onSyncStateChange);
-        client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+        client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
 
         this.checkSize();
     }
@@ -118,19 +127,19 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = this.context;
         if (client) {
-            client.removeListener("sync", this.onSyncStateChange);
+            client.removeListener(ClientEvent.Sync, this.onSyncStateChange);
-            client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+            client.removeListener(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
         }
     }
 
-    private onSyncStateChange = (state: SyncState, prevState: SyncState, data: SyncStateData): void => {
+    private onSyncStateChange = (state: SyncState, prevState: SyncState | null, data?: SyncStateData): void => {
         if (state === "SYNCING" && prevState === "SYNCING") {
             return;
         }
         if (this.unmounted) return;
         this.setState({
             syncState: state,
-            syncStateData: data,
+            syncStateData: data ?? null,
         });
     };
 

src/components/views/messages/MImageBody.tsx

@@ -20,7 +20,7 @@ import { Blurhash } from "react-blurhash";
 import classNames from "classnames";
 import { CSSTransition, SwitchTransition } from "react-transition-group";
 import { logger } from "matrix-js-sdk/src/logger";
-import { ClientEvent, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { ImageContent } from "matrix-js-sdk/src/types";
 import { Tooltip } from "@vector-im/compound-web";
 
@@ -71,23 +71,16 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private image = createRef<HTMLImageElement>();
     private timeout?: number;
     private sizeWatcher?: string;
-    private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
 
-    public constructor(props: IBodyProps, context: React.ContextType<typeof RoomContext>) {
+    public state: IState = {
-        super(props, context);
+        contentUrl: null,
-
+        thumbUrl: null,
-        this.reconnectedListener = createReconnectedListener(this.clearError);
+        imgError: false,
-
+        imgLoaded: false,
-        this.state = {
+        hover: false,
-            contentUrl: null,
+        showImage: SettingsStore.getValue("showImages"),
-            thumbUrl: null,
+        placeholder: Placeholder.NoImage,
-            imgError: false,
+    };
-            imgLoaded: false,
-            hover: false,
-            showImage: SettingsStore.getValue("showImages"),
-            placeholder: Placeholder.NoImage,
-        };
-    }
 
     protected showImage(): void {
         localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
@@ -160,10 +153,10 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         imgElement.src = url;
     };
 
-    private clearError = (): void => {
+    private reconnectedListener = createReconnectedListener((): void => {
         MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
         this.setState({ imgError: false });
-    };
+    });
 
     private onImageError = (): void => {
         // If the thumbnail failed to load then try again using the contentUrl

src/components/views/messages/MVideoBody.tsx

@@ -47,19 +47,15 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     private videoRef = React.createRef<HTMLVideoElement>();
     private sizeWatcher?: string;
 
-    public constructor(props: IBodyProps, context: React.ContextType<typeof RoomContext>) {
+    public state = {
-        super(props, context);
+        fetchingData: false,
-
+        decryptedUrl: null,
-        this.state = {
+        decryptedThumbnailUrl: null,
-            fetchingData: false,
+        decryptedBlob: null,
-            decryptedUrl: null,
+        error: null,
-            decryptedThumbnailUrl: null,
+        posterLoading: false,
-            decryptedBlob: null,
+        blurhashUrl: null,
-            error: null,
+    };
-            posterLoading: false,
-            blurhashUrl: null,
-        };
-    }
 
     private getContentUrl(): string | undefined {
         const content = this.props.mxEvent.getContent<MediaEventContent>();

src/components/views/messages/TextualBody.tsx

@@ -68,14 +68,10 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
     public static contextType = RoomContext;
     public declare context: React.ContextType<typeof RoomContext>;
 
-    public constructor(props: IBodyProps, context: React.ContextType<typeof RoomContext>) {
+    public state = {
-        super(props, context);
+        links: [],
-
+        widgetHidden: false,
-        this.state = {
+    };
-            links: [],
-            widgetHidden: false,
-        };
-    }
 
     public componentDidMount(): void {
         if (!this.props.editState) {

test/components/views/context_menus/MessageContextMenu-test.tsx

@@ -535,7 +535,7 @@ function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<IRoomState
 
 function createMenuWithContent(
     eventContent: object,
-    props?: Partial<React.ComponentProps<typeof MessageContextMenu>>,
+    props?: Partial<MessageContextMenu["props"]>,
     context?: Partial<IRoomState>,
 ): RenderResult {
     // XXX: We probably shouldn't be assuming all events are going to be message events, but considering this
@@ -552,7 +552,7 @@ function makeDefaultRoom(): Room {
 
 function createMenu(
     mxEvent: MatrixEvent,
-    props?: Partial<React.ComponentProps<typeof MessageContextMenu>>,
+    props?: Partial<MessageContextMenu["props"]>,
     context: Partial<IRoomState> = {},
     beacons: Map<BeaconIdentifier, Beacon> = new Map(),
     room: Room = makeDefaultRoom(),

test/components/views/messages/MLocationBody-test.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from "react";
+import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { LocationAssetType, ClientEvent, RoomMember, SyncState } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
@@ -42,7 +42,7 @@ describe("MLocationBody", () => {
             isGuest: jest.fn().mockReturnValue(false),
         });
         const defaultEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
-        const defaultProps: ComponentProps<typeof MLocationBody> = {
+        const defaultProps: MLocationBody["props"] = {
             mxEvent: defaultEvent,
             highlights: [],
             highlightLink: "",

test/components/views/messages/MVideoBody-test.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from "react";
+import React from "react";
 import { EventType, getHttpUriForMxc, IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { render, RenderResult } from "@testing-library/react";
 import fetchMock from "fetch-mock-jest";
@@ -117,7 +117,7 @@ function makeMVideoBody(w: number, h: number): RenderResult {
         content,
     });
 
-    const defaultProps: ComponentProps<typeof MVideoBody> = {
+    const defaultProps: MVideoBody["props"] = {
         mxEvent: event,
         highlights: [],
         highlightLink: "",

test/components/views/rooms/RoomList-test.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from "react";
+import React from "react";
 import { cleanup, queryByRole, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
@@ -53,7 +53,7 @@ describe("RoomList", () => {
     const client = MatrixClientPeg.safeGet();
     const store = SpaceStore.instance;
 
-    function getComponent(props: Partial<ComponentProps<typeof RoomList>> = {}): JSX.Element {
+    function getComponent(props: Partial<RoomList["props"]> = {}): JSX.Element {
         return (
             <RoomList
                 onKeyDown={jest.fn()}