Fix React contexts (#12855)

src/components/structures/EmbeddedPage.tsx

@@ -45,10 +45,11 @@ interface IState {
 
 export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
     private unmounted = false;
     private dispatcherRef: string | null = null;
 
-    public constructor(props: IProps, context: typeof MatrixClientContext) {
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
 
         this.state = {

src/components/structures/FilePanel.tsx

@@ -59,6 +59,7 @@ interface IState {
  */
 class FilePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.

src/components/structures/NotificationPanel.tsx

@@ -42,11 +42,12 @@ interface IState {
  */
 export default class NotificationPanel extends React.PureComponent<IProps, IState> {
     public static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     private card = React.createRef<HTMLDivElement>();
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
 
         this.state = {
             narrow: false,

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;
-    syncStateData: SyncStateData;
+    syncState: SyncState | null;
+    syncStateData: SyncStateData | null;
     unsentMessages: MatrixEvent[];
     isResending: boolean;
 }
@@ -88,9 +97,11 @@ interface IState {
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
     private unmounted = false;
     public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps, context: typeof MatrixClientContext) {
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
+        this.context = context; // XXX: workaround for lack of `declare` support on `public context!:` definition
 
         this.state = {
             syncState: this.context.getSyncState(),
@@ -102,8 +113,8 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
 
     public componentDidMount(): void {
         const client = this.context;
-        client.on("sync", this.onSyncStateChange);
-        client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+        client.on(ClientEvent.Sync, this.onSyncStateChange);
+        client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
 
         this.checkSize();
     }
@@ -117,19 +128,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("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+            client.removeListener(ClientEvent.Sync, this.onSyncStateChange);
+            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/structures/ThreadView.tsx

@@ -93,8 +93,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
     // Set by setEventId in ctor.
     private eventId!: string;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
 
         this.setEventId(this.props.mxEvent);
         const thread = this.props.room.getThread(this.eventId) ?? undefined;

src/components/structures/UserView.tsx

@@ -43,8 +43,8 @@ export default class UserView extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
         this.state = {
             loading: true,
         };

src/components/views/context_menus/MessageContextMenu.tsx

@@ -137,8 +137,8 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
 
     private reactButtonRef = createRef<any>(); // XXX Ref to a functional component
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
 
         this.state = {
             canRedact: false,

src/components/views/elements/AppTile.tsx

@@ -143,7 +143,7 @@ export default class AppTile extends React.Component<IProps, IState> {
     private unmounted = false;
 
     public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
-        super(props);
+        super(props, context);
         this.context = context; // XXX: workaround for lack of `declare` support on `public context!:` definition
 
         // Tiles in miniMode are floating, and therefore not docked

src/components/views/location/LocationPicker.tsx

@@ -55,8 +55,8 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     private geolocate?: maplibregl.GeolocateControl;
     private marker?: maplibregl.Marker;
 
-    public constructor(props: ILocationPickerProps) {
-        super(props);
+    public constructor(props: ILocationPickerProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         this.state = {
             position: undefined,

src/components/views/messages/EditHistoryMessage.tsx

@@ -59,7 +59,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
     private tooltips: Element[] = [];
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props);
+        super(props, context);
         this.context = context;
 
         const cli = this.context;

src/components/views/messages/MAudioBody.tsx

@@ -40,11 +40,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
     public static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;
 
-    public constructor(props: IBodyProps) {
-        super(props);
-
-        this.state = {};
-    }
+    public state: IState = {};
 
     public async componentDidMount(): Promise<void> {
         let buffer: ArrayBuffer;

src/components/views/messages/MFileBody.tsx

@@ -108,6 +108,8 @@ export default class MFileBody extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;
 
+    public state: IState = {};
+
     public static defaultProps = {
         showGenericPlaceholder: true,
     };
@@ -117,12 +119,6 @@ export default class MFileBody extends React.Component<IProps, IState> {
     private userDidClick = false;
     private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);
 
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {};
-    }
-
     private getContentUrl(): string | null {
         if (this.props.forExport) return null;
         const media = mediaFromContent(this.props.mxEvent.getContent());

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,14 +71,8 @@ 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) {
-        super(props);
-
-        this.reconnectedListener = createReconnectedListener(this.clearError);
-
-        this.state = {
+    public state: IState = {
         contentUrl: null,
         thumbUrl: null,
         imgError: false,
@@ -87,7 +81,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         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/MLocationBody.tsx

@@ -44,8 +44,8 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     private mapId: string;
     private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
 
-    public constructor(props: IBodyProps) {
-        super(props);
+    public constructor(props: IBodyProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         // multiple instances of same map might be in document
         // eg thread and main timeline, reply

src/components/views/messages/MPollBody.tsx

@@ -150,8 +150,8 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
     public context!: React.ContextType<typeof MatrixClientContext>;
     private seenEventIds: string[] = []; // Events we have already seen
 
-    public constructor(props: IBodyProps) {
-        super(props);
+    public constructor(props: IBodyProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         this.state = {
             selected: null,

src/components/views/messages/MVideoBody.tsx

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

src/components/views/messages/MessageActionBar.tsx

@@ -261,6 +261,7 @@ interface IMessageActionBarProps {
 
 export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
     public static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     public componentDidMount(): void {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {

src/components/views/messages/TextualBody.tsx

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

src/components/views/right_panel/TimelineCard.tsx

@@ -77,6 +77,7 @@ interface IState {
 
 export default class TimelineCard extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     private dispatcherRef?: string;
     private layoutWatcherRef?: string;
@@ -84,8 +85,8 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     private card = React.createRef<HTMLDivElement>();
     private readReceiptsSettingWatcher: string | undefined;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
         this.state = {
             showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId),
             layout: SettingsStore.getValue("layout"),

src/components/views/rooms/Autocomplete.tsx

@@ -56,9 +56,10 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     private containerRef = createRef<HTMLDivElement>();
 
     public static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
 
         this.state = {
             // list of completionResults, each containing completions

src/components/views/rooms/EditMessageComposer.tsx

@@ -137,7 +137,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
     private model!: EditorModel;
 
     public constructor(props: IEditMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
-        super(props);
+        super(props, context);
         this.context = context; // otherwise React will only set it prior to render due to type def above
 
         const isRestored = this.createEditorModel();

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -497,7 +497,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
     private readonly client = this.props.room.client;
     private readonly featureAskToJoinWatcher: string;
 
-    public constructor(props: IProps, context: IState) {
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
         const notiStore = RoomNotificationStateStore.instance.getRoomState(props.room);
         notiStore.on(NotificationStateEvents.Update, this.onNotificationUpdate);

src/components/views/rooms/MemberList.tsx

@@ -86,7 +86,7 @@ export default class MemberList extends React.Component<IProps, IState> {
     private tiles: Map<string, MemberTile> = new Map();
 
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
-        super(props);
+        super(props, context);
         this.state = this.getMembersState([], []);
         this.showPresence = context?.memberListStore.isPresenceEnabled() ?? true;
         this.mounted = true;

src/components/views/rooms/MessageComposer.tsx

@@ -127,8 +127,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
         isRichTextEnabled: true,
     };
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
         VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate);
 
         this.state = {

src/components/views/rooms/ReplyPreview.tsx

@@ -39,6 +39,7 @@ interface IProps {
 
 export default class ReplyPreview extends React.Component<IProps> {
     public static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     public render(): JSX.Element | null {
         if (!this.props.replyToEvent) return null;

src/components/views/rooms/RoomList.tsx

@@ -434,8 +434,8 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         this.state = {
             sublists: {},

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -66,8 +66,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
     public context!: React.ContextType<typeof RoomContext>;
     private voiceRecordingId: string;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
+        super(props, context);
 
         this.state = {};
 

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -53,7 +53,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     public context!: React.ContextType<typeof SDKContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
-        super(props);
+        super(props, context);
         this.context = context;
 
         this.state = {

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -42,8 +42,8 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         this.state = {
             appVersion: null,

src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx

@@ -61,8 +61,8 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: {}) {
-        super(props);
+    public constructor(props: {}, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         this.state = {
             mediaDevices: null,

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -38,7 +38,6 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import { toRightOf, useContextMenu } from "../../structures/ContextMenu";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
@@ -198,8 +197,6 @@ interface IItemState {
 }
 
 export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
-    public static contextType = MatrixClientContext;
-
     private buttonRef = createRef<HTMLDivElement>();
 
     public constructor(props: IItemProps) {

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()}