Replace MatrixClientPeg in modals with MatrixClientContext

src/Modal.tsx

@@ -24,6 +24,8 @@ import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter"
 import dis from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
 import { Defaultize } from "./@types/common";
+import MatrixClientContext from "./contexts/MatrixClientContext";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
@@ -184,7 +186,11 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the dialog from a button click!
-        modal.elem = <AsyncWrapper key={modalCount} prom={prom} {...props} onFinished={closeDialog} />;
+        modal.elem = (
+            <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
+                <AsyncWrapper key={modalCount} prom={prom} {...props} onFinished={closeDialog} />
+            </MatrixClientContext.Provider>
+        );
         modal.close = closeDialog;
 
         return { modal, closeDialog, onFinishedProm };

src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx

@@ -17,22 +17,21 @@ limitations under the License.
 
 import FileSaver from "file-saver";
 import React, { ChangeEvent } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../languageHandler";
 import * as MegolmExportEncryption from "../../../../utils/MegolmExportEncryption";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import Field from "../../../../components/views/elements/Field";
 import { KeysStartingWith } from "../../../../@types/common";
+import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 
 enum Phase {
     Edit = "edit",
     Exporting = "exporting",
 }
 
 interface IProps {
-    matrixClient: MatrixClient;
     onFinished(doExport?: boolean): void;
 }
 
