From 6edc492c575661ae66b22c2014373af2fc2fd10c Mon Sep 17 00:00:00 2001
From: f0x <f@0x52.eu>
Date: Wed, 17 Apr 2019 13:31:54 +0200
Subject: [PATCH] fix react wrongly recycling components, displaynames

---
 components/chat.js    | 9 +++++----
 components/sidebar.js | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/chat.js b/components/chat.js
index 4519e63..f488f60 100644
--- a/components/chat.js
+++ b/components/chat.js
@@ -100,7 +100,7 @@ let chat = create({
       messageGroups.groups.push(messageGroups.current)
 
       events = messageGroups.groups.map((events, id) => {
-        return <EventGroup key={id} events={events} client={this.props.client}/>
+        return <EventGroup key={`${this.props.roomId}-${id}`} events={events} client={this.props.client}/>
       })
     }
     //TODO: replace with something that only renders events in view
@@ -116,15 +116,16 @@ let EventGroup = create({
   displayName: "EventGroup",
 
   getInitialState: function() {
+    let user = this.props.client.getUser(this.props.events[0].sender)
     let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)]
     return {
       color: color,
-      sender: this.props.events[0].sender
+      user: user
     }
   },
 
   avatarRef: function(ref) {
-    jdenticon.update(ref, this.state.sender)
+    jdenticon.update(ref, this.state.user.userId)
   },
 
   render: function() {
@@ -134,7 +135,7 @@ let EventGroup = create({
     return <div className="eventGroup">
       <svg id="avatar" ref={this.avatarRef} ></svg>
       <div className="col">
-        <div id="name" className={`fg-palet-${this.state.color}`}>{this.state.sender}</div>
+        <div id="name" className={`fg-palet-${this.state.color}`}>{this.state.user.displayName}</div>
         {events}
       </div>
     </div>
diff --git a/components/sidebar.js b/components/sidebar.js
index e113ea6..7d44d69 100644
--- a/components/sidebar.js
+++ b/components/sidebar.js
@@ -42,7 +42,7 @@ let RoomListItem = create({
       className += " unread"
     }
     return <div className={className} ref={this.setRef}>
-      <svg id="avatar" data-jdenticon-value={this.props.content.name}></svg>
+      <svg id="avatar" data-jdenticon-value={this.props.content.roomId}></svg>
       <span id="name">{this.props.content.name}</span>
     </div>
   }