show missing member in read receipt (#1445)

This commit is contained in:
Ajay Bura 2023-10-10 17:07:15 +11:00 committed by GitHub
parent d0f2a865bc
commit 609b132106
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 27 deletions

View file

@ -15,7 +15,7 @@ import {
as, as,
config, config,
} from 'folds'; } from 'folds';
import { Room, RoomMember } from 'matrix-js-sdk'; import { Room } from 'matrix-js-sdk';
import { useRoomEventReaders } from '../../hooks/useRoomEventReaders'; import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
import { getMemberDisplayName } from '../../utils/room'; import { getMemberDisplayName } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix'; import { getMxIdLocalPart } from '../../utils/matrix';
@ -33,12 +33,9 @@ export const EventReaders = as<'div', EventReadersProps>(
({ className, room, eventId, requestClose, ...props }, ref) => { ({ className, room, eventId, requestClose, ...props }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const latestEventReaders = useRoomEventReaders(room, eventId); const latestEventReaders = useRoomEventReaders(room, eventId);
const followingMembers = latestEventReaders
.map((readerId) => room.getMember(readerId))
.filter((member) => member) as RoomMember[];
const getName = (member: RoomMember) => const getName = (userId: string) =>
getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId; getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
return ( return (
<Box <Box
@ -58,25 +55,20 @@ export const EventReaders = as<'div', EventReadersProps>(
<Box grow="Yes"> <Box grow="Yes">
<Scroll visibility="Hover" hideTrack size="300"> <Scroll visibility="Hover" hideTrack size="300">
<Box className={css.Content} direction="Column"> <Box className={css.Content} direction="Column">
{followingMembers.map((member) => { {latestEventReaders.map((readerId) => {
const name = getName(member); const name = getName(readerId);
const avatarUrl = member.getAvatarUrl( const avatarUrl = room
mx.baseUrl, .getMember(readerId)
100, ?.getAvatarUrl(mx.baseUrl, 100, 100, 'crop', undefined, false);
100,
'crop',
undefined,
false
);
return ( return (
<MenuItem <MenuItem
key={member.userId} key={readerId}
style={{ padding: `0 ${config.space.S200}` }} style={{ padding: `0 ${config.space.S200}` }}
radii="400" radii="400"
onClick={() => { onClick={() => {
requestClose(); requestClose();
openProfileViewer(member.userId, room.roomId); openProfileViewer(readerId, room.roomId);
}} }}
before={ before={
<Avatar size="200"> <Avatar size="200">
@ -85,7 +77,7 @@ export const EventReaders = as<'div', EventReadersProps>(
) : ( ) : (
<AvatarFallback <AvatarFallback
style={{ style={{
background: colorMXID(member.userId), background: colorMXID(readerId),
color: 'white', color: 'white',
}} }}
> >

View file

@ -11,7 +11,7 @@ import {
as, as,
config, config,
} from 'folds'; } from 'folds';
import { Room, RoomMember } from 'matrix-js-sdk'; import { Room } from 'matrix-js-sdk';
import classNames from 'classnames'; import classNames from 'classnames';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
@ -32,13 +32,11 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const latestEvent = useRoomLatestRenderedEvent(room); const latestEvent = useRoomLatestRenderedEvent(room);
const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId()); const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId());
const followingMembers = latestEventReaders const names = latestEventReaders
.map((readerId) => room.getMember(readerId)) .filter((readerId) => readerId !== mx.getUserId())
.filter((member) => member && member.userId !== mx.getUserId()) as RoomMember[]; .map(
(readerId) => getMemberDisplayName(room, readerId) ?? getMxIdLocalPart(readerId) ?? readerId
const names = followingMembers.map( );
(member) => getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId)
);
const eventId = latestEvent?.getId(); const eventId = latestEvent?.getId();