@@ -46,6 +45,9 @@ interface IState {
 type AnyPassphrase = KeysStartingWith<IState, "passphrase">;
 
 export default class ExportE2eKeysDialog extends React.Component<IProps, IState> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private unmounted = false;
 
     public constructor(props: IProps) {
@@ -85,7 +87,7 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
         // asynchronous ones.
         Promise.resolve()
             .then(() => {
-                return this.props.matrixClient.exportRoomKeys();
+                return this.context.exportRoomKeys();
             })
             .then((k) => {
                 return MegolmExportEncryption.encryptMegolmKeyFile(JSON.stringify(k), passphrase);

src/components/views/context_menus/MessageContextMenu.tsx

@@ -345,11 +345,9 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
     };
 
     private onEndPollClick = (): void => {
-        const matrixClient = MatrixClientPeg.safeGet();
         Modal.createDialog(
             EndPollDialog,
             {
-                matrixClient,
                 event: this.props.mxEvent,
                 getRelationsForEvent: this.props.getRelationsForEvent,
             },

src/components/views/dialogs/BaseDialog.tsx

@@ -19,12 +19,9 @@ limitations under the License.
 import React from "react";
 import FocusLock from "react-focus-lock";
 import classNames from "classnames";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import AccessibleButton from "../elements/AccessibleButton";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import Heading from "../typography/Heading";
 import { PosthogScreenTracker, ScreenName } from "../../../PosthogTrackers";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -84,19 +81,11 @@ interface IProps {
  * dialog on escape.
  */
 export default class BaseDialog extends React.Component<IProps> {
-    private matrixClient: MatrixClient;
-
     public static defaultProps: Partial<IProps> = {
         hasCancel: true,
         fixedWidth: true,
     };
 
-    public constructor(props: IProps) {
-        super(props);
-
-        this.matrixClient = MatrixClientPeg.get();
-    }
-
     private onKeyDown = (e: KeyboardEvent | React.KeyboardEvent): void => {
         this.props.onKeyDown?.(e);
 
@@ -155,39 +144,37 @@ export default class BaseDialog extends React.Component<IProps> {
             !!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage;
 
         return (
-            <MatrixClientContext.Provider value={this.matrixClient}>
+            <FocusLock
+                returnFocus={true}
+                lockProps={lockProps}
+                className={classNames(this.props.className, {
+                    mx_Dialog_fixedWidth: this.props.fixedWidth,
+                })}
+            >
                 {this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
-                <FocusLock
-                    returnFocus={true}
-                    lockProps={lockProps}
-                    className={classNames(this.props.className, {
-                        mx_Dialog_fixedWidth: this.props.fixedWidth,
+                {this.props.top}
+                <div
+                    className={classNames("mx_Dialog_header", {
+                        mx_Dialog_headerWithButton: !!this.props.headerButton,
+                        mx_Dialog_headerWithCancel: !!cancelButton,
+                        mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly,
                     })}
                 >
-                    {this.props.top}
-                    <div
-                        className={classNames("mx_Dialog_header", {
-                            mx_Dialog_headerWithButton: !!this.props.headerButton,
-                            mx_Dialog_headerWithCancel: !!cancelButton,
-                            mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly,
-                        })}
-                    >
-                        {!!(this.props.title || headerImage) && (
-                            <Heading
-                                size="h2"
-                                className={classNames("mx_Dialog_title", this.props.titleClass)}
-                                id="mx_BaseDialog_title"
-                            >
-                                {headerImage}
-                                {this.props.title}
-                            </Heading>
-                        )}
-                        {this.props.headerButton}
-                        {cancelButton}
-                    </div>
-                    {this.props.children}
-                </FocusLock>
-            </MatrixClientContext.Provider>
+                    {!!(this.props.title || headerImage) && (
+                        <Heading
+                            size="h2"
+                            className={classNames("mx_Dialog_title", this.props.titleClass)}
+                            id="mx_BaseDialog_title"
+                        >
+                            {headerImage}
+                            {this.props.title}
+                        </Heading>
+                    )}
+                    {this.props.headerButton}
+                    {cancelButton}
+                </div>
+                {this.props.children}
+            </FocusLock>
         );
     }
 }

src/components/views/dialogs/BulkRedactDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
@@ -30,16 +29,17 @@ import BaseDialog from "../dialogs/BaseDialog";
 import InfoDialog from "../dialogs/InfoDialog";
 import DialogButtons from "../elements/DialogButtons";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 
 interface Props {
-    matrixClient: MatrixClient;
     room: Room;
     member: RoomMember;
     onFinished(redact?: boolean): void;
 }
 
 const BulkRedactDialog: React.FC<Props> = (props) => {
-    const { matrixClient: cli, room, member, onFinished } = props;
+    const cli = useMatrixClientContext();
+    const { room, member, onFinished } = props;
     const [keepStateEvents, setKeepStateEvents] = useState(true);
 
     let timeline: EventTimeline | null = room.getLiveTimeline();

src/components/views/dialogs/EndPollDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent";
 
 import { _t } from "../../../languageHandler";
@@ -25,18 +24,21 @@ import { findTopAnswer } from "../messages/MPollBody";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
 import { GetRelationsForEvent } from "../rooms/EventTile";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 interface IProps {
-    matrixClient: MatrixClient;
     event: MatrixEvent;
     onFinished: (success?: boolean) => void;
     getRelationsForEvent?: GetRelationsForEvent;
 }
 
 export default class EndPollDialog extends React.Component<IProps> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private onFinished = async (endPoll: boolean): Promise<void> => {
         if (endPoll) {
-            const room = this.props.matrixClient.getRoom(this.props.event.getRoomId());
+            const room = this.context.getRoom(this.props.event.getRoomId());
             const poll = room?.polls.get(this.props.event.getId()!);
 
             if (!poll) {
@@ -54,7 +56,7 @@ export default class EndPollDialog extends React.Component<IProps> {
 
                 const endEvent = PollEndEvent.from(this.props.event.getId()!, message).serialize();
 
-                await this.props.matrixClient.sendEvent(this.props.event.getRoomId()!, endEvent.type, endEvent.content);
+                await this.context.sendEvent(this.props.event.getRoomId()!, endEvent.type, endEvent.content);
             } catch (e) {
                 console.error("Failed to submit poll response event:", e);
                 Modal.createDialog(ErrorDialog, {

src/components/views/dialogs/ForwardDialog.tsx

@@ -18,7 +18,6 @@ import React, { useEffect, useMemo, useState } from "react";
 import classnames from "classnames";
 import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { ILocationContent, LocationAssetType, M_TIMESTAMP } from "matrix-js-sdk/src/@types/location";
@@ -52,11 +51,11 @@ import { isLocationEvent } from "../../../utils/EventUtils";
 import { isSelfLocation, locationEventGeoUri } from "../../../utils/location";
 import { RoomContextDetails } from "../rooms/RoomContextDetails";
 import { filterBoolean } from "../../../utils/arrays";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 
 const AVATAR_SIZE = 30;
 
 interface IProps {
-    matrixClient: MatrixClient;
     // The event to forward
     event: MatrixEvent;
     // We need a permalink creator for the source room to pass through to EventTile
@@ -69,7 +68,6 @@ interface IEntryProps {
     room: Room;
     type: EventType | string;
     content: IContent;
-    matrixClient: MatrixClient;
     onFinished(success: boolean): void;
 }
 
@@ -80,7 +78,8 @@ enum SendState {
     Failed,
 }
 
-const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli, onFinished }) => {
+const Entry: React.FC<IEntryProps> = ({ room, type, content, onFinished }) => {
+    const cli = useMatrixClientContext();
     const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
 
     const jumpToRoom = (ev: ButtonEvent): void => {
@@ -194,7 +193,8 @@ const transformEvent = (event: MatrixEvent): { type: string; content: IContent }
     return { type, content };
 };
 
-const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCreator, onFinished }) => {
+const ForwardDialog: React.FC<IProps> = ({ event, permalinkCreator, onFinished }) => {
+    const cli = useMatrixClientContext();
     const userId = cli.getSafeUserId();
     const [profileInfo, setProfileInfo] = useState<any>({});
     useEffect(() => {
@@ -316,7 +316,6 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
                                                 room={room}
                                                 type={type}
                                                 content={content}
-                                                matrixClient={cli}
                                                 onFinished={onFinished}
                                             />
                                         ))

src/components/views/dialogs/PollHistoryDialog.tsx

@@ -15,26 +15,22 @@ limitations under the License.
 */
 
 import React from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { PollHistory } from "../polls/pollHistory/PollHistory";
 import BaseDialog from "./BaseDialog";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 
 type PollHistoryDialogProps = {
     room: Room;
-    matrixClient: MatrixClient;
     permalinkCreator: RoomPermalinkCreator;
     onFinished(): void;
 };
 
-export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
-    room,
-    matrixClient,
-    permalinkCreator,
-    onFinished,
-}) => {
+export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({ room, permalinkCreator, onFinished }) => {
+    const matrixClient = useMatrixClientContext();
+
     // @TODO hide dialog title somehow
     return (
         <BaseDialog onFinished={onFinished}>

src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -18,7 +18,6 @@ import React, { FormEvent } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import FocusLock from "react-focus-lock";
 
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -38,12 +37,11 @@ export default abstract class ScrollableBaseModal<
     TProps extends { onFinished?: (...args: any[]) => void },
     TState extends IScrollableBaseState,
 > extends React.PureComponent<TProps, TState> {
-    protected constructor(props: TProps) {
-        super(props);
-    }
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
 
     protected get matrixClient(): MatrixClient {
-        return MatrixClientPeg.get();
+        return this.context;
     }
 
     private onKeyDown = (e: KeyboardEvent | React.KeyboardEvent): void => {

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { useMemo } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
@@ -31,6 +30,7 @@ import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsT
 import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 import { Action } from "../../../dispatcher/actions";
 import { NonEmptyArray } from "../../../@types/common";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 
 export enum SpaceSettingsTab {
     General = "SPACE_GENERAL_TAB",
@@ -40,12 +40,12 @@ export enum SpaceSettingsTab {
 }
 
 interface IProps {
-    matrixClient: MatrixClient;
     space: Room;
     onFinished(): void;
 }
 
-const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFinished }) => {
+const SpaceSettingsDialog: React.FC<IProps> = ({ space, onFinished }) => {
+    const cli = useMatrixClientContext();
     useDispatcher(defaultDispatcher, (payload) => {
         if (payload.action === Action.AfterLeaveRoom && payload.room_id === space.roomId) {
             onFinished();

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -290,7 +290,6 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
     const onRoomPollHistoryClick = (): void => {
         Modal.createDialog(PollHistoryDialog, {
             room,
-            matrixClient: cli,
             permalinkCreator,
         });
     };