Make read receipts handle nullable roomMembers correctly (#8410)

* make readReceipt roomMember nullable, as it should be
* add fallback click interaction for read receipts of unknown users

Author: justjanne

src/components/views/avatars/MemberAvatar.tsx

@@ -30,7 +30,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
-    member: RoomMember;
+    member: RoomMember | null;
     fallbackUserId?: string;
     width: number;
     height: number;

src/components/views/rooms/EventTile.tsx

@@ -96,7 +96,7 @@ export type GetRelationsForEvent = (eventId: string, relationType: string, event
 
 export interface IReadReceiptProps {
     userId: string;
-    roomMember: RoomMember;
+    roomMember: RoomMember | null;
     ts: number;
 }
 

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { PropsWithChildren, useRef } from "react";
+import { User } from "matrix-js-sdk/src/matrix";
 
 import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
 import { IReadReceiptProps } from "./EventTile";
@@ -188,7 +189,7 @@ function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick
         label: (
             <>
                 <div className="mx_Tooltip_title">
-                    { roomMember.rawDisplayName ?? userId }
+                    { roomMember?.rawDisplayName ?? userId }
                 </div>
                 <div className="mx_Tooltip_sub">
                     { userId }
@@ -203,7 +204,11 @@ function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick
             onClick={() => {
                 dis.dispatch({
                     action: Action.ViewUser,
-                    member: roomMember,
+                    // XXX: We should be using a real member object and not assuming what the receiver wants.
+                    // The ViewUser action leads to the RightPanelStore, and RightPanelStoreIPanelState defines the
+                    // member property of IRightPanelCardState as `RoomMember | User`, so we’re fine for now, but we
+                    // should definitely clean this up later
+                    member: roomMember ?? { userId } as User,
                     push: false,
                 });
                 onAfterClick?.();
@@ -225,7 +230,7 @@ function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick
                 hideTitle
             />
             <div className="mx_ReadReceiptGroup_name">
-                <p>{ roomMember.name }</p>
+                <p>{ roomMember?.name ?? userId }</p>
                 <p className="mx_ReadReceiptGroup_secondary">
                     { formatDate(new Date(ts), isTwelveHour) }
                 </p>

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -31,7 +31,7 @@ export interface IReadReceiptInfo {
 
 interface IProps {
     // the RoomMember to show the RR for
-    member?: RoomMember;
+    member?: RoomMember | null;
     // userId to fallback the avatar to
     // if the member hasn't been loaded yet
     fallbackUserId: string;