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

Prefer RoomStateEvent.Update where possible as it fires far less (#7878)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-24 14:39:25 +00:00 • committed by GitHub
parent 36ae0ea49d
commit c257bc3f7a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 223 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/structures/GroupFilterPanel.tsx
View file

@ -17,6 +17,7 @@ limitations under the License.
import React from 'react';
import classNames from 'classnames';
import { ClientEvent } from "matrix-js-sdk/src/client";
import type { EventSubscription } from "fbemitter";
import GroupFilterOrderStore from '../../stores/GroupFilterOrderStore';
@ -51,6 +52,7 @@ interface IGroupFilterPanelState {
@replaceableComponent("structures.GroupFilterPanel")
class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFilterPanelState> {
public static contextType = MatrixClientContext;
public context!: React.ContextType<typeof MatrixClientContext>;
public state = {
orderedTags: [],
@ -63,8 +65,8 @@ class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFil
public componentDidMount() {
this.unmounted = false;
this.context.on("Group.myMembership", this.onGroupMyMembership);
this.context.on("sync", this.onClientSync);
this.context.on(ClientEvent.GroupMyMembership, this.onGroupMyMembership);
this.context.on(ClientEvent.Sync, this.onClientSync);
this.groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
if (this.unmounted) {
@ -82,8 +84,8 @@ class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFil
public componentWillUnmount() {
this.unmounted = true;
this.context.removeListener("Group.myMembership", this.onGroupMyMembership);
this.context.removeListener("sync", this.onClientSync);
this.context.removeListener(ClientEvent.GroupMyMembership, this.onGroupMyMembership);
this.context.removeListener(ClientEvent.Sync, this.onClientSync);
if (this.groupFilterOrderStoreToken) {
this.groupFilterOrderStoreToken.remove();
}

2
src/components/structures/LoggedInView.tsx
View file

@ -317,7 +317,7 @@ class LoggedInView extends React.Component<IProps, IState> {
private onRoomStateEvents = (ev: MatrixEvent): void => {
const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
if (serverNoticeList && serverNoticeList.some(r => r.roomId === ev.getRoomId())) {
if (serverNoticeList?.some(r => r.roomId === ev.getRoomId())) {
this.updateServerNoticeEvents();
}
};

14
src/components/structures/MessagePanel.tsx
View file

@ -23,7 +23,6 @@ import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { Relations } from "matrix-js-sdk/src/models/relations";
import { logger } from 'matrix-js-sdk/src/logger';
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { throttle } from "lodash";
import shouldHideEvent from '../../shouldHideEvent';
import { wantsDateSeparator } from '../../DateUtils';
@ -277,13 +276,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
componentDidMount() {
this.calculateRoomMembersCount();
this.props.room?.currentState.on(RoomStateEvent.Members, this.onRoomMembers);
this.props.room?.currentState.on(RoomStateEvent.Update, this.calculateRoomMembersCount);
this.isMounted = true;
}
componentWillUnmount() {
this.isMounted = false;
this.props.room?.currentState.off(RoomStateEvent.Members, this.onRoomMembers);
this.props.room?.currentState.off(RoomStateEvent.Update, this.calculateRoomMembersCount);
SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
}
@ -314,16 +313,11 @@ export default class MessagePanel extends React.Component<IProps, IState> {
return this.props.room?.getInvitedAndJoinedMemberCount() <= 2 && this.props.layout === Layout.Bubble;
}
private onRoomMembers = (event: MatrixEvent): void => {
if (this.props.room && event.getRoomId() !== this.props.room.roomId) return; // different room
this.calculateRoomMembersCount();
};
private calculateRoomMembersCount = throttle((): void => {
private calculateRoomMembersCount = (): void => {
this.setState({
hideSender: this.shouldHideSender(),
});
}, 200, { leading: true, trailing: true });
};
private onShowTypingNotificationsChange = (): void => {
this.setState({

10
src/components/structures/RightPanel.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomState } from "matrix-js-sdk/src/models/room-state";
import { RoomState, RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { throttle } from 'lodash';
@ -67,6 +67,7 @@ interface IState {
@replaceableComponent("structures.RightPanel")
export default class RightPanel extends React.Component<IProps, IState> {
static contextType = MatrixClientContext;
public context!: React.ContextType<typeof MatrixClientContext>;
constructor(props, context) {
super(props, context);
@ -81,15 +82,12 @@ export default class RightPanel extends React.Component<IProps, IState> {
}, 500, { leading: true, trailing: true });
public componentDidMount(): void {
const cli = this.context;
cli.on("RoomState.members", this.onRoomStateMember);
this.context.on(RoomStateEvent.Members, this.onRoomStateMember);
RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
}
public componentWillUnmount(): void {
if (this.context) {
this.context.removeListener("RoomState.members", this.onRoomStateMember);
}
this.context?.removeListener(RoomStateEvent.Members, this.onRoomStateMember);
RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
}

88
src/components/structures/RoomView.tsx
View file

@ -22,17 +22,19 @@ limitations under the License.
import React, { createRef } from 'react';
import classNames from 'classnames';
import { IRecommendedVersion, NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { IRecommendedVersion, NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
import { EventSubscription } from "fbemitter";
import { ISearchResults } from 'matrix-js-sdk/src/@types/search';
import { logger } from "matrix-js-sdk/src/logger";
import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
import { EventType } from 'matrix-js-sdk/src/@types/event';
import { RoomState } from 'matrix-js-sdk/src/models/room-state';
import { RoomState, RoomStateEvent } from 'matrix-js-sdk/src/models/room-state';
import { CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { throttle } from "lodash";
import { MatrixError } from 'matrix-js-sdk/src/http-api';
import { ClientEvent } from "matrix-js-sdk/src/client";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import shouldHideEvent from '../../shouldHideEvent';
import { _t } from '../../languageHandler';
@ -230,11 +232,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
private roomViewBody = createRef<HTMLDivElement>();
static contextType = MatrixClientContext;
public context!: React.ContextType<typeof MatrixClientContext>;
constructor(props, context) {
constructor(props: IRoomProps, context: React.ContextType<typeof MatrixClientContext>) {
super(props, context);
const llMembers = this.context.hasLazyLoadMembersEnabled();
const llMembers = context.hasLazyLoadMembersEnabled();
this.state = {
roomId: null,
roomLoading: true,
@ -268,7 +271,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
showJoinLeaves: true,
showAvatarChanges: true,
showDisplaynameChanges: true,
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
matrixClientIsReady: context?.isInitialSyncComplete(),
mainSplitContentType: MainSplitContentType.Timeline,
timelineRenderingType: TimelineRenderingType.Room,
liveTimeline: undefined,
@ -276,19 +279,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
};
this.dispatcherRef = dis.register(this.onAction);
this.context.on("Room", this.onRoom);
this.context.on("Room.timeline", this.onRoomTimeline);
this.context.on("Room.name", this.onRoomName);
this.context.on("Room.accountData", this.onRoomAccountData);
this.context.on("RoomState.events", this.onRoomStateEvents);
this.context.on("RoomState.members", this.onRoomStateMember);
this.context.on("Room.myMembership", this.onMyMembership);
this.context.on("accountData", this.onAccountData);
this.context.on("crypto.keyBackupStatus", this.onKeyBackupStatus);
this.context.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
this.context.on("userTrustStatusChanged", this.onUserVerificationChanged);
this.context.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
this.context.on("Event.decrypted", this.onEventDecrypted);
context.on(ClientEvent.Room, this.onRoom);
context.on(RoomEvent.Timeline, this.onRoomTimeline);
context.on(RoomEvent.Name, this.onRoomName);
context.on(RoomEvent.AccountData, this.onRoomAccountData);
context.on(RoomStateEvent.Events, this.onRoomStateEvents);
context.on(RoomStateEvent.Update, this.onRoomStateUpdate);
context.on(RoomEvent.MyMembership, this.onMyMembership);
context.on(ClientEvent.AccountData, this.onAccountData);
context.on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
context.on(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
context.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
context.on(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
context.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
// Start listening for RoomViewStore updates
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
@ -704,19 +707,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
dis.unregister(this.dispatcherRef);
if (this.context) {
this.context.removeListener("Room", this.onRoom);
this.context.removeListener("Room.timeline", this.onRoomTimeline);
this.context.removeListener("Room.name", this.onRoomName);
this.context.removeListener("Room.accountData", this.onRoomAccountData);
this.context.removeListener("RoomState.events", this.onRoomStateEvents);
this.context.removeListener("Room.myMembership", this.onMyMembership);
this.context.removeListener("RoomState.members", this.onRoomStateMember);
this.context.removeListener("accountData", this.onAccountData);
this.context.removeListener("crypto.keyBackupStatus", this.onKeyBackupStatus);
this.context.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
this.context.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
this.context.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
this.context.removeListener("Event.decrypted", this.onEventDecrypted);
this.context.removeListener(ClientEvent.Room, this.onRoom);
this.context.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
this.context.removeListener(RoomEvent.Name, this.onRoomName);
this.context.removeListener(RoomEvent.AccountData, this.onRoomAccountData);
this.context.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
this.context.removeListener(RoomEvent.MyMembership, this.onMyMembership);
this.context.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
this.context.removeListener(ClientEvent.AccountData, this.onAccountData);
this.context.removeListener(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
this.context.removeListener(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
this.context.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
this.context.removeListener(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
this.context.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
}
window.removeEventListener('beforeunload', this.onPageUnload);
@ -1097,7 +1100,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
});
};
private onDeviceVerificationChanged = (userId: string, device: object) => {
private onDeviceVerificationChanged = (userId: string) => {
const room = this.state.room;
if (!room.currentState.getMember(userId)) {
return;
@ -1105,7 +1108,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
this.updateE2EStatus(room);
};
private onUserVerificationChanged = (userId: string, trustStatus: object) => {
private onUserVerificationChanged = (userId: string) => {
const room = this.state.room;
if (!room || !room.currentState.getMember(userId)) {
return;
@ -1156,9 +1159,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
private onRoomStateEvents = (ev: MatrixEvent, state: RoomState) => {
// ignore if we don't have a room yet
if (!this.state.room || this.state.room.roomId !== state.roomId) {
return;
}
if (!this.state.room || this.state.room.roomId !== state.roomId) return;
if (ev.getType() === EventType.RoomCanonicalAlias) {
// re-view the room so MatrixChat can manage the alias in the URL properly
@ -1173,14 +1174,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
this.updatePermissions(this.state.room);
};
private onRoomStateMember = (ev: MatrixEvent, state, member) => {
// ignore if we don't have a room yet
if (!this.state.room) {
return;
}
private onRoomStateUpdate = (state: RoomState) => {
// ignore members in other rooms
if (member.roomId !== this.state.room.roomId) {
if (state.roomId !== this.state.room?.roomId) {
return;
}
@ -1255,7 +1251,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
private onJoinButtonClicked = () => {
// If the user is a ROU, allow them to transition to a PWLU
if (this.context && this.context.isGuest()) {
if (this.context?.isGuest()) {
// Join this room once the user has registered and logged in
// (If we failed to peek, we may not have a valid room object.)
dis.dispatch<DoAfterSyncPreparedPayload<ViewRoomPayload>>({
@ -1712,7 +1708,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
getHiddenHighlightCount() {
const oldRoom = this.getOldRoom();
if (!oldRoom) return 0;
return oldRoom.getUnreadNotificationCount('highlight');
return oldRoom.getUnreadNotificationCount(NotificationCountType.Highlight);
}
onHiddenHighlightsClick = () => {

6
src/components/structures/SpaceHierarchy.tsx
View file

@ -27,7 +27,7 @@ import React, {
useRef,
useState,
} from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { IHierarchyRelation, IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces";
@ -58,7 +58,7 @@ import { Key } from "../../Keyboard";
import { IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex";
import { getDisplayAliasForRoom } from "./RoomDirectory";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { useEventEmitterState } from "../../hooks/useEventEmitter";
import { useTypedEventEmitterState } from "../../hooks/useEventEmitter";
import { IOOBData } from "../../stores/ThreepidInviteStore";
import { awaitRoomDownSync } from "../../utils/RoomUpgrade";
import RoomViewStore from "../../stores/RoomViewStore";
@ -99,7 +99,7 @@ const Tile: React.FC<ITileProps> = ({
const cliRoom = cli.getRoom(room.room_id);
return cliRoom?.getMyMembership() === "join" ? cliRoom : null;
});
const joinedRoomName = useEventEmitterState(joinedRoom, "Room.name", room => room?.name);
const joinedRoomName = useTypedEventEmitterState(joinedRoom, RoomEvent.Name, room => room?.name);
const name = joinedRoomName || room.name || room.canonical_alias || room.aliases?.[0]
|| (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room"));

18
src/components/structures/SpaceRoomView.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React, { RefObject, useContext, useRef, useState } from "react";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
import { Room } from "matrix-js-sdk/src/models/room";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
import MatrixClientContext from "../../contexts/MatrixClientContext";
@ -31,7 +31,7 @@ import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
import { useRoomMembers } from "../../hooks/useRoomMembers";
import createRoom, { IOpts } from "../../createRoom";
import Field from "../views/elements/Field";
import { useEventEmitter } from "../../hooks/useEventEmitter";
import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
import withValidation from "../views/elements/Validation";
import * as Email from "../../email";
import defaultDispatcher from "../../dispatcher/dispatcher";
@ -121,7 +121,7 @@ const RoomMemberCount = ({ room, children }) => {
const useMyRoomMembership = (room: Room) => {
const [membership, setMembership] = useState(room.getMyMembership());
useEventEmitter(room, "Room.myMembership", () => {
useTypedEventEmitter(room, RoomEvent.MyMembership, () => {
setMembership(room.getMyMembership());
});
return membership;
@ -790,17 +790,18 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
static contextType = MatrixClientContext;
public context!: React.ContextType<typeof MatrixClientContext>;
private readonly creator: string;
private readonly dispatcherRef: string;
constructor(props, context) {
constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
super(props, context);
let phase = Phase.Landing;
this.creator = this.props.space.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const showSetup = this.props.justCreatedOpts && this.context.getUserId() === this.creator;
const showSetup = this.props.justCreatedOpts && context.getUserId() === this.creator;
if (showSetup) {
phase = this.props.justCreatedOpts.createOpts.preset === Preset.PublicChat
@ -815,13 +816,16 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
this.dispatcherRef = defaultDispatcher.register(this.onAction);
RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
this.context.on("Room.myMembership", this.onMyMembership);
}
componentDidMount() {
this.context.on(RoomEvent.MyMembership, this.onMyMembership);
}
componentWillUnmount() {
defaultDispatcher.unregister(this.dispatcherRef);
RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
this.context.off("Room.myMembership", this.onMyMembership);
this.context.off(RoomEvent.MyMembership, this.onMyMembership);
}
private onMyMembership = (room: Room, myMembership: string) => {