Fix React contexts (#12855)

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,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) {
-        super(props);
-
-        this.reconnectedListener = createReconnectedListener(this.clearError);
-
-        this.state = {
-            contentUrl: null,
-            thumbUrl: null,
-            imgError: false,
-            imgLoaded: false,
-            hover: false,
-            showImage: SettingsStore.getValue("showImages"),
-            placeholder: Placeholder.NoImage,
-        };
-    }
+    public state: IState = {
+        contentUrl: null,
+        thumbUrl: null,
+        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/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,19 +47,15 @@ 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 = {
-            fetchingData: false,
-            decryptedUrl: null,
-            decryptedThumbnailUrl: null,
-            decryptedBlob: null,
-            error: null,
-            posterLoading: false,
-            blurhashUrl: null,
-        };
-    }
+    public state = {
+        fetchingData: false,
+        decryptedUrl: null,
+        decryptedThumbnailUrl: null,
+        decryptedBlob: null,
+        error: null,
+        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 = {
-            links: [],
-            widgetHidden: false,
-        };
-    }
+    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) {