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

Improve typing around event emitter handlers (#7816)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-22 12:18:08 +00:00 • committed by GitHub
parent 213b32bf14
commit 7fa01ffb06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
79 changed files with 548 additions and 471 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/structures/FilePanel.tsx
View file

@ -19,8 +19,8 @@ import React from 'react';
import { Filter } from 'matrix-js-sdk/src/filter';
import { EventTimelineSet, IRoomTimelineData } from "matrix-js-sdk/src/models/event-timeline-set";
import { Direction } from "matrix-js-sdk/src/models/event-timeline";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
import { Room, RoomEvent } from 'matrix-js-sdk/src/models/room';
import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
import { logger } from "matrix-js-sdk/src/logger";
@ -121,8 +121,8 @@ class FilePanel extends React.Component<IProps, IState> {
// this could be made more general in the future or the filter logic
// could be fixed.
if (EventIndexPeg.get() !== null) {
client.on('Room.timeline', this.onRoomTimeline);
client.on('Event.decrypted', this.onEventDecrypted);
client.on(RoomEvent.Timeline, this.onRoomTimeline);
client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
}
}
@ -133,8 +133,8 @@ class FilePanel extends React.Component<IProps, IState> {
if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return;
if (EventIndexPeg.get() !== null) {
client.removeListener('Room.timeline', this.onRoomTimeline);
client.removeListener('Event.decrypted', this.onEventDecrypted);
client.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
client.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
}
}

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

@ -15,12 +15,13 @@ limitations under the License.
*/
import React, { ClipboardEvent } from 'react';
import { MatrixClient } from 'matrix-js-sdk/src/client';
import { ClientEvent, MatrixClient } from 'matrix-js-sdk/src/client';
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import classNames from 'classnames';
import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
import { IUsageLimit } from 'matrix-js-sdk/src/@types/partials';
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Key } from '../../Keyboard';
import PageTypes from '../../PageTypes';
@ -174,15 +175,15 @@ class LoggedInView extends React.Component<IProps, IState> {
this.updateServerNoticeEvents();
this._matrixClient.on("accountData", this.onAccountData);
this._matrixClient.on("sync", this.onSync);
this._matrixClient.on(ClientEvent.AccountData, this.onAccountData);
this._matrixClient.on(ClientEvent.Sync, this.onSync);
// Call `onSync` with the current state as well
this.onSync(
this._matrixClient.getSyncState(),
null,
this._matrixClient.getSyncStateData(),
);
this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
this._matrixClient.on(RoomStateEvent.Events, this.onRoomStateEvents);
this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, this.onCompactLayoutChanged);
this.compactLayoutWatcherRef = SettingsStore.watchSetting(
@ -203,9 +204,9 @@ class LoggedInView extends React.Component<IProps, IState> {
componentWillUnmount() {
document.removeEventListener('keydown', this.onNativeKeyDown, false);
CallHandler.instance.removeListener(CallHandlerEvent.CallState, this.onCallState);
this._matrixClient.removeListener("accountData", this.onAccountData);
this._matrixClient.removeListener("sync", this.onSync);
this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
this._matrixClient.removeListener(ClientEvent.AccountData, this.onAccountData);
this._matrixClient.removeListener(ClientEvent.Sync, this.onSync);
this._matrixClient.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
SettingsStore.unwatchSetting(this.layoutWatcherRef);
SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);

34
src/components/structures/MatrixChat.tsx
View file

@ -15,7 +15,14 @@ limitations under the License.
*/
import React, { ComponentType, createRef } from 'react';
import { createClient, EventType, MatrixClient } from 'matrix-js-sdk/src/matrix';
import {
ClientEvent,
createClient,
EventType,
HttpApiEvent,
MatrixClient,
MatrixEventEvent,
} from 'matrix-js-sdk/src/matrix';
import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
import { MatrixError } from 'matrix-js-sdk/src/http-api';
import { InvalidStoreError } from "matrix-js-sdk/src/errors";
@ -23,6 +30,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
import { logger } from "matrix-js-sdk/src/logger";
import { throttle } from "lodash";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
// focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
import 'focus-visible';
@ -1246,10 +1254,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
const saveWelcomeUser = (ev: MatrixEvent) => {
if (ev.getType() === EventType.Direct && ev.getContent()[this.props.config.welcomeUserId]) {
MatrixClientPeg.get().store.save(true);
MatrixClientPeg.get().removeListener("accountData", saveWelcomeUser);
MatrixClientPeg.get().removeListener(ClientEvent.AccountData, saveWelcomeUser);
}
};
MatrixClientPeg.get().on("accountData", saveWelcomeUser);
MatrixClientPeg.get().on(ClientEvent.AccountData, saveWelcomeUser);
return roomId;
}
@ -1432,7 +1440,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
return this.loggedInView.current.canResetTimelineInRoom(roomId);
});
cli.on('sync', (state: SyncState, prevState?: SyncState, data?: ISyncStateData) => {
cli.on(ClientEvent.Sync, (state: SyncState, prevState?: SyncState, data?: ISyncStateData) => {
if (state === SyncState.Error || state === SyncState.Reconnecting) {
if (data.error instanceof InvalidStoreError) {
Lifecycle.handleInvalidStoreError(data.error);
@ -1497,7 +1505,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
});
});
cli.on('Session.logged_out', function(errObj) {
cli.on(HttpApiEvent.SessionLoggedOut, function(errObj) {
if (Lifecycle.isLoggingOut()) return;
// A modal might have been open when we were logged out by the server
@ -1518,7 +1526,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
action: 'logout',
});
});
cli.on('no_consent', function(message, consentUri) {
cli.on(HttpApiEvent.NoConsent, function(message, consentUri) {
Modal.createTrackedDialog('No Consent Dialog', '', QuestionDialog, {
title: _t('Terms and Conditions'),
description: <div>
@ -1549,10 +1557,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
dft.start();
// When logging out, stop tracking failures and destroy state
cli.on("Session.logged_out", () => dft.stop());
cli.on("Event.decrypted", (e, err) => dft.eventDecrypted(e, err));
cli.on(HttpApiEvent.SessionLoggedOut, () => dft.stop());
cli.on(MatrixEventEvent.Decrypted, (e, err) => dft.eventDecrypted(e, err as MatrixError));
cli.on("Room", (room) => {
cli.on(ClientEvent.Room, (room) => {
if (MatrixClientPeg.get().isCryptoEnabled()) {
const blacklistEnabled = SettingsStore.getValueAt(
SettingLevel.ROOM_DEVICE,
@ -1563,7 +1571,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
room.setBlacklistUnverifiedDevices(blacklistEnabled);
}
});
cli.on("crypto.warning", (type) => {
cli.on(CryptoEvent.Warning, (type) => {
switch (type) {
case 'CRYPTO_WARNING_OLD_VERSION_DETECTED':
Modal.createTrackedDialog('Crypto migrated', '', ErrorDialog, {
@ -1582,7 +1590,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
break;
}
});
cli.on("crypto.keyBackupFailed", async (errcode) => {
cli.on(CryptoEvent.KeyBackupFailed, async (errcode) => {
let haveNewVersion;
let newVersionInfo;
// if key backup is still enabled, there must be a new backup in place
@ -1615,7 +1623,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
});
cli.on("crypto.keySignatureUploadFailure", (failures, source, continuation) => {
cli.on(CryptoEvent.KeySignatureUploadFailure, (failures, source, continuation) => {
Modal.createTrackedDialog(
'Failed to upload key signatures',
'Failed to upload key signatures',
@ -1623,7 +1631,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
{ failures, source, continuation });
});
cli.on("crypto.verification.request", request => {
cli.on(CryptoEvent.VerificationRequest, request => {
if (request.verifier) {
Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
verifier: request.verifier,

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

@ -21,6 +21,7 @@ import { EventType } from 'matrix-js-sdk/src/@types/event';
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 shouldHideEvent from '../../shouldHideEvent';
import { wantsDateSeparator } from '../../DateUtils';
@ -274,13 +275,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
componentDidMount() {
this.calculateRoomMembersCount();
this.props.room?.on("RoomState.members", this.calculateRoomMembersCount);
this.props.room?.currentState.on(RoomStateEvent.Members, this.calculateRoomMembersCount);
this.isMounted = true;
}
componentWillUnmount() {
this.isMounted = false;
this.props.room?.off("RoomState.members", this.calculateRoomMembersCount);
this.props.room?.currentState.off(RoomStateEvent.Members, this.calculateRoomMembersCount);
SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
}

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

@ -153,14 +153,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
thread = this.props.room.createThread(mxEv);
}
thread.on(ThreadEvent.Update, this.updateLastThreadReply);
thread.once(ThreadEvent.Ready, this.updateThread);
this.updateThread(thread);
};
private teardownThread = () => {
if (this.state.thread) {
this.state.thread.removeListener(ThreadEvent.Update, this.updateLastThreadReply);
this.state.thread.removeListener(ThreadEvent.Ready, this.updateThread);
}
};

59
src/components/structures/TimelinePanel.tsx
View file

@ -16,16 +16,17 @@ limitations under the License.
import React, { createRef, ReactNode, SyntheticEvent } from 'react';
import ReactDOM from "react-dom";
import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
import { EventTimelineSet, IRoomTimelineData } from "matrix-js-sdk/src/models/event-timeline-set";
import { Direction, EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
import { SyncState } from 'matrix-js-sdk/src/sync';
import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
import { RoomMember, RoomMemberEvent } from 'matrix-js-sdk/src/models/room-member';
import { debounce } from 'lodash';
import { logger } from "matrix-js-sdk/src/logger";
import { ClientEvent } from "matrix-js-sdk/src/client";
import SettingsStore from "../../settings/SettingsStore";
import { Layout } from "../../settings/enums/Layout";
@ -276,22 +277,22 @@ class TimelinePanel extends React.Component<IProps, IState> {
this.dispatcherRef = dis.register(this.onAction);
const cli = MatrixClientPeg.get();
cli.on("Room.timeline", this.onRoomTimeline);
cli.on("Room.timelineReset", this.onRoomTimelineReset);
cli.on("Room.redaction", this.onRoomRedaction);
cli.on(RoomEvent.Timeline, this.onRoomTimeline);
cli.on(RoomEvent.TimelineReset, this.onRoomTimelineReset);
cli.on(RoomEvent.Redaction, this.onRoomRedaction);
if (SettingsStore.getValue("feature_msc3531_hide_messages_pending_moderation")) {
// Make sure that events are re-rendered when their visibility-pending-moderation changes.
cli.on("Event.visibilityChange", this.onEventVisibilityChange);
cli.on("RoomMember.powerLevel", this.onVisibilityPowerLevelChange);
cli.on(MatrixEventEvent.VisibilityChange, this.onEventVisibilityChange);
cli.on(RoomMemberEvent.PowerLevel, this.onVisibilityPowerLevelChange);
}
// same event handler as Room.redaction as for both we just do forceUpdate
cli.on("Room.redactionCancelled", this.onRoomRedaction);
cli.on("Room.receipt", this.onRoomReceipt);
cli.on("Room.localEchoUpdated", this.onLocalEchoUpdated);
cli.on("Room.accountData", this.onAccountData);
cli.on("Event.decrypted", this.onEventDecrypted);
cli.on("Event.replaced", this.onEventReplaced);
cli.on("sync", this.onSync);
cli.on(RoomEvent.RedactionCancelled, this.onRoomRedaction);
cli.on(RoomEvent.Receipt, this.onRoomReceipt);
cli.on(RoomEvent.LocalEchoUpdated, this.onLocalEchoUpdated);
cli.on(RoomEvent.AccountData, this.onAccountData);
cli.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
cli.on(MatrixEventEvent.Replaced, this.onEventReplaced);
cli.on(ClientEvent.Sync, this.onSync);
}
// TODO: [REACT-WARNING] Move into constructor
@ -353,18 +354,18 @@ class TimelinePanel extends React.Component<IProps, IState> {
const client = MatrixClientPeg.get();
if (client) {
client.removeListener("Room.timeline", this.onRoomTimeline);
client.removeListener("Room.timelineReset", this.onRoomTimelineReset);
client.removeListener("Room.redaction", this.onRoomRedaction);
client.removeListener("Room.redactionCancelled", this.onRoomRedaction);
client.removeListener("Room.receipt", this.onRoomReceipt);
client.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
client.removeListener("Room.accountData", this.onAccountData);
client.removeListener("RoomMember.powerLevel", this.onVisibilityPowerLevelChange);
client.removeListener("Event.decrypted", this.onEventDecrypted);
client.removeListener("Event.replaced", this.onEventReplaced);
client.removeListener("Event.visibilityChange", this.onEventVisibilityChange);
client.removeListener("sync", this.onSync);
client.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
client.removeListener(RoomEvent.TimelineReset, this.onRoomTimelineReset);
client.removeListener(RoomEvent.Redaction, this.onRoomRedaction);
client.removeListener(RoomEvent.RedactionCancelled, this.onRoomRedaction);
client.removeListener(RoomEvent.Receipt, this.onRoomReceipt);
client.removeListener(RoomEvent.LocalEchoUpdated, this.onLocalEchoUpdated);
client.removeListener(RoomEvent.AccountData, this.onAccountData);
client.removeListener(RoomMemberEvent.PowerLevel, this.onVisibilityPowerLevelChange);
client.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
client.removeListener(MatrixEventEvent.Replaced, this.onEventReplaced);
client.removeListener(MatrixEventEvent.VisibilityChange, this.onEventVisibilityChange);
client.removeListener(ClientEvent.Sync, this.onSync);
}
}
@ -673,11 +674,11 @@ class TimelinePanel extends React.Component<IProps, IState> {
this.forceUpdate();
};
private onEventReplaced = (replacedEvent: MatrixEvent, room: Room): void => {
private onEventReplaced = (replacedEvent: MatrixEvent): void => {
if (this.unmounted) return;
// ignore events for other rooms
if (room !== this.props.timelineSet.room) return;
if (replacedEvent.getRoomId() !== this.props.timelineSet.room.roomId) return;
// we could skip an update if the event isn't in our timeline,
// but that's probably an early optimisation.