Improve performance of RoomContext in RoomHeader (#28574)

* Improve performance of RoomContext in RoomHeader This allows a component to subscribe to only part of the RoomContext so they do not need to re-render on every single change Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Prettier Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-12-02 09:49:52 +00:00 · 2024-12-02 09:49:52 +00:00 · b87437d439
commit b87437d439
parent 8619a22f57
56 changed files with 289 additions and 216 deletions
--- a/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
@ -27,12 +27,12 @@ import {
 import DocumentOffset from "../../../../../src/editor/offset";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import Autocompleter, { IProviderCompletions } from "../../../../../src/autocomplete/Autocompleter";
 import NotifProvider from "../../../../../src/autocomplete/NotifProvider";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("<EditMessageComposer/>", () => {
    const userId = "@alice:server.org";
@ -79,7 +79,7 @@ describe("<EditMessageComposer/>", () => {
        render(<EditMessageComposerWithMatrixClient editState={editState} />, {
            wrapper: ({ children }) => (
                <MatrixClientContext.Provider value={mockClient}>
-                    <RoomContext.Provider value={roomContext}>{children}</RoomContext.Provider>
+                    <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
                </MatrixClientContext.Provider>
            ),
        });
--- a/test/unit-tests/components/views/rooms/EventTile-test.tsx
+++ b/test/unit-tests/components/views/rooms/EventTile-test.tsx
@ -30,7 +30,7 @@ import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";

 import EventTile, { EventTileProps } from "../../../../../src/components/views/rooms/EventTile";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { filterConsole, flushPromises, getRoomContext, mkEvent, mkMessage, stubClient } from "../../../../test-utils";
 import { mkThread } from "../../../../test-utils/threads";
@ -40,6 +40,7 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import PinningUtils from "../../../../../src/utils/PinningUtils";
 import { Layout } from "../../../../../src/settings/enums/Layout";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("EventTile", () => {
    const ROOM_ID = "!roomId:example.org";
@ -56,13 +57,13 @@ describe("EventTile", () => {
    }) {
        return (
            <MatrixClientContext.Provider value={client}>
-                <RoomContext.Provider value={props.roomContext}>
+                <ScopedRoomContextProvider {...props.roomContext}>
                    <EventTile
                        mxEvent={mxEvent}
                        replacingEventId={mxEvent.replacingEventId()}
                        {...(props.eventTilePropertyOverrides ?? {})}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>
        );
    }
--- a/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
@ -24,7 +24,6 @@ import {
 import MessageComposer from "../../../../../src/components/views/rooms/MessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
@ -40,6 +39,7 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { VoiceBroadcastInfoState, VoiceBroadcastRecording } from "../../../../../src/voice-broadcast";
 import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/test-utils";
 import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 const openStickerPicker = async (): Promise<void> => {
    await userEvent.click(screen.getByLabelText("More options"));
@ -512,9 +512,9 @@ function wrapAndRender(

    const getRawComponent = (props = {}, context = roomContext, client = mockClient) => (
        <MatrixClientContext.Provider value={client}>
-            <RoomContext.Provider value={context}>
+            <ScopedRoomContextProvider {...context}>
                <MessageComposer {...defaultProps} {...props} />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        </MatrixClientContext.Provider>
    );
    return {
--- a/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
+++ b/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
@ -10,11 +10,11 @@ import React from "react";
 import { render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import { createTestClient, getRoomContext, mkStubRoom } from "../../../../test-utils";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import MessageComposerButtons from "../../../../../src/components/views/rooms/MessageComposerButtons";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("MessageComposerButtons", () => {
    // @ts-ignore - we're deliberately not implementing the whole interface here, but
@ -54,7 +54,7 @@ describe("MessageComposerButtons", () => {

        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>{component}</RoomContext.Provider>
+                <ScopedRoomContextProvider {...defaultRoomContext}>{component}</ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    }
--- a/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
+++ b/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
@ -13,19 +13,19 @@ import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";

 import { LocalRoom } from "../../../../../src/models/LocalRoom";
 import { filterConsole, mkRoomMemberJoinEvent, mkThirdPartyInviteEvent, stubClient } from "../../../../test-utils";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import NewRoomIntro from "../../../../../src/components/views/rooms/NewRoomIntro";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { DirectoryMember } from "../../../../../src/utils/direct-messages";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
    render(
        <MatrixClientContext.Provider value={client}>
-            <RoomContext.Provider value={{ room, roomId: room.roomId } as unknown as IRoomState}>
+            <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as IRoomState)}>
                <NewRoomIntro />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        </MatrixClientContext.Provider>,
    );
 };
--- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@ -18,7 +18,7 @@ import SendMessageComposer, {
    isQuickReaction,
 } from "../../../../../src/components/views/rooms/SendMessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import EditorModel from "../../../../../src/editor/model";
 import { createPartCreator } from "../../../editor/mock";
 import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../../test-utils";
@ -30,6 +30,7 @@ import { IRoomState, MainSplitContentType } from "../../../../../src/components/
 import { mockPlatformPeg } from "../../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { addTextToComposer } from "../../../../test-utils/composer";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../src/utils/local-room", () => ({
    doMaybeLocalRoomAction: jest.fn(),
@ -365,9 +366,9 @@ describe("<SendMessageComposer/>", () => {
        };
        const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
            <MatrixClientContext.Provider value={client}>
-                <RoomContext.Provider value={roomContext}>
+                <ScopedRoomContextProvider {...roomContext}>
                    <SendMessageComposer {...defaultProps} {...props} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>
        );
        const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@ -11,7 +11,6 @@ import React from "react";
 import { fireEvent, render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../src/contexts/RoomContext";
 import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../../src/dispatcher/actions";
 import { flushPromises, mkEvent } from "../../../../../test-utils";
@ -23,6 +22,7 @@ import { ComposerInsertPayload, ComposerType } from "../../../../../../src/dispa
 import { ActionPayload } from "../../../../../../src/dispatcher/payloads";
 import * as EmojiButton from "../../../../../../src/components/views/rooms/EmojiButton";
 import { createMocks } from "./utils";
+import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("EditWysiwygComposer", () => {
    afterEach(() => {
@ -39,9 +39,9 @@ describe("EditWysiwygComposer", () => {
    ) => {
        return render(
            <MatrixClientContext.Provider value={client}>
-                <RoomContext.Provider value={roomContext}>
+                <ScopedRoomContextProvider {...roomContext}>
                    <EditWysiwygComposer disabled={disabled} editorStateTransfer={_editorStateTransfer} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
@ -64,9 +64,9 @@ describe("EditWysiwygComposer", () => {

        rerender(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={{ ...defaultRoomContext, room: undefined }}>
+                <ScopedRoomContextProvider {...defaultRoomContext} room={undefined}>
                    <EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );

@ -275,10 +275,10 @@ describe("EditWysiwygComposer", () => {
        );
        render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
                    <EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
                    <Emoji menuPosition={{ chevronFace: ChevronFace.Top }} />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
        // Same behavior as in RoomView.tsx
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@ -11,7 +11,6 @@ import React from "react";
 import { act, fireEvent, render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../src/contexts/RoomContext";
 import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../../src/dispatcher/actions";
 import { flushPromises } from "../../../../../test-utils";
@ -20,6 +19,7 @@ import { aboveLeftOf } from "../../../../../../src/components/structures/Context
 import { ComposerInsertPayload, ComposerType } from "../../../../../../src/dispatcher/payloads/ComposerInsertPayload";
 import { setSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
 import { createMocks } from "./utils";
+import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";

 jest.mock("../../../../../../src/components/views/rooms/EmojiButton", () => ({
    EmojiButton: ({ addEmoji }: { addEmoji: (emoji: string) => void }) => {
@ -66,7 +66,7 @@ describe("SendWysiwygComposer", () => {
    ) => {
        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
                    <SendWysiwygComposer
                        onChange={onChange}
                        onSend={onSend}
@ -75,7 +75,7 @@ describe("SendWysiwygComposer", () => {
                        menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
                        placeholder={placeholder}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
@ -14,7 +14,7 @@ import { PlainTextComposer } from "../../../../../../../src/components/views/roo
 import * as mockUseSettingsHook from "../../../../../../../src/hooks/useSettings";
 import * as mockKeyboard from "../../../../../../../src/Keyboard";
 import { createMocks } from "../utils";
-import RoomContext from "../../../../../../../src/contexts/RoomContext";
+import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("PlainTextComposer", () => {
    const customRender = (
@ -275,9 +275,9 @@ describe("PlainTextComposer", () => {
        const { defaultRoomContext } = createMocks();

        render(
-            <RoomContext.Provider value={defaultRoomContext}>
+            <ScopedRoomContextProvider {...defaultRoomContext}>
                <PlainTextComposer onChange={jest.fn()} onSend={jest.fn()} disabled={false} initialContent="" />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
        );

        expect(screen.getByTestId("autocomplete-wrapper")).toBeInTheDocument();
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete-test.tsx
@ -11,12 +11,12 @@ import React, { createRef } from "react";
 import { render, screen, waitFor } from "jest-matrix-react";

 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../../src/contexts/RoomContext";
 import { WysiwygAutocomplete } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete";
 import { getRoomContext, mkStubRoom, stubClient } from "../../../../../../test-utils";
 import Autocomplete from "../../../../../../../src/components/views/rooms/Autocomplete";
 import Autocompleter, { ICompletion } from "../../../../../../../src/autocomplete/Autocompleter";
 import AutocompleteProvider from "../../../../../../../src/autocomplete/AutocompleteProvider";
+import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";

 const mockCompletion: ICompletion[] = [
    {
@ -71,7 +71,7 @@ describe("WysiwygAutocomplete", () => {

        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={mockRoomContext}>
+                <ScopedRoomContextProvider {...mockRoomContext}>
                    <WysiwygAutocomplete
                        ref={autocompleteRef}
                        suggestion={null}
@ -80,7 +80,7 @@ describe("WysiwygAutocomplete", () => {
                        handleAtRoomMention={mockHandleAtRoomMention}
                        {...props}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@ -18,7 +18,6 @@ import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
 import * as EventUtils from "../../../../../../../src/utils/EventUtils";
 import { Action } from "../../../../../../../src/dispatcher/actions";
 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../../../src/contexts/RoomContext";
 import {
    ComposerContext,
    getDefaultContextValue,
@ -32,20 +31,21 @@ import Autocompleter, { ICompletion } from "../../../../../../../src/autocomplet
 import AutocompleteProvider from "../../../../../../../src/autocomplete/AutocompleteProvider";
 import * as Permalinks from "../../../../../../../src/utils/permalinks/Permalinks";
 import { PermalinkParts } from "../../../../../../../src/utils/permalinks/PermalinkConstructor";
+import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";

 describe("WysiwygComposer", () => {
    const customRender = (onChange = jest.fn(), onSend = jest.fn(), disabled = false, initialContent?: string) => {
        const { mockClient, defaultRoomContext } = createMocks();
        return render(
            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
                    <WysiwygComposer
                        onChange={onChange}
                        onSend={onSend}
                        disabled={disabled}
                        initialContent={initialContent}
                    />
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            </MatrixClientContext.Provider>,
        );
    };
@ -523,7 +523,7 @@ describe("WysiwygComposer", () => {
        ) => {
            return render(
                <MatrixClientContext.Provider value={client}>
-                    <RoomContext.Provider value={roomContext}>
+                    <ScopedRoomContextProvider {...roomContext}>
                        <ComposerContext.Provider
                            value={getDefaultContextValue({ editorStateTransfer: _editorStateTransfer })}
                        >
@ -537,7 +537,7 @@ describe("WysiwygComposer", () => {
                                }
                            />
                        </ComposerContext.Provider>
-                    </RoomContext.Provider>
+                    </ScopedRoomContextProvider>
                </MatrixClientContext.Provider>,
            );
        };