Merge pull request #1246 from matrix-org/luke/feature-async-pills

Get user pill profile remote data and show unrecognised rooms as links

src/components/views/elements/Pill.js

@@ -28,7 +28,7 @@ const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 // HttpUtils transformTags to relative links
 const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room)\/(([\#\!\@\+]).*)$/;
 
-export default React.createClass({
+const Pill = React.createClass({
     statics: {
         isPillUrl: (url) => {
             return !!REGEX_MATRIXTO.exec(url);
@@ -36,6 +36,8 @@ export default React.createClass({
         isMessagePillUrl: (url) => {
             return !!REGEX_LOCAL_MATRIXTO.exec(url);
         },
+        TYPE_USER_MENTION: 'TYPE_USER_MENTION',
+        TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
     },
 
     props: {
@@ -47,10 +49,22 @@ export default React.createClass({
         room: PropTypes.instanceOf(Room),
     },
 
-    render: function() {
+    getInitialState() {
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        return {
-        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+            // ID/alias of the room/user
+            resourceId: null,
+            // Type of pill
+            pillType: null,
 
+            // The member related to the user pill
+            member: null,
+            // The room related to the room pill
+            room: null,
+        };
+    },
+
+    componentWillMount() {
+        this._unmounted = false;
         let regex = REGEX_MATRIXTO;
         if (this.props.inMessage) {
             regex = REGEX_LOCAL_MATRIXTO;
@@ -60,46 +74,104 @@ export default React.createClass({
         // resource and prefix will be undefined instead of throwing
         const matrixToMatch = regex.exec(this.props.url) || [];
 
-        const resource = matrixToMatch[1]; // The room/user ID
+        const resourceId = matrixToMatch[1]; // The room/user ID
         const prefix = matrixToMatch[2]; // The first character of prefix
 
-        // Default to the room/user ID
+        const pillType = {
-        let linkText = resource;
+            '@': Pill.TYPE_USER_MENTION,
+            '#': Pill.TYPE_ROOM_MENTION,
+            '!': Pill.TYPE_ROOM_MENTION,
+        }[prefix];
 
-        const isUserPill = prefix === '@';
+        let member;
-        const isRoomPill = prefix === '#' || prefix === '!';
+        let room;
+        switch (pillType) {
+            case Pill.TYPE_USER_MENTION: {
+                const localMember = this.props.room.getMember(resourceId);
+                member = localMember;
+                if (!localMember) {
+                    member = new RoomMember(null, resourceId);
+                    this.doProfileLookup(resourceId, member);
+                }
+            }
+                break;
+            case Pill.TYPE_ROOM_MENTION: {
+                const localRoom = resourceId[0] === '#' ?
+                    MatrixClientPeg.get().getRooms().find((r) => {
+                        return r.getAliases().includes(resourceId);
+                    }) : MatrixClientPeg.get().getRoom(resourceId);
+                room = localRoom;
+                if (!localRoom) {
+                    // TODO: This would require a new API to resolve a room alias to
+                    // a room avatar and name.
+                    // this.doRoomProfileLookup(resourceId, member);
+                }
+            }
+                break;
+        }
+        this.setState({resourceId, pillType, member, room});
+    },
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    },
+
+    doProfileLookup: function(userId, member) {
+        MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
+            if (this._unmounted) {
+                return;
+            }
+            member.name = resp.displayname;
+            member.rawDisplayName = resp.displayname;
+            member.events.member = {
+                getContent: () => {
+                    return {avatar_url: resp.avatar_url};
+                },
+            };
+            this.setState({member});
+        }).catch((err) => {
+            console.error('Could not retrieve profile data for ' + userId + ':', err);
+        });
+    },
+
+    render: function() {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+
+        const resource = this.state.resourceId;
 
         let avatar = null;
+        let linkText = resource;
+        let pillClass;
         let userId;
-        if (isUserPill) {
+        switch (this.state.pillType) {
-            // If this user is not a member of this room, default to the empty member
+            case Pill.TYPE_USER_MENTION: {
-            // TODO: This could be improved by doing an async profile lookup
+                    // If this user is not a member of this room, default to the empty member
-            const member = this.props.room.getMember(resource) ||
+                    const member = this.state.member;
-                new RoomMember(null, resource);
+                    if (member) {
-            if (member) {
+                        userId = member.userId;
-                userId = member.userId;
+                        linkText = member.name;
-                linkText = member.rawDisplayName;
+                        avatar = <MemberAvatar member={member} width={16} height={16}/>;
-                avatar = <MemberAvatar member={member} width={16} height={16}/>;
+                        pillClass = 'mx_UserPill';
+                    }
             }
-        } else if (isRoomPill) {
+                break;
-            const room = prefix === '#' ?
+            case Pill.TYPE_ROOM_MENTION: {
-                MatrixClientPeg.get().getRooms().find((r) => {
+                const room = this.state.room;
-                    return r.getAliases().includes(resource);
+                if (room) {
-                }) : MatrixClientPeg.get().getRoom(resource);
+                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
-
+                    avatar = <RoomAvatar room={room} width={16} height={16}/>;
-            if (room) {
+                    pillClass = 'mx_RoomPill';
-                linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                }
-                avatar = <RoomAvatar room={room} width={16} height={16}/>;
             }
+                break;
         }
 
-        const classes = classNames({
+        const classes = classNames(pillClass, {
-            "mx_UserPill": isUserPill,
-            "mx_RoomPill": isRoomPill,
             "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
         });
 
-        if ((isUserPill || isRoomPill) && avatar) {
+        if (this.state.pillType) {
             return this.props.inMessage ?
                 <a className={classes} href={this.props.url} title={resource}>
                     {avatar}
@@ -115,3 +187,5 @@ export default React.createClass({
         }
     },
 });
+
+export default Pill;