From 0767c278e7700b26479962852a893041666eb64f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 10 Oct 2018 16:14:09 +0200
Subject: [PATCH 1/3] put userId next to member in read receipt, fall back when
 member missing

---
 src/components/structures/MessagePanel.js     |  3 +-
 src/components/views/avatars/MemberAvatar.js  | 34 ++++++++++++-------
 src/components/views/rooms/EventTile.js       |  9 +++--
 .../views/rooms/ReadReceiptMarker.js          | 15 ++++----
 4 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index f5fa2ceabf..d9f1be0c7f 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -542,7 +542,7 @@ module.exports = React.createClass({
     },
 
     // get a list of read receipts that should be shown next to this event
-    // Receipts are objects which have a 'roomMember' and 'ts'.
+    // Receipts are objects which have a 'userId', 'roomMember' and 'ts'.
     _getReadReceiptsForEvent: function(event) {
         const myUserId = MatrixClientPeg.get().credentials.userId;
 
@@ -564,6 +564,7 @@ module.exports = React.createClass({
                 return; // ignore unknown user IDs
             }
             receipts.push({
+                userId: r.userId,
                 roomMember: member,
                 ts: r.data ? r.data.ts : 0,
             });
diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js
index a4fe5e280f..d191368b17 100644
--- a/src/components/views/avatars/MemberAvatar.js
+++ b/src/components/views/avatars/MemberAvatar.js
@@ -26,7 +26,8 @@ module.exports = React.createClass({
     displayName: 'MemberAvatar',
 
     propTypes: {
-        member: PropTypes.object.isRequired,
+        member: PropTypes.object,
+        fallbackUserId: PropTypes.string,
         width: PropTypes.number,
         height: PropTypes.number,
         resizeMethod: PropTypes.string,
@@ -55,23 +56,30 @@ module.exports = React.createClass({
     },
 
     _getState: function(props) {
-        if (!props.member) {
-            console.error("MemberAvatar called somehow with null member");
+        if (props.member) {
+            return {
+                name: props.member.name,
+                title: props.title || props.member.userId,
+                imageUrl: Avatar.avatarUrlForMember(props.member,
+                                             props.width,
+                                             props.height,
+                                             props.resizeMethod),
+            };
+        } else if (props.fallbackUserId) {
+            return {
+                name: props.fallbackUserId,
+                title: props.fallbackUserId,
+            };
+        } else {
+            console.error("MemberAvatar called somehow with null member or fallbackUserId");
         }
-        return {
-            name: props.member.name,
-            title: props.title || props.member.userId,
-            imageUrl: Avatar.avatarUrlForMember(props.member,
-                                         props.width,
-                                         props.height,
-                                         props.resizeMethod),
-        };
     },
 
     render: function() {
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        let {member, onClick, viewUserOnClick, ...otherProps} = this.props;
+        let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
+        let userId = member ? member.userId : fallbackUserId;
 
         if (viewUserOnClick) {
             onClick = () => {
@@ -84,7 +92,7 @@ module.exports = React.createClass({
 
         return (
             <BaseAvatar {...otherProps} name={this.state.name} title={this.state.title}
-                idName={member.userId} url={this.state.imageUrl} onClick={onClick} />
+                idName={userId} url={this.state.imageUrl} onClick={onClick} />
         );
     },
 });
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 8c58863249..53c73c8f84 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -277,7 +277,11 @@ module.exports = withMatrixClient(React.createClass({
                     return false;
                 }
                 for (let j = 0; j < rA.length; j++) {
-                    if (rA[j].roomMember.userId !== rB[j].roomMember.userId) {
+                    if (rA[j].userId !== rB[j].userId) {
+                        return false;
+                    }
+                    // one has a member set and the other doesn't?
+                    if (rA[j].roomMember !== rB[j].roomMember) {
                         return false;
                     }
                 }
@@ -359,7 +363,7 @@ module.exports = withMatrixClient(React.createClass({
             // else set it proportional to index
             left = (hidden ? MAX_READ_AVATARS - 1 : i) * -receiptOffset;
 
-            const userId = receipt.roomMember.userId;
+            const userId = receipt.userId;
             let readReceiptInfo;
 
             if (this.props.readReceiptMap) {
@@ -373,6 +377,7 @@ module.exports = withMatrixClient(React.createClass({
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
                 <ReadReceiptMarker key={userId} member={receipt.roomMember}
+                    fallbackUserId={userId}
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
                     checkUnmounting={this.props.checkUnmounting}
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 0029395d3d..2f7a599d95 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -41,7 +41,10 @@ module.exports = React.createClass({
 
     propTypes: {
         // the RoomMember to show the RR for
-        member: PropTypes.object.isRequired,
+        member: PropTypes.object,
+        // userId to fallback the avatar to
+        // if the member hasn't been loaded yet
+        fallbackUserId: PropTypes.string.isRequired,
 
         // number of pixels to offset the avatar from the right of its parent;
         // typically a negative value.
@@ -130,8 +133,7 @@ module.exports = React.createClass({
             // the docs for `offsetParent` say it may be null if `display` is
             // `none`, but I can't see why that would happen.
             console.warn(
-                `ReadReceiptMarker for ${this.props.member.userId} in ` +
-                `${this.props.member.roomId} has no offsetParent`,
+                `ReadReceiptMarker for ${this.props.fallbackUserId} in has no offsetParent`,
             );
             startTopOffset = 0;
         } else {
@@ -186,17 +188,17 @@ module.exports = React.createClass({
         let title;
         if (this.props.timestamp) {
             const dateString = formatDate(new Date(this.props.timestamp), this.props.showTwelveHour);
-            if (this.props.member.userId === this.props.member.rawDisplayName) {
+            if (!this.props.member || this.props.fallbackUserId === this.props.member.rawDisplayName) {
                 title = _t(
                     "Seen by %(userName)s at %(dateTime)s",
-                    {userName: this.props.member.userId,
+                    {userName: this.props.fallbackUserId,
                     dateTime: dateString},
                 );
             } else {
                 title = _t(
                     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
                     {displayName: this.props.member.rawDisplayName,
-                    userName: this.props.member.userId,
+                    userName: this.props.fallbackUserId,
                     dateTime: dateString},
                 );
             }
@@ -208,6 +210,7 @@ module.exports = React.createClass({
                     enterTransitionOpts={this.state.enterTransitionOpts} >
                 <MemberAvatar
                     member={this.props.member}
+                    fallbackUserId={this.props.fallbackUserId}
                     aria-hidden="true"
                     width={14} height={14} resizeMethod="crop"
                     style={style}

From 51283861600c99bc78819f3a2ce6572852abac98 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 10 Oct 2018 16:15:20 +0200
Subject: [PATCH 2/3] allow read receipts without an existing member in
 MessagePanel

---
 src/components/structures/MessagePanel.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index d9f1be0c7f..bbaea617f4 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -560,9 +560,6 @@ module.exports = React.createClass({
                 return; // ignore ignored users
             }
             const member = room.getMember(r.userId);
-            if (!member) {
-                return; // ignore unknown user IDs
-            }
             receipts.push({
                 userId: r.userId,
                 roomMember: member,

From f360b2db902ade3b6123cf031fad90a8fb4380d6 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 10 Oct 2018 16:15:50 +0200
Subject: [PATCH 3/3] forward prop updates to children in Velociraptor with
 React.cloneElement

---
 src/Velociraptor.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index 6a4666305c..ad51f66ae3 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -68,7 +68,9 @@ module.exports = React.createClass({
                 if (oldNode && oldNode.style.visibility == 'hidden' && c.props.style.visibility == 'visible') {
                     oldNode.style.visibility = c.props.style.visibility;
                 }
-                self.children[c.key] = old;
+                // clone the old element with the props (and children) of the new element
+                // so prop updates are still received by the children.
+                self.children[c.key] = React.cloneElement(old, c.props, c.props.children);
             } else {
                 // new element. If we have a startStyle, use that as the style and go through
                 // the enter animations