imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve performance of RoomContext in RoomHeader

Browse source 
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>
This commit is contained in:
Michael Telatynski 2024-11-27 09:10:29 +00:00
parent de820e11fc
commit ea8393304b
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
35 changed files with 203 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/right_panel/PinnedMessagesCard.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import React, { useCallback, useEffect, JSX } from "react";
import React, { useCallback, useEffect, JSX, useContext } from "react";
import { Room, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { Button, Separator } from "@vector-im/compound-web";
import classNames from "classnames";
@ -18,7 +18,7 @@ import Spinner from "../elements/Spinner";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { PinnedEventTile } from "../rooms/PinnedEventTile";
import { useRoomState } from "../../../hooks/useRoomState";
import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import { ReadPinsEventId } from "./types";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { filterBoolean } from "../../../utils/arrays";
@ -27,6 +27,7 @@ import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
import EmptyState from "./EmptyState";
import { usePinnedEvents, useReadPinnedEvents, useSortedFetchedPinnedEvents } from "../../../hooks/usePinnedEvents";
import PinningUtils from "../../../utils/PinningUtils.ts";
import { ScopedRoomContextProvider } from "../../../contexts/ScopedRoomContext.tsx";
/**
* List the pinned messages in a room inside a Card.
@ -48,7 +49,7 @@ interface PinnedMessagesCardProps {
export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMessagesCardProps): JSX.Element {
const cli = useMatrixClientContext();
const roomContext = useRoomContext();
const roomContext = useContext(RoomContext);
const pinnedEventIds = usePinnedEvents(room);
const readPinnedEvents = useReadPinnedEvents(room);
const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
@ -89,14 +90,9 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe
className="mx_PinnedMessagesCard"
onClose={onClose}
>
<RoomContext.Provider
value={{
...roomContext,
timelineRenderingType: TimelineRenderingType.Pinned,
}}
>
<ScopedRoomContextProvider {...roomContext} timelineRenderingType={TimelineRenderingType.Pinned}>
{content}
</RoomContext.Provider>
</ScopedRoomContextProvider>
</BaseCard>
);
}

5
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -51,7 +51,7 @@ import ShareDialog from "../dialogs/ShareDialog";
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
import { E2EStatus } from "../../../utils/ShieldUtils";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import { TimelineRenderingType } from "../../../contexts/RoomContext";
import RoomName from "../elements/RoomName";
import ExportDialog from "../dialogs/ExportDialog";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
@ -76,6 +76,7 @@ import { useTransition } from "../../../hooks/useTransition";
import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
interface IProps {
room: Room;
@ -232,7 +233,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
};
const isRoomEncrypted = useIsEncrypted(cli, room);
const roomContext = useContext(RoomContext);
const roomContext = useScopedRoomContext("e2eStatus", "timelineRenderingType");
const e2eStatus = roomContext.e2eStatus;
const isVideoRoom = calcIsVideoRoom(room);

15
src/components/views/right_panel/TimelineCard.tsx
View file

@ -38,6 +38,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import Measured from "../elements/Measured";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { SdkContextClass } from "../../../contexts/SDKContext";
import { ScopedRoomContextProvider } from "../../../contexts/ScopedRoomContext.tsx";
interface IProps {
room: Room;
@ -199,13 +200,11 @@ export default class TimelineCard extends React.Component<IProps, IState> {
const showComposer = myMembership === KnownMembership.Join;
return (
<RoomContext.Provider
value={{
...this.context,
timelineRenderingType: this.props.timelineRenderingType ?? this.context.timelineRenderingType,
liveTimeline: this.props.timelineSet?.getLiveTimeline(),
narrow: this.state.narrow,
}}
<ScopedRoomContextProvider
{...this.context}
timelineRenderingType={this.props.timelineRenderingType ?? this.context.timelineRenderingType}
liveTimeline={this.props.timelineSet?.getLiveTimeline()}
narrow={this.state.narrow}
>
<BaseCard
className={this.props.classNames}
@ -255,7 +254,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
/>
)}
</BaseCard>
</RoomContext.Provider>
</ScopedRoomContextProvider>
);
}
}