Prefer MatrixClientContext over MatrixClientPeg (matrix-org#10986)

Author: t3chguy

src/components/structures/UserView.tsx

@@ -20,7 +20,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import { MatrixClientPeg } from "../../MatrixClientPeg";
 import Modal from "../../Modal";
 import { _t } from "../../languageHandler";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
@@ -30,6 +29,7 @@ import Spinner from "../views/elements/Spinner";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
 import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
 
 interface IProps {
     userId: string;
@@ -42,6 +42,9 @@ interface IState {
 }
 
 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);
         this.state = {
@@ -65,11 +68,10 @@ export default class UserView extends React.Component<IProps, IState> {
     }
 
     private async loadProfileInfo(): Promise<void> {
-        const cli = MatrixClientPeg.get();
         this.setState({ loading: true });
         let profileInfo: Awaited<ReturnType<MatrixClient["getProfileInfo"]>>;
         try {
-            profileInfo = await cli.getProfileInfo(this.props.userId);
+            profileInfo = await this.context.getProfileInfo(this.props.userId);
         } catch (err) {
             Modal.createDialog(ErrorDialog, {
                 title: _t("Could not load user profile"),

src/components/views/messages/EditHistoryMessage.tsx

@@ -25,13 +25,13 @@ import { formatTime } from "../../../DateUtils";
 import { pillifyLinks, unmountPills } from "../../../utils/pillify";
 import { tooltipifyLinks, unmountTooltips } from "../../../utils/tooltipify";
 import { _t } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import RedactedBody from "./RedactedBody";
 import AccessibleButton from "../elements/AccessibleButton";
 import ConfirmAndWaitRedactDialog from "../dialogs/ConfirmAndWaitRedactDialog";
 import ViewSource from "../../structures/ViewSource";
 import SettingsStore from "../../../settings/SettingsStore";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 function getReplacedContent(event: MatrixEvent): IContent {
     const originalContent = event.getOriginalContent();
@@ -52,14 +52,18 @@ interface IState {
 }
 
 export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private content = createRef<HTMLDivElement>();
     private pills: Element[] = [];
     private tooltips: Element[] = [];
 
-    public constructor(props: IProps) {
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props);
+        this.context = context;
 
-        const cli = MatrixClientPeg.get();
+        const cli = this.context;
         const userId = cli.getSafeUserId();
         const event = this.props.mxEvent;
         const room = cli.getRoom(event.getRoomId());
@@ -74,7 +78,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
 
     private onRedactClick = async (): Promise<void> => {
         const event = this.props.mxEvent;
-        const cli = MatrixClientPeg.get();
+        const cli = this.context;
 
         Modal.createDialog(
             ConfirmAndWaitRedactDialog,
@@ -102,7 +106,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
     private pillifyLinks(): void {
         // not present for redacted events
         if (this.content.current) {
-            pillifyLinks(MatrixClientPeg.get(), this.content.current.children, this.props.mxEvent, this.pills);
+            pillifyLinks(this.context, this.content.current.children, this.props.mxEvent, this.pills);
         }
     }
 

src/components/views/right_panel/EncryptionPanel.tsx

@@ -27,14 +27,14 @@ import { User } from "matrix-js-sdk/src/models/user";
 
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { ensureDMExists } from "../../../createRoom";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 import Modal from "../../../Modal";
 import { _t } from "../../../languageHandler";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import ErrorDialog from "../dialogs/ErrorDialog";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@@ -49,6 +49,7 @@ interface IProps {
 }
 
 const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
+    const cli = useMatrixClientContext();
     const { verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted } = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
@@ -106,7 +107,6 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
 
     const onStartVerification = useCallback(async (): Promise<void> => {
         setRequesting(true);
-        const cli = MatrixClientPeg.get();
         let verificationRequest_: VerificationRequest;
         try {
             const roomId = await ensureDMExists(cli, member.userId);
@@ -135,14 +135,12 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
             });
         }
         if (!RightPanelStore.instance.isOpen) RightPanelStore.instance.togglePanel(null);
-    }, [member]);
+    }, [cli, member]);
 
     const requested: boolean =
         (!request && isRequesting) ||
         (!!request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
-    const isSelfVerification = request
-        ? request.isSelfVerification
-        : member.userId === MatrixClientPeg.get().getUserId();
+    const isSelfVerification = request ? request.isSelfVerification : member.userId === cli.getUserId();
 
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (!!request && request.initiatedByMe);

src/components/views/settings/tabs/room/BridgeSettingsTab.tsx

@@ -17,12 +17,13 @@ limitations under the License.
 import React, { ReactNode } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../../languageHandler";
-import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import BridgeTile from "../../BridgeTile";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
@@ -36,14 +37,16 @@ interface IProps {
 }
 
 export default class BridgeSettingsTab extends React.Component<IProps> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private renderBridgeCard(event: MatrixEvent, room: Room | null): ReactNode {
         const content = event.getContent();
         if (!room || !content?.channel || !content.protocol) return null;
         return <BridgeTile key={event.getId()} room={room} ev={event} />;
     }
 
-    public static getBridgeStateEvents(roomId: string): MatrixEvent[] {
-        const client = MatrixClientPeg.get();
+    public static getBridgeStateEvents(client: MatrixClient, roomId: string): MatrixEvent[] {
         const roomState = client.getRoom(roomId)?.currentState;
         if (!roomState) return [];
 
@@ -53,7 +56,7 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
     public render(): React.ReactNode {
         // This settings tab will only be invoked if the following function returns more
         // than 0 events, so no validation is needed at this stage.
-        const bridgeEvents = BridgeSettingsTab.getBridgeStateEvents(this.props.room.roomId);
+        const bridgeEvents = BridgeSettingsTab.getBridgeStateEvents(this.context, this.props.room.roomId);
         const room = this.props.room;
 
         let content: JSX.Element;

src/components/views/settings/tabs/room/NotificationSettingsTab.tsx

@@ -18,7 +18,6 @@ import React, { createRef } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../../languageHandler";
-import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
 import Notifier from "../../../../../Notifier";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -116,7 +115,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
             type = "audio/ogg";
         }
 
-        const { content_uri: url } = await MatrixClientPeg.get().uploadContent(this.state.uploadedFile, {
+        const { content_uri: url } = await this.context.uploadContent(this.state.uploadedFile, {
             type,
         });
 

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -25,7 +25,6 @@ import { IContent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import { _t, _td } from "../../../../../languageHandler";
-import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import ErrorDialog from "../../../dialogs/ErrorDialog";
@@ -38,6 +37,7 @@ import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
 import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 interface IEventShowOpts {
     isState?: boolean;
@@ -91,16 +91,17 @@ interface IBannedUserProps {
 }
 
 export class BannedUser extends React.Component<IBannedUserProps> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private onUnbanClick = (): void => {
-        MatrixClientPeg.get()
-            .unban(this.props.member.roomId, this.props.member.userId)
-            .catch((err) => {
-                logger.error("Failed to unban: " + err);
-                Modal.createDialog(ErrorDialog, {
-                    title: _t("Error"),
-                    description: _t("Failed to unban"),
-                });
+        this.context.unban(this.props.member.roomId, this.props.member.userId).catch((err) => {
+            logger.error("Failed to unban: " + err);
+            Modal.createDialog(ErrorDialog, {
+                title: _t("Error"),
+                description: _t("Failed to unban"),
             });
+        });
     };
 
     public render(): React.ReactNode {
@@ -136,12 +137,15 @@ interface IProps {
 }
 
 export default class RolesRoomSettingsTab extends React.Component<IProps> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     public componentDidMount(): void {
-        MatrixClientPeg.get().on(RoomStateEvent.Update, this.onRoomStateUpdate);
+        this.context.on(RoomStateEvent.Update, this.onRoomStateUpdate);
     }
 
     public componentWillUnmount(): void {
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         if (client) {
             client.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
         }
@@ -173,7 +177,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
     }
 
     private onPowerLevelsChanged = (value: number, powerLevelKey: string): void => {
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         const room = this.props.room;
         const plEvent = room.currentState.getStateEvents(EventType.RoomPowerLevels, "");
         let plContent = plEvent?.getContent() ?? {};
@@ -215,7 +219,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
     };
 
     private onUserPowerLevelChanged = (value: number, powerLevelKey: string): void => {
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         const room = this.props.room;
         const plEvent = room.currentState.getStateEvents(EventType.RoomPowerLevels, "");
         let plContent = plEvent?.getContent() ?? {};
@@ -241,7 +245,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
     };
 
     public render(): React.ReactNode {
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         const room = this.props.room;
         const isSpaceRoom = room.isSpaceRoom();
 

src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx

@@ -21,7 +21,6 @@ import { RoomState } from "matrix-js-sdk/src/models/room-state";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../../languageHandler";
-import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import SettingsSubsection from "../../shared/SettingsSubsection";
 import SettingsTab from "../SettingsTab";
@@ -38,14 +37,17 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
     const isPublic = useMemo(() => room.getJoinRule() === JoinRule.Public, [room]);
     const [content, events, maySend] = useRoomState(
         room,
-        useCallback((state: RoomState) => {
-            const content = state?.getStateEvents(EventType.RoomPowerLevels, "")?.getContent();
-            return [
-                content ?? {},
-                content?.["events"] ?? {},
-                state?.maySendStateEvent(EventType.RoomPowerLevels, MatrixClientPeg.get().getSafeUserId()),
-            ];
-        }, []),
+        useCallback(
+            (state: RoomState) => {
+                const content = state?.getStateEvents(EventType.RoomPowerLevels, "")?.getContent();
+                return [
+                    content ?? {},
+                    content?.["events"] ?? {},
+                    state?.maySendStateEvent(EventType.RoomPowerLevels, room.client.getSafeUserId()),
+                ];
+            },
+            [room.client],
+        ),
     );
 
     const [elementCallEnabled, setElementCallEnabled] = useState<boolean>(() => {
@@ -69,12 +71,12 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
                 events[ElementCall.MEMBER_EVENT_TYPE.name] = adminLevel;
             }
 
-            MatrixClientPeg.get().sendStateEvent(room.roomId, EventType.RoomPowerLevels, {
+            room.client.sendStateEvent(room.roomId, EventType.RoomPowerLevels, {
                 events: events,
                 ...content,
             });
         },
-        [room.roomId, content, events, isPublic],
+        [room.client, room.roomId, content, events, isPublic],
     );
 
     const brand = SdkConfig.get("element_call").brand ?? DEFAULTS.element_call.brand;

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

@@ -19,7 +19,6 @@ import React, { ChangeEvent, ReactNode } from "react";
 
 import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
-import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import SettingsFlag from "../../../elements/SettingsFlag";
 import Field from "../../../elements/Field";
@@ -34,6 +33,7 @@ import ImageSizePanel from "../../ImageSizePanel";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 interface IProps {}
 
@@ -49,6 +49,9 @@ interface IState {
 }
 
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
 
     private unmounted = false;
@@ -66,7 +69,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     public async componentDidMount(): Promise<void> {
         // Fetch the current user profile for the message preview
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         const userId = client.getUserId()!;
         const profileInfo = await client.getProfileInfo(userId);
         if (this.unmounted) return;