From 87d27593de06f92f9dc39cbe818dc71f25778cbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 17:28:02 +0200 Subject: [PATCH] Convert MemberTile to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../rooms/{MemberTile.js => MemberTile.tsx} | 68 +++++++++++-------- 1 file changed, 40 insertions(+), 28 deletions(-) rename src/components/views/rooms/{MemberTile.js => MemberTile.tsx} (79%) diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.tsx similarity index 79% rename from src/components/views/rooms/MemberTile.js rename to src/components/views/rooms/MemberTile.tsx index f8df7ed78f..e0ee0e5daf 100644 --- a/src/components/views/rooms/MemberTile.js +++ b/src/components/views/rooms/MemberTile.tsx @@ -17,20 +17,32 @@ limitations under the License. import SettingsStore from "../../../settings/SettingsStore"; import React from 'react'; -import PropTypes from 'prop-types'; import * as sdk from "../../../index"; import dis from "../../../dispatcher/dispatcher"; import { _t } from '../../../languageHandler'; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import {Action} from "../../../dispatcher/actions"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { EventType } from "matrix-js-sdk/src/@types/event"; +import { DeviceInfo } from "matrix-js-sdk/src/crypto"; + +interface IProps { + member: RoomMember, + showPresence?: boolean, +} + +interface IState { + statusMessage: string, + isRoomEncrypted: boolean, + e2eStatus: string, +} @replaceableComponent("views.rooms.MemberTile") -export default class MemberTile extends React.Component { - static propTypes = { - member: PropTypes.any.isRequired, // RoomMember - showPresence: PropTypes.bool, - }; +export default class MemberTile extends React.Component { + private userLastModifiedTime: number; + private memberLastModifiedTime: number; static defaultProps = { showPresence: true, @@ -52,7 +64,7 @@ export default class MemberTile extends React.Component { if (SettingsStore.getValue("feature_custom_status")) { const { user } = this.props.member; if (user) { - user.on("User._unstable_statusMessage", this._onStatusMessageCommitted); + user.on("User._unstable_statusMessage", this.onStatusMessageCommitted); } } @@ -80,7 +92,7 @@ export default class MemberTile extends React.Component { if (user) { user.removeListener( "User._unstable_statusMessage", - this._onStatusMessageCommitted, + this.onStatusMessageCommitted, ); } @@ -91,8 +103,8 @@ export default class MemberTile extends React.Component { } } - onRoomStateEvents = ev => { - if (ev.getType() !== "m.room.encryption") return; + private onRoomStateEvents = (ev: MatrixEvent): void => { + if (ev.getType() !== EventType.RoomEncryption) return; const { roomId } = this.props.member; if (ev.getRoomId() !== roomId) return; @@ -105,17 +117,17 @@ export default class MemberTile extends React.Component { this.updateE2EStatus(); }; - onUserTrustStatusChanged = (userId, trustStatus) => { + private onUserTrustStatusChanged = (userId: string, trustStatus: string): void => { if (userId !== this.props.member.userId) return; this.updateE2EStatus(); }; - onDeviceVerificationChanged = (userId, deviceId, deviceInfo) => { + private onDeviceVerificationChanged = (userId: string, deviceId: string, deviceInfo: DeviceInfo): void => { if (userId !== this.props.member.userId) return; this.updateE2EStatus(); }; - async updateE2EStatus() { + private async updateE2EStatus(): Promise { const cli = MatrixClientPeg.get(); const { userId } = this.props.member; const isMe = userId === cli.getUserId(); @@ -143,32 +155,32 @@ export default class MemberTile extends React.Component { }); } - getStatusMessage() { + private getStatusMessage(): string { const { user } = this.props.member; if (!user) { return ""; } - return user._unstable_statusMessage; + return user.unstable_statusMessage; } - _onStatusMessageCommitted = () => { + private onStatusMessageCommitted = (): void => { // The `User` object has observed a status message change. this.setState({ statusMessage: this.getStatusMessage(), }); }; - shouldComponentUpdate(nextProps, nextState) { + shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean { if ( - this.member_last_modified_time === undefined || - this.member_last_modified_time < nextProps.member.getLastModifiedTime() + this.memberLastModifiedTime === undefined || + this.memberLastModifiedTime < nextProps.member.getLastModifiedTime() ) { return true; } if ( nextProps.member.user && - (this.user_last_modified_time === undefined || - this.user_last_modified_time < nextProps.member.user.getLastModifiedTime()) + (this.userLastModifiedTime === undefined || + this.userLastModifiedTime < nextProps.member.user.getLastModifiedTime()) ) { return true; } @@ -181,18 +193,18 @@ export default class MemberTile extends React.Component { return false; } - onClick = e => { + private onClick = (e: MouseEvent): void => { dis.dispatch({ action: Action.ViewUser, member: this.props.member, }); }; - _getDisplayName() { + private getDisplayName(): string { return this.props.member.name; } - getPowerLabel() { + private getPowerLabel(): string { return _t("%(userName)s (power %(powerLevelNumber)s)", { userName: this.props.member.userId, powerLevelNumber: this.props.member.powerLevel, @@ -204,7 +216,7 @@ export default class MemberTile extends React.Component { const EntityTile = sdk.getComponent('rooms.EntityTile'); const member = this.props.member; - const name = this._getDisplayName(); + const name = this.getDisplayName(); const presenceState = member.user ? member.user.presence : null; let statusMessage = null; @@ -217,9 +229,9 @@ export default class MemberTile extends React.Component { ); if (member.user) { - this.user_last_modified_time = member.user.getLastModifiedTime(); + this.userLastModifiedTime = member.user.getLastModifiedTime(); } - this.member_last_modified_time = member.getLastModifiedTime(); + this.memberLastModifiedTime = member.getLastModifiedTime(); const powerStatusMap = new Map([ [100, EntityTile.POWER_STATUS_ADMIN],