Refactored AddressTile to use string address rather than user object, so it can user email as well mx userId

src/components/views/dialogs/ChatInviteDialog.js

@@ -73,7 +73,7 @@ module.exports = React.createClass({
 
         // Either an address tile was created, or text input is being used
         if (this.state.inviteList[0]) {
-            addr = this.state.inviteList[0].userId;
+            addr = this.state.inviteList[0];
         } else {
             addr = this.refs.textinput.value;
         }
@@ -159,7 +159,7 @@ module.exports = React.createClass({
 
     onSelected: function(index) {
         var inviteList = this.state.inviteList.slice();
-        inviteList.push(this.state.queryList[index]);
+        inviteList.push(this.state.queryList[index].userId.toLowerCase());
         this.setState({
             inviteList: inviteList,
             queryList: [],
@@ -238,7 +238,7 @@ module.exports = React.createClass({
 
     _isOnInviteList: function(uid) {
         for (let i = 0; i < this.state.inviteList.length; i++) {
-            if (this.state.inviteList[i].userId.toLowerCase() === uid) {
+            if (this.state.inviteList[i] === uid) {
                 return true;
             }
         }
@@ -256,7 +256,7 @@ module.exports = React.createClass({
             var AddressTile = sdk.getComponent("elements.AddressTile");
             for (let i = 0; i < this.state.inviteList.length; i++) {
                 query.push(
-                    <AddressTile key={i} user={this.state.inviteList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />
+                    <AddressTile key={i} address={this.state.inviteList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />
                 );
             }
         }

src/components/views/elements/AddressSelector.js

@@ -125,7 +125,7 @@ module.exports = React.createClass({
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
                     <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
-                        <AddressTile user={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                        <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );
             }

src/components/views/elements/AddressTile.js

@@ -19,13 +19,15 @@ limitations under the License.
 var React = require('react');
 var classNames = require('classnames');
 var sdk = require("../../../index");
+var Invite = require("../../../Invite");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Avatar = require('../../../Avatar');
 
 module.exports = React.createClass({
     displayName: 'AddressTile',
 
     propTypes: {
-        user: React.PropTypes.object.isRequired,
+        address: React.PropTypes.string.isRequired,
         canDismiss: React.PropTypes.bool,
         onDismissed: React.PropTypes.func,
         justified: React.PropTypes.bool,
@@ -44,11 +46,27 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var userId, name, imgUrl, email;
         var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var userId = this.props.user.userId;
+
-        var name = this.props.user.displayName || userId;
+        // Check if the addr is a valid type
-        var imgUrl = Avatar.avatarUrlForUser(this.props.user, 25, 25, "crop");
+        var addrType = Invite.getAddressType(this.props.address);
+        if (addrType === "mx") {
+            let user = MatrixClientPeg.get().getUser(this.props.address);
+            if (user) {
+                userId = user.userId;
+                name = user.displayName || userId;
+                imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
+            }
+        } else if (addrType === "email") {
+            email = this.props.address;
+            name="email";
+            imgUrl = "img/icon-email-user.svg";
+        } else {
+            name="Unknown";
+            imgUrl = "img/icon-email-user.svg";
+        }
 
         var network;
         if (this.props.networkUrl !== "") {
@@ -59,6 +77,44 @@ module.exports = React.createClass({
             );
         }
 
+        var info;
+        if (userId) {
+            var nameClasses = classNames({
+                "mx_AddressTile_name": true,
+                "mx_AddressTile_justified": this.props.justified,
+            });
+
+            var idClasses = classNames({
+                "mx_AddressTile_id": true,
+                "mx_AddressTile_justified": this.props.justified,
+            });
+
+            info = (
+                <div className="mx_AddressTile_mx">
+                    <div className={nameClasses}>{ name }</div>
+                    <div className={idClasses}>{ userId }</div>
+                </div>
+            );
+        } else if (email)  {
+            var emailClasses = classNames({
+                "mx_AddressTile_email": true,
+                "mx_AddressTile_justified": this.props.justified,
+            });
+
+            info = (
+                <div className={emailClasses}>{ email }</div>
+            );
+        } else {
+            var unknownClasses = classNames({
+                "mx_AddressTile_unknown": true,
+                "mx_AddressTile_justified": this.props.justified,
+            });
+
+            info = (
+                <div className={unknownClasses}>Unknown Address</div>
+            );
+        }
+
         var dismiss;
         if (this.props.canDismiss) {
             dismiss = (
@@ -68,24 +124,13 @@ module.exports = React.createClass({
             );
         }
 
-        var nameClasses = classNames({
-            "mx_AddressTile_name": true,
-            "mx_AddressTile_justified": this.props.justified,
-        });
-
-        var idClasses = classNames({
-            "mx_AddressTile_id": true,
-            "mx_AddressTile_justified": this.props.justified,
-        });
-
         return (
             <div className="mx_AddressTile">
                 { network }
                 <div className="mx_AddressTile_avatar">
                     <BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />
                 </div>
-                <div className={nameClasses}>{ name }</div>
+                { info }
-                <div className={idClasses}>{ userId }</div>
                 { dismiss }
             </div>
         );