fixed #76

src/app/organisms/channel/ChannelViewContent.jsx

@@ -8,7 +8,7 @@ import dateFormat from 'dateformat';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
-import { getUsername, doesRoomHaveUnread } from '../../../util/matrixUtil';
+import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { diffMinutes, isNotInSameDay } from '../../../util/common';
 import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
@@ -358,7 +358,7 @@ function ChannelViewContent({
     const userAvatar = isContentOnly ? null : (
       <Avatar
         imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
-        text={getUsername(mEvent.sender.userId).slice(0, 1)}
+        text={getUsernameOfRoomMember(mEvent.sender).slice(0, 1)}
         bgColor={senderMXIDColor}
         size="small"
       />
@@ -366,7 +366,7 @@ function ChannelViewContent({
     const userHeader = isContentOnly ? null : (
       <MessageHeader
         userId={mEvent.sender.userId}
-        name={getUsername(mEvent.sender.userId)}
+        name={getUsernameOfRoomMember(mEvent.sender)}
         color={senderMXIDColor}
         time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
       />

src/app/organisms/channel/PeopleDrawer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './PeopleDrawer.scss';
 
 import initMatrix from '../../../client/initMatrix';
-import { getUsername } from '../../../util/matrixUtil';
+import { getUsernameOfRoomMember } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { openInviteUser } from '../../../client/action/navigation';
 
@@ -105,7 +105,7 @@ function PeopleDrawer({ roomId }) {
                     key={member.userId}
                     onClick={() => alert('Viewing profile is yet to be implemented')}
                     avatarSrc={member.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
-                    name={getUsername(member.userId)}
+                    name={getUsernameOfRoomMember(member)}
                     color={colorMXID(member.userId)}
                     peopleRole={getPowerLabel(member.powerLevel)}
                   />

src/util/matrixUtil.js

@@ -25,6 +25,10 @@ function getUsername(userId) {
   return username;
 }
 
+function getUsernameOfRoomMember(roomMember) {
+  return roomMember.name || roomMember.userId;
+}
+
 async function isRoomAliasAvailable(alias) {
   try {
     const myUserId = initMatrix.matrixClient.getUserId();
@@ -62,6 +66,6 @@ function doesRoomHaveUnread(room) {
 }
 
 export {
-  getBaseUrl, getUsername,
+  getBaseUrl, getUsername, getUsernameOfRoomMember,
   isRoomAliasAvailable, doesRoomHaveUnread,
 };