WhoIsTypingTile TypeScript conversion

src/components/views/rooms/WhoIsTypingTile.tsx

@@ -16,34 +16,34 @@ limitations under the License.
 */
 
 import React from 'react';
+import Room from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import * as WhoIsTyping from '../../../WhoIsTyping';
 import Timer from '../../../utils/Timer';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import MemberAvatar from '../avatars/MemberAvatar';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-import Room from "matrix-js-sdk/src/models/room";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-
 interface IProps {
     // the room this statusbar is representing.
-    room: Room,
+    room: Room;
-    onShown?: () => void,
+    onShown?: () => void;
-    onHidden?: () => void,
+    onHidden?: () => void;
     // Number of names to display in typing indication. E.g. set to 3, will
     // result in "X, Y, Z and 100 others are typing."
-    whoIsTypingLimit: number,
+    whoIsTypingLimit: number;
 }
 
 interface IState {
-    usersTyping: RoomMember[],
+    usersTyping: RoomMember[];
     // a map with userid => Timer to delay
     // hiding the "x is typing" message for a
     // user so hiding it can coincide
     // with the sent message by the other side
     // resulting in less timeline jumpiness
-    delayedStopTypingTimers: any
+    delayedStopTypingTimers: Record<string, Timer>;
 }
 
 @replaceableComponent("views.rooms.WhoIsTypingTile")
@@ -79,18 +79,18 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
             client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
             client.removeListener("Room.timeline", this.onRoomTimeline);
         }
-        Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
+        Object.values(this.state.delayedStopTypingTimers).forEach((t) => (t as Timer).abort());
     }
 
-    _isVisible(state: IState): boolean {
+    private _isVisible(state: IState): boolean {
         return state.usersTyping.length !== 0 || Object.keys(state.delayedStopTypingTimers).length !== 0;
     }
 
-    isVisible: () => boolean = () => {
+    public isVisible = (): boolean => {
         return this._isVisible(this.state);
     };
 
-    onRoomTimeline = (event: MatrixEvent, room: Room): void => {
+    private onRoomTimeline = (event: MatrixEvent, room: Room): void => {
         if (room?.roomId === this.props.room?.roomId) {
             const userId = event.getSender();
             // remove user from usersTyping
@@ -99,19 +99,19 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
                 this.setState({usersTyping});
             }
             // abort timer if any
-            this._abortUserTimer(userId);
+            this.abortUserTimer(userId);
         }
     };
 
-    onRoomMemberTyping = (): void => {
+    private onRoomMemberTyping = (): void => {
         const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
         this.setState({
-            delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
+            delayedStopTypingTimers: this.updateDelayedStopTypingTimers(usersTyping),
             usersTyping,
         });
     };
 
-    _updateDelayedStopTypingTimers(usersTyping: RoomMember[]): void {
+    private updateDelayedStopTypingTimers(usersTyping: RoomMember[]): Record<string, Timer> {
         const usersThatStoppedTyping = this.state.usersTyping.filter((a) => {
             return !usersTyping.some((b) => a.userId === b.userId);
         });
@@ -139,7 +139,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
                 delayedStopTypingTimers[m.userId] = timer;
                 timer.start();
                 timer.finished().then(
-                    () => this._removeUserTimer(m.userId), // on elapsed
+                    () => this.removeUserTimer(m.userId), // on elapsed
                     () => {/* aborted */},
                 );
             }
@@ -149,15 +149,15 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
         return delayedStopTypingTimers;
     }
 
-    _abortUserTimer(userId: string): void {
+    private abortUserTimer(userId: string): void {
         const timer = this.state.delayedStopTypingTimers[userId];
         if (timer) {
             timer.abort();
-            this._removeUserTimer(userId);
+            this.removeUserTimer(userId);
         }
     }
 
-    _removeUserTimer(userId: string): void {
+    private removeUserTimer(userId: string): void {
         const timer = this.state.delayedStopTypingTimers[userId];
         if (timer) {
             const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
@@ -166,7 +166,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
         }
     }
 
-    _renderTypingIndicatorAvatars(users: RoomMember[], limit: number): void {
+    private renderTypingIndicatorAvatars(users: RoomMember[], limit: number): JSX.Element[] {
         let othersCount = 0;
         if (users.length > limit) {
             othersCount = users.length - limit + 1;
@@ -220,7 +220,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
         return (
             <li className="mx_WhoIsTypingTile" aria-atomic="true">
                 <div className="mx_WhoIsTypingTile_avatars">
-                    { this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
+                    { this.renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
                 </div>
                 <div className="mx_WhoIsTypingTile_label">
                     { typingString }