From d207ee5244dff40ee4f1f8cce140c7b1e1d55581 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 17 Jul 2017 19:31:36 +0100
Subject: [PATCH] Expand groups into variables with readable names

---
 src/components/views/messages/TextualBody.js | 22 +++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 998818da20..ab1d67a218 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -177,25 +177,27 @@ module.exports = React.createClass({
                 const href = node.getAttribute("href");
                 // HtmlUtils transforms `matrix.to` links to local links, so match against
                 // user or room app links.
-                const match = /^#\/(user|room)\/(.*)$/.exec(href);
-                if (match) {
+                const match = /^#\/(user|room)\/(.*)$/.exec(href) || [];
+                const resourceType = match[1]; // "user" or "room"
+                const resourceId = match[2]; // user ID or room ID
+                if (match && resourceType && resourceId) {
                     let avatar;
                     let roomId;
                     let room;
                     let member;
-                    switch (match[1]) {
+                    switch (resourceType) {
                         case "user":
                             roomId = this.props.mxEvent.getRoomId();
                             room = MatrixClientPeg.get().getRoom(roomId);
-                            member = room.getMember(match[2]) ||
-                                new RoomMember(null, match[2]);
-                            avatar = <MemberAvatar member={member} width={16} height={16} name={match[2]}/>;
+                            member = room.getMember(resourceId) ||
+                                new RoomMember(null, resourceId);
+                            avatar = <MemberAvatar member={member} width={16} height={16} name={resourceId}/>;
                         break;
                         case "room":
-                            room = match[2][0] === '#' ?
+                            room = resourceId[0] === '#' ?
                                 MatrixClientPeg.get().getRooms().find((r) => {
-                                    return r.getCanonicalAlias() === match[2];
-                                }) : MatrixClientPeg.get().getRoom(match[2]);
+                                    return r.getCanonicalAlias() === resourceId;
+                                }) : MatrixClientPeg.get().getRoom(resourceId);
                             if (room) {
                                 avatar = <RoomAvatar room={room} width={16} height={16}/>;
                             }
@@ -204,7 +206,7 @@ module.exports = React.createClass({
                     if (avatar) {
                         const avatarContainer = document.createElement('span');
                         node.className = "mx_MTextBody_pill " +
-                            (match[1] === "user" ? "mx_UserPill" : "mx_RoomPill");
+                            (resourceType === "user" ? "mx_UserPill" : "mx_RoomPill");
                         ReactDOM.render(avatar, avatarContainer);
                         node.insertBefore(avatarContainer, node.firstChild);
                     }