Improve typing around event emitter handlers

src/CallHandler.tsx

@@ -19,14 +19,22 @@ limitations under the License.
 
 import React from 'react';
 import { base32 } from "rfc4648";
-import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty, CallType } from "matrix-js-sdk/src/webrtc/call";
-import { CallError } from "matrix-js-sdk/src/webrtc/call";
+import {
+    CallError,
+    CallErrorCode,
+    CallEvent,
+    CallParty,
+    CallState,
+    CallType,
+    MatrixCall,
+} from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
-import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/randomstring";
+import { randomLowercaseString, randomUppercaseString } from "matrix-js-sdk/src/randomstring";
 import EventEmitter from 'events';
 import { RuleId, TweakName, Tweaks } from "matrix-js-sdk/src/@types/PushRules";
 import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
 import { SyncState } from "matrix-js-sdk/src/sync";
+import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 import Modal from './Modal';
@@ -50,10 +58,9 @@ import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
 import SdkConfig from './SdkConfig';
 import { ensureDMExists, findDMForUser } from './createRoom';
-import { WidgetLayoutStore, Container } from './stores/widgets/WidgetLayoutStore';
-import { getIncomingCallToastKey } from './toasts/IncomingCallToast';
+import { Container, WidgetLayoutStore } from './stores/widgets/WidgetLayoutStore';
+import IncomingCallToast, { getIncomingCallToastKey } from './toasts/IncomingCallToast';
 import ToastStore from './stores/ToastStore';
-import IncomingCallToast from "./toasts/IncomingCallToast";
 import Resend from './Resend';
 import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
 
@@ -172,7 +179,7 @@ export default class CallHandler extends EventEmitter {
         }
 
         if (SettingsStore.getValue(UIFeature.Voip)) {
-            MatrixClientPeg.get().on('Call.incoming', this.onCallIncoming);
+            MatrixClientPeg.get().on(CallEventHandlerEvent.Incoming, this.onCallIncoming);
         }
 
         this.checkProtocols(CHECK_PROTOCOLS_ATTEMPTS);
@@ -181,7 +188,7 @@ export default class CallHandler extends EventEmitter {
     public stop(): void {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener('Call.incoming', this.onCallIncoming);
+            cli.removeListener(CallEventHandlerEvent.Incoming, this.onCallIncoming);
         }
     }
 

src/DeviceListener.ts

