show missing member in read receipt (#1445)

diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index c05efc50a01f3cd4d437f01223deee13110e2f1d..a5a2646f481559eee92a85804c60027651c34377 100644 (file)
--- 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 (
       <Box
@@ -58,25 +55,20 @@ export const EventReaders = as<'div', EventReadersProps>(
         <Box grow="Yes">
           <Scroll visibility="Hover" hideTrack size="300">
             <Box className={css.Content} direction="Column">
-              {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 (
                   <MenuItem
-                    key={member.userId}
+                    key={readerId}
                     style={{ padding: `0 ${config.space.S200}` }}
                     radii="400"
                     onClick={() => {
                       requestClose();
-                      openProfileViewer(member.userId, room.roomId);
+                      openProfileViewer(readerId, room.roomId);
                     }}
                     before={
                       <Avatar size="200">
@@ -85,7 +77,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                         ) : (
                           <AvatarFallback
                             style={{
-                              background: colorMXID(member.userId),
+                              background: colorMXID(readerId),
                               color: 'white',
                             }}
                           >

diff --git a/src/app/organisms/room/RoomViewFollowing.tsx b/src/app/organisms/room/RoomViewFollowing.tsx
index a49f70d9110689eb77d8fa7616d4b30ffb08c792..2f7a583e3f247d9426ff7b9d67eb65be592be6a7 100644 (file)
--- 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();