From b6addb4118df6b0369accea03b3bc34419c5437b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 1 Aug 2024 13:01:05 +0100 Subject: [PATCH] Fix React contexts (#12855) --- src/components/structures/EmbeddedPage.tsx | 3 +- src/components/structures/FilePanel.tsx | 1 + .../structures/NotificationPanel.tsx | 5 +-- src/components/structures/RoomStatusBar.tsx | 31 +++++++++++++------ src/components/structures/ThreadView.tsx | 4 +-- src/components/structures/UserView.tsx | 4 +-- .../context_menus/MessageContextMenu.tsx | 4 +-- src/components/views/elements/AppTile.tsx | 2 +- .../views/location/LocationPicker.tsx | 4 +-- .../views/messages/EditHistoryMessage.tsx | 2 +- src/components/views/messages/MAudioBody.tsx | 6 +--- src/components/views/messages/MFileBody.tsx | 8 ++--- src/components/views/messages/MImageBody.tsx | 31 +++++++------------ .../views/messages/MLocationBody.tsx | 4 +-- src/components/views/messages/MPollBody.tsx | 4 +-- src/components/views/messages/MVideoBody.tsx | 22 ++++++------- .../views/messages/MessageActionBar.tsx | 1 + src/components/views/messages/TextualBody.tsx | 12 +++---- .../views/right_panel/TimelineCard.tsx | 5 +-- src/components/views/rooms/Autocomplete.tsx | 5 +-- .../views/rooms/EditMessageComposer.tsx | 2 +- .../views/rooms/LegacyRoomHeader.tsx | 2 +- src/components/views/rooms/MemberList.tsx | 2 +- .../views/rooms/MessageComposer.tsx | 4 +-- src/components/views/rooms/ReplyPreview.tsx | 1 + src/components/views/rooms/RoomList.tsx | 4 +-- .../views/rooms/VoiceRecordComposerTile.tsx | 4 +-- .../tabs/user/GeneralUserSettingsTab.tsx | 2 +- .../tabs/user/HelpUserSettingsTab.tsx | 4 +-- .../tabs/user/VoiceUserSettingsTab.tsx | 4 +-- .../views/spaces/SpaceTreeLevel.tsx | 3 -- .../context_menus/MessageContextMenu-test.tsx | 4 +-- .../views/messages/MLocationBody-test.tsx | 4 +-- .../views/messages/MVideoBody-test.tsx | 4 +-- test/components/views/rooms/RoomList-test.tsx | 4 +-- 35 files changed, 99 insertions(+), 107 deletions(-) diff --git a/src/components/structures/EmbeddedPage.tsx b/src/components/structures/EmbeddedPage.tsx index c0d7835747..4c36412cb6 100644 --- a/src/components/structures/EmbeddedPage.tsx +++ b/src/components/structures/EmbeddedPage.tsx @@ -45,10 +45,11 @@ interface IState { export default class EmbeddedPage extends React.PureComponent { public static contextType = MatrixClientContext; + public context!: React.ContextType; private unmounted = false; private dispatcherRef: string | null = null; - public constructor(props: IProps, context: typeof MatrixClientContext) { + public constructor(props: IProps, context: React.ContextType) { super(props, context); this.state = { diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 9c3550804f..7744862703 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -59,6 +59,7 @@ interface IState { */ class FilePanel extends React.Component { public static contextType = RoomContext; + public context!: React.ContextType; // This is used to track if a decrypted event was a live event and should be // added to the timeline. diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index dff2716c19..1f9fb4c57f 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/src/components/structures/NotificationPanel.tsx @@ -42,11 +42,12 @@ interface IState { */ export default class NotificationPanel extends React.PureComponent { public static contextType = RoomContext; + public context!: React.ContextType; private card = React.createRef(); - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { narrow: false, diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 311f6b89b5..ce489a5019 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/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 { private unmounted = false; public static contextType = MatrixClientContext; + public context!: React.ContextType; - public constructor(props: IProps, context: typeof MatrixClientContext) { + public constructor(props: IProps, context: React.ContextType) { 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 { 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 { // 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, }); }; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index a345faf9f7..dbe2c59551 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -93,8 +93,8 @@ export default class ThreadView extends React.Component { // Set by setEventId in ctor. private eventId!: string; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.setEventId(this.props.mxEvent); const thread = this.props.room.getThread(this.eventId) ?? undefined; diff --git a/src/components/structures/UserView.tsx b/src/components/structures/UserView.tsx index 4d5dd258e0..4398af851a 100644 --- a/src/components/structures/UserView.tsx +++ b/src/components/structures/UserView.tsx @@ -43,8 +43,8 @@ export default class UserView extends React.Component { public static contextType = MatrixClientContext; public context!: React.ContextType; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { loading: true, }; diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx index e0fca0a4c0..77fc7215eb 100644 --- a/src/components/views/context_menus/MessageContextMenu.tsx +++ b/src/components/views/context_menus/MessageContextMenu.tsx @@ -137,8 +137,8 @@ export default class MessageContextMenu extends React.Component private reactButtonRef = createRef(); // XXX Ref to a functional component - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { canRedact: false, diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 0820ac62d1..1612154c94 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -143,7 +143,7 @@ export default class AppTile extends React.Component { private unmounted = false; public constructor(props: IProps, context: ContextType) { - 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 diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx index 2ddd19dfe3..75437296d9 100644 --- a/src/components/views/location/LocationPicker.tsx +++ b/src/components/views/location/LocationPicker.tsx @@ -55,8 +55,8 @@ class LocationPicker extends React.Component { private geolocate?: maplibregl.GeolocateControl; private marker?: maplibregl.Marker; - public constructor(props: ILocationPickerProps) { - super(props); + public constructor(props: ILocationPickerProps, context: React.ContextType) { + super(props, context); this.state = { position: undefined, diff --git a/src/components/views/messages/EditHistoryMessage.tsx b/src/components/views/messages/EditHistoryMessage.tsx index 125154c4d9..bd7eccba3e 100644 --- a/src/components/views/messages/EditHistoryMessage.tsx +++ b/src/components/views/messages/EditHistoryMessage.tsx @@ -59,7 +59,7 @@ export default class EditHistoryMessage extends React.PureComponent) { - super(props); + super(props, context); this.context = context; const cli = this.context; diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx index de30b65f72..5e8d9f2436 100644 --- a/src/components/views/messages/MAudioBody.tsx +++ b/src/components/views/messages/MAudioBody.tsx @@ -40,11 +40,7 @@ export default class MAudioBody extends React.PureComponent public static contextType = RoomContext; public context!: React.ContextType; - public constructor(props: IBodyProps) { - super(props); - - this.state = {}; - } + public state: IState = {}; public async componentDidMount(): Promise { let buffer: ArrayBuffer; diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx index bf4922615f..1da3cafc65 100644 --- a/src/components/views/messages/MFileBody.tsx +++ b/src/components/views/messages/MFileBody.tsx @@ -108,6 +108,8 @@ export default class MFileBody extends React.Component { public static contextType = RoomContext; public context!: React.ContextType; + public state: IState = {}; + public static defaultProps = { showGenericPlaceholder: true, }; @@ -117,12 +119,6 @@ export default class MFileBody extends React.Component { 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()); diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 36f3a85168..547972cdb0 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/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 { private image = createRef(); 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 { 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 diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx index eedf5a6046..276b22eeed 100644 --- a/src/components/views/messages/MLocationBody.tsx +++ b/src/components/views/messages/MLocationBody.tsx @@ -44,8 +44,8 @@ export default class MLocationBody extends React.Component { private mapId: string; private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync]; - public constructor(props: IBodyProps) { - super(props); + public constructor(props: IBodyProps, context: React.ContextType) { + super(props, context); // multiple instances of same map might be in document // eg thread and main timeline, reply diff --git a/src/components/views/messages/MPollBody.tsx b/src/components/views/messages/MPollBody.tsx index d777ed9d77..fadab6e2a5 100644 --- a/src/components/views/messages/MPollBody.tsx +++ b/src/components/views/messages/MPollBody.tsx @@ -150,8 +150,8 @@ export default class MPollBody extends React.Component { public context!: React.ContextType; private seenEventIds: string[] = []; // Events we have already seen - public constructor(props: IBodyProps) { - super(props); + public constructor(props: IBodyProps, context: React.ContextType) { + super(props, context); this.state = { selected: null, diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index be6ae4442c..143176a155 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -47,19 +47,15 @@ export default class MVideoBody extends React.PureComponent private videoRef = React.createRef(); 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(); diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 3cfc252b8c..f6e01dcd10 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -261,6 +261,7 @@ interface IMessageActionBarProps { export default class MessageActionBar extends React.PureComponent { public static contextType = RoomContext; + public context!: React.ContextType; public componentDidMount(): void { if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) { diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index b47c2c2e45..2133eb5fe8 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -68,14 +68,10 @@ export default class TextualBody extends React.Component { public static contextType = RoomContext; public context!: React.ContextType; - public constructor(props: IBodyProps) { - super(props); - - this.state = { - links: [], - widgetHidden: false, - }; - } + public state = { + links: [], + widgetHidden: false, + }; public componentDidMount(): void { if (!this.props.editState) { diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 7dfcd63307..67aca93090 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -77,6 +77,7 @@ interface IState { export default class TimelineCard extends React.Component { public static contextType = RoomContext; + public context!: React.ContextType; private dispatcherRef?: string; private layoutWatcherRef?: string; @@ -84,8 +85,8 @@ export default class TimelineCard extends React.Component { private card = React.createRef(); private readReceiptsSettingWatcher: string | undefined; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId), layout: SettingsStore.getValue("layout"), diff --git a/src/components/views/rooms/Autocomplete.tsx b/src/components/views/rooms/Autocomplete.tsx index 8eedf0867e..840fd098da 100644 --- a/src/components/views/rooms/Autocomplete.tsx +++ b/src/components/views/rooms/Autocomplete.tsx @@ -56,9 +56,10 @@ export default class Autocomplete extends React.PureComponent { private containerRef = createRef(); public static contextType = RoomContext; + public context!: React.ContextType; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { // list of completionResults, each containing completions diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx index fabca13a1c..b379da2ea6 100644 --- a/src/components/views/rooms/EditMessageComposer.tsx +++ b/src/components/views/rooms/EditMessageComposer.tsx @@ -137,7 +137,7 @@ class EditMessageComposer extends React.Component) { - 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(); diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index b3f76e980f..f16e324d80 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -497,7 +497,7 @@ export default class RoomHeader extends React.Component { private readonly client = this.props.room.client; private readonly featureAskToJoinWatcher: string; - public constructor(props: IProps, context: IState) { + public constructor(props: IProps, context: React.ContextType) { super(props, context); const notiStore = RoomNotificationStateStore.instance.getRoomState(props.room); notiStore.on(NotificationStateEvents.Update, this.onNotificationUpdate); diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index dea4dd58d3..1ffca0821c 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -86,7 +86,7 @@ export default class MemberList extends React.Component { private tiles: Map = new Map(); public constructor(props: IProps, context: React.ContextType) { - super(props); + super(props, context); this.state = this.getMembersState([], []); this.showPresence = context?.memberListStore.isPresenceEnabled() ?? true; this.mounted = true; diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index bb4b4c7245..d1a72a6988 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -127,8 +127,8 @@ export class MessageComposer extends React.Component { isRichTextEnabled: true, }; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate); this.state = { diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx index 50c625c428..009d8d21a5 100644 --- a/src/components/views/rooms/ReplyPreview.tsx +++ b/src/components/views/rooms/ReplyPreview.tsx @@ -39,6 +39,7 @@ interface IProps { export default class ReplyPreview extends React.Component { public static contextType = RoomContext; + public context!: React.ContextType; public render(): JSX.Element | null { if (!this.props.replyToEvent) return null; diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index d088fbc927..10fcca7709 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -434,8 +434,8 @@ export default class RoomList extends React.PureComponent { public static contextType = MatrixClientContext; public context!: React.ContextType; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { sublists: {}, diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 1001def386..333bd248e1 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -66,8 +66,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent; private voiceRecordingId: string; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = {}; diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx index 8405dd83ba..40affa35b3 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx @@ -53,7 +53,7 @@ export default class GeneralUserSettingsTab extends React.Component; public constructor(props: IProps, context: React.ContextType) { - super(props); + super(props, context); this.context = context; this.state = { diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index 2bf2c0f604..eace2caa8d 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -42,8 +42,8 @@ export default class HelpUserSettingsTab extends React.Component public static contextType = MatrixClientContext; public context!: React.ContextType; - public constructor(props: IProps) { - super(props); + public constructor(props: IProps, context: React.ContextType) { + super(props, context); this.state = { appVersion: null, diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index 758a48e1c5..ad8de75338 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/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; - public constructor(props: {}) { - super(props); + public constructor(props: {}, context: React.ContextType) { + super(props, context); this.state = { mediaDevices: null, diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index 253e7bf881..fc9511f52a 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/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 { - public static contextType = MatrixClientContext; - private buttonRef = createRef(); public constructor(props: IItemProps) { diff --git a/test/components/views/context_menus/MessageContextMenu-test.tsx b/test/components/views/context_menus/MessageContextMenu-test.tsx index 8fd2f9f416..2be71e39cb 100644 --- a/test/components/views/context_menus/MessageContextMenu-test.tsx +++ b/test/components/views/context_menus/MessageContextMenu-test.tsx @@ -535,7 +535,7 @@ function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial>, + props?: Partial, context?: Partial, ): 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>, + props?: Partial, context: Partial = {}, beacons: Map = new Map(), room: Room = makeDefaultRoom(), diff --git a/test/components/views/messages/MLocationBody-test.tsx b/test/components/views/messages/MLocationBody-test.tsx index 1cdcb65767..9f156eac94 100644 --- a/test/components/views/messages/MLocationBody-test.tsx +++ b/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 = { + const defaultProps: MLocationBody["props"] = { mxEvent: defaultEvent, highlights: [], highlightLink: "", diff --git a/test/components/views/messages/MVideoBody-test.tsx b/test/components/views/messages/MVideoBody-test.tsx index f9bf4d8101..4e526fb802 100644 --- a/test/components/views/messages/MVideoBody-test.tsx +++ b/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 = { + const defaultProps: MVideoBody["props"] = { mxEvent: event, highlights: [], highlightLink: "", diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx index d92b25e347..9d7650b2a9 100644 --- a/test/components/views/rooms/RoomList-test.tsx +++ b/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> = {}): JSX.Element { + function getComponent(props: Partial = {}): JSX.Element { return (