@@ -16,6 +16,8 @@ limitations under the License.
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { logger } from "matrix-js-sdk/src/logger";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto";
+import { ClientEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 import dis from "./dispatcher/dispatcher";
@@ -32,7 +34,7 @@ import {
     hideToast as hideUnverifiedSessionsToast,
     showToast as showUnverifiedSessionsToast,
 } from "./toasts/UnverifiedSessionToast";
-import { isSecretStorageBeingAccessed, accessSecretStorage } from "./SecurityManager";
+import { accessSecretStorage, isSecretStorageBeingAccessed } from "./SecurityManager";
 import { isSecureBackupRequired } from './utils/WellKnownUtils';
 import { isLoggedIn } from './components/structures/MatrixChat';
 import { ActionPayload } from "./dispatcher/payloads";
@@ -63,28 +65,31 @@ export default class DeviceListener {
     }
 
     start() {
-        MatrixClientPeg.get().on('crypto.willUpdateDevices', this.onWillUpdateDevices);
-        MatrixClientPeg.get().on('crypto.devicesUpdated', this.onDevicesUpdated);
-        MatrixClientPeg.get().on('deviceVerificationChanged', this.onDeviceVerificationChanged);
-        MatrixClientPeg.get().on('userTrustStatusChanged', this.onUserTrustStatusChanged);
-        MatrixClientPeg.get().on('crossSigning.keysChanged', this.onCrossSingingKeysChanged);
-        MatrixClientPeg.get().on('accountData', this.onAccountData);
-        MatrixClientPeg.get().on('sync', this.onSync);
-        MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
+        MatrixClientPeg.get().on(CryptoEvent.WillUpdateDevices, this.onWillUpdateDevices);
+        MatrixClientPeg.get().on(CryptoEvent.DevicesUpdated, this.onDevicesUpdated);
+        MatrixClientPeg.get().on(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
+        MatrixClientPeg.get().on(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
+        MatrixClientPeg.get().on(CryptoEvent.KeysChanged, this.onCrossSingingKeysChanged);
+        MatrixClientPeg.get().on(ClientEvent.AccountData, this.onAccountData);
+        MatrixClientPeg.get().on(ClientEvent.Sync, this.onSync);
+        MatrixClientPeg.get().on(RoomStateEvent.Events, this.onRoomStateEvents);
         this.dispatcherRef = dis.register(this.onAction);
         this.recheck();
     }
 
     stop() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener('crypto.willUpdateDevices', this.onWillUpdateDevices);
-            MatrixClientPeg.get().removeListener('crypto.devicesUpdated', this.onDevicesUpdated);
-            MatrixClientPeg.get().removeListener('deviceVerificationChanged', this.onDeviceVerificationChanged);
-            MatrixClientPeg.get().removeListener('userTrustStatusChanged', this.onUserTrustStatusChanged);
-            MatrixClientPeg.get().removeListener('crossSigning.keysChanged', this.onCrossSingingKeysChanged);
-            MatrixClientPeg.get().removeListener('accountData', this.onAccountData);
-            MatrixClientPeg.get().removeListener('sync', this.onSync);
-            MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
+            MatrixClientPeg.get().removeListener(CryptoEvent.WillUpdateDevices, this.onWillUpdateDevices);
+            MatrixClientPeg.get().removeListener(CryptoEvent.DevicesUpdated, this.onDevicesUpdated);
+            MatrixClientPeg.get().removeListener(
+                CryptoEvent.DeviceVerificationChanged,
+                this.onDeviceVerificationChanged,
+            );
+            MatrixClientPeg.get().removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
+            MatrixClientPeg.get().removeListener(CryptoEvent.KeysChanged, this.onCrossSingingKeysChanged);
+            MatrixClientPeg.get().removeListener(ClientEvent.AccountData, this.onAccountData);
+            MatrixClientPeg.get().removeListener(ClientEvent.Sync, this.onSync);
+            MatrixClientPeg.get().removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
         }
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);

src/Notifier.ts

@@ -17,8 +17,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-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 { ClientEvent } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 import { LOCATION_EVENT_TYPE } from "matrix-js-sdk/src/@types/location";
@@ -201,20 +202,20 @@ export const Notifier = {
         this.boundOnRoomReceipt = this.boundOnRoomReceipt || this.onRoomReceipt.bind(this);
         this.boundOnEventDecrypted = this.boundOnEventDecrypted || this.onEventDecrypted.bind(this);
 
-        MatrixClientPeg.get().on('event', this.boundOnEvent);
-        MatrixClientPeg.get().on('Room.receipt', this.boundOnRoomReceipt);
-        MatrixClientPeg.get().on('Event.decrypted', this.boundOnEventDecrypted);
-        MatrixClientPeg.get().on("sync", this.boundOnSyncStateChange);
+        MatrixClientPeg.get().on(ClientEvent.Event, this.boundOnEvent);
+        MatrixClientPeg.get().on(RoomEvent.Receipt, this.boundOnRoomReceipt);
+        MatrixClientPeg.get().on(MatrixEventEvent.Decrypted, this.boundOnEventDecrypted);
+        MatrixClientPeg.get().on(ClientEvent.Sync, this.boundOnSyncStateChange);
         this.toolbarHidden = false;
         this.isSyncing = false;
     },
 
     stop: function() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener('Event', this.boundOnEvent);
-            MatrixClientPeg.get().removeListener('Room.receipt', this.boundOnRoomReceipt);
-            MatrixClientPeg.get().removeListener('Event.decrypted', this.boundOnEventDecrypted);
-            MatrixClientPeg.get().removeListener('sync', this.boundOnSyncStateChange);
+            MatrixClientPeg.get().removeListener(ClientEvent.Event, this.boundOnEvent);
+            MatrixClientPeg.get().removeListener(RoomEvent.Receipt, this.boundOnRoomReceipt);
+            MatrixClientPeg.get().removeListener(MatrixEventEvent.Decrypted, this.boundOnEventDecrypted);
+            MatrixClientPeg.get().removeListener(ClientEvent.Sync, this.boundOnSyncStateChange);
         }
         this.isSyncing = false;
     },

src/actions/MatrixActionCreators.ts

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
+import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { IRoomTimelineData } from "matrix-js-sdk/src/models/event-timeline-set";
 
 import dis from "../dispatcher/dispatcher";
