From e7c91397f145a569b599413abec477eb434ee3b4 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Tue, 26 Apr 2022 12:35:05 +0200
Subject: [PATCH] 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
---
 src/components/views/avatars/MemberAvatar.tsx    |  2 +-
 src/components/views/rooms/EventTile.tsx         |  2 +-
 src/components/views/rooms/ReadReceiptGroup.tsx  | 11 ++++++++---
 src/components/views/rooms/ReadReceiptMarker.tsx |  2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 09400b7e21..41ad611874 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/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;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index f068e029a8..d71b682112 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/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;
 }
 
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
index 4363c4c158..a427c74e07 100644
--- a/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/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>
diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index bf218c0ddb..453f7dd225 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/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;