diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx index c05efc5..a5a2646 100644 --- a/src/app/components/event-readers/EventReaders.tsx +++ b/src/app/components/event-readers/EventReaders.tsx @@ -15,7 +15,7 @@ import { as, config, } from 'folds'; -import { Room, RoomMember } from 'matrix-js-sdk'; +import { Room } from 'matrix-js-sdk'; import { useRoomEventReaders } from '../../hooks/useRoomEventReaders'; import { getMemberDisplayName } from '../../utils/room'; import { getMxIdLocalPart } from '../../utils/matrix'; @@ -33,12 +33,9 @@ export const EventReaders = as<'div', EventReadersProps>( ({ className, room, eventId, requestClose, ...props }, ref) => { const mx = useMatrixClient(); const latestEventReaders = useRoomEventReaders(room, eventId); - const followingMembers = latestEventReaders - .map((readerId) => room.getMember(readerId)) - .filter((member) => member) as RoomMember[]; - const getName = (member: RoomMember) => - getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId; + const getName = (userId: string) => + getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId; return ( ( - {followingMembers.map((member) => { - const name = getName(member); - const avatarUrl = member.getAvatarUrl( - mx.baseUrl, - 100, - 100, - 'crop', - undefined, - false - ); + {latestEventReaders.map((readerId) => { + const name = getName(readerId); + const avatarUrl = room + .getMember(readerId) + ?.getAvatarUrl(mx.baseUrl, 100, 100, 'crop', undefined, false); return ( { requestClose(); - openProfileViewer(member.userId, room.roomId); + openProfileViewer(readerId, room.roomId); }} before={ @@ -85,7 +77,7 @@ export const EventReaders = as<'div', EventReadersProps>( ) : ( diff --git a/src/app/organisms/room/RoomViewFollowing.tsx b/src/app/organisms/room/RoomViewFollowing.tsx index a49f70d..2f7a583 100644 --- a/src/app/organisms/room/RoomViewFollowing.tsx +++ b/src/app/organisms/room/RoomViewFollowing.tsx @@ -11,7 +11,7 @@ import { as, config, } from 'folds'; -import { Room, RoomMember } from 'matrix-js-sdk'; +import { Room } from 'matrix-js-sdk'; import classNames from 'classnames'; import FocusTrap from 'focus-trap-react'; @@ -32,13 +32,11 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( const [open, setOpen] = useState(false); const latestEvent = useRoomLatestRenderedEvent(room); const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId()); - const followingMembers = latestEventReaders - .map((readerId) => room.getMember(readerId)) - .filter((member) => member && member.userId !== mx.getUserId()) as RoomMember[]; - - const names = followingMembers.map( - (member) => getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) - ); + const names = latestEventReaders + .filter((readerId) => readerId !== mx.getUserId()) + .map( + (readerId) => getMemberDisplayName(room, readerId) ?? getMxIdLocalPart(readerId) ?? readerId + ); const eventId = latestEvent?.getId();