@@ -274,7 +274,11 @@ let matrixClientListenersStop: Listener[] = [];
  *                                 when given the MatrixClient as an argument as well as
  *                                 arguments emitted in the MatrixClient event.
  */
-function addMatrixClientListener(matrixClient: MatrixClient, eventName: string, actionCreator: ActionCreator): void {
+function addMatrixClientListener(
+    matrixClient: MatrixClient,
+    eventName: Parameters<MatrixClient["emit"]>[0],
+    actionCreator: ActionCreator,
+): void {
     const listener: Listener = (...args) => {
         const payload = actionCreator(matrixClient, ...args);
         if (payload) {
@@ -298,15 +302,15 @@ export default {
      * @param {MatrixClient} matrixClient the MatrixClient to listen to events from
      */
     start(matrixClient: MatrixClient) {
-        addMatrixClientListener(matrixClient, 'sync', createSyncAction);
-        addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
-        addMatrixClientListener(matrixClient, 'Room.accountData', createRoomAccountDataAction);
-        addMatrixClientListener(matrixClient, 'Room', createRoomAction);
-        addMatrixClientListener(matrixClient, 'Room.tags', createRoomTagsAction);
-        addMatrixClientListener(matrixClient, 'Room.receipt', createRoomReceiptAction);
-        addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
-        addMatrixClientListener(matrixClient, 'Room.myMembership', createSelfMembershipAction);
-        addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
+        addMatrixClientListener(matrixClient, ClientEvent.Sync, createSyncAction);
+        addMatrixClientListener(matrixClient, ClientEvent.AccountData, createAccountDataAction);
+        addMatrixClientListener(matrixClient, RoomEvent.AccountData, createRoomAccountDataAction);
+        addMatrixClientListener(matrixClient, ClientEvent.Room, createRoomAction);
+        addMatrixClientListener(matrixClient, RoomEvent.Tags, createRoomTagsAction);
+        addMatrixClientListener(matrixClient, RoomEvent.Receipt, createRoomReceiptAction);
+        addMatrixClientListener(matrixClient, RoomEvent.Timeline, createRoomTimelineAction);
+        addMatrixClientListener(matrixClient, RoomEvent.MyMembership, createSelfMembershipAction);
+        addMatrixClientListener(matrixClient, MatrixEventEvent.Decrypted, createEventDecryptedAction);
     },
 
     /**

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

@@ -22,6 +22,7 @@ import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import { TrustInfo } from "matrix-js-sdk/src/crypto/backup";
 import { CrossSigningKeys } from "matrix-js-sdk/src";
 import { IRecoveryKey } from "matrix-js-sdk/src/crypto/api";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 
 import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import { _t, _td } from '../../../../languageHandler';
@@ -145,13 +146,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             accountPassword,
         };
 
-        MatrixClientPeg.get().on('crypto.keyBackupStatus', this.onKeyBackupStatusChange);
+        MatrixClientPeg.get().on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatusChange);
 
         this.getInitialPhase();
     }
 
     public componentWillUnmount(): void {
-        MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this.onKeyBackupStatusChange);
+        MatrixClientPeg.get().removeListener(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatusChange);
     }
 
     private getInitialPhase(): void {

src/autocomplete/UserProvider.tsx

@@ -20,9 +20,9 @@ limitations under the License.
 import React from 'react';
 import { sortBy } from 'lodash';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { RoomState, RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { IRoomTimelineData } from "matrix-js-sdk/src/models/event-timeline-set";
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
@@ -60,14 +60,14 @@ export default class UserProvider extends AutocompleteProvider {
             shouldMatchWordsOnly: false,
         });
 
-        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
-        MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
+        MatrixClientPeg.get().on(RoomEvent.Timeline, this.onRoomTimeline);
+        MatrixClientPeg.get().on(RoomStateEvent.Members, this.onRoomStateMember);
     }
 
     destroy() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
-            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener(RoomEvent.Timeline, this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener(RoomStateEvent.Members, this.onRoomStateMember);
         }
     }
 

src/components/structures/FilePanel.tsx

@@ -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";
 
@@ -122,8 +122,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);
         }
     }
 
@@ -134,8 +134,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);
         }
     }
 

src/components/structures/LoggedInView.tsx

@@ -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);