From 28dcbb2a78434d2f99f82d5ce951a6a49ab43753 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 13:00:44 +0100
Subject: [PATCH 01/26] Refactored the queryList into seperate AddressSelector
 component

---
 src/component-index.js                        |   1 +
 .../views/dialogs/ChatInviteDialog.js         | 118 ++------------
 .../views/elements/AddressSelector.js         | 149 ++++++++++++++++++
 3 files changed, 166 insertions(+), 102 deletions(-)
 create mode 100644 src/components/views/elements/AddressSelector.js

diff --git a/src/component-index.js b/src/component-index.js
index 4cf2ba40168..c35b2872576 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -54,6 +54,7 @@ module.exports.components['views.dialogs.NeedToRegisterDialog'] = require('./com
 module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
 module.exports.components['views.dialogs.SetDisplayNameDialog'] = require('./components/views/dialogs/SetDisplayNameDialog');
 module.exports.components['views.dialogs.TextInputDialog'] = require('./components/views/dialogs/TextInputDialog');
+module.exports.components['views.elements.AddressSelector'] = require('./components/views/elements/AddressSelector');
 module.exports.components['views.elements.AddressTile'] = require('./components/views/elements/AddressTile');
 module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText');
 module.exports.components['views.elements.EditableTextContainer'] = require('./components/views/elements/EditableTextContainer');
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e3221271352..f0eb1c4e635 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -56,10 +56,8 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             user: null,
-            queryList: [],
             addressSelected: false,
-            selected: 0,
-            hover: false,
+            queryList: [],
         };
     },
 
@@ -71,15 +69,6 @@ module.exports = React.createClass({
         this._updateUserList();
     },
 
-    componentDidUpdate: function() {
-        // As the user scrolls with the arrow keys keep the selected item
-        // at the top of the window.
-        if (this.scrollElement && !this.state.hover) {
-            var elementHeight = this.queryListElement.getBoundingClientRect().height;
-            this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
-        }
-    },
-
     onStartChat: function() {
         var addr;
 
@@ -124,32 +113,15 @@ module.exports = React.createClass({
         } else if (e.keyCode === 38) { // up arrow
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.selected > 0) {
-                this.setState({
-                    selected: this.state.selected - 1,
-                    hover : false,
-                });
-            }
+            this.addressSelector.onKeyUpArrow();
         } else if (e.keyCode === 40) { // down arrow
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.selected < this._maxSelected(this.state.queryList)) {
-                this.setState({
-                    selected: this.state.selected + 1,
-                    hover : false,
-                });
-            }
+            this.addressSelector.onKeyDownArrow();
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.state.queryList.length > 0) {
-                this.setState({
-                    user: this.state.queryList[this.state.selected],
-                    addressSelected: true,
-                    queryList: [],
-                    hover : false,
-                });
-            }
+            this.addressSelector.onKeyReturn();
         }
     },
 
@@ -164,24 +136,13 @@ module.exports = React.createClass({
             });
         }
 
-        // Make sure the selected item isn't outside the list bounds
-        var selected = this.state.selected;
-        var maxSelected = this._maxSelected(queryList);
-        if (selected > maxSelected) {
-            selected = maxSelected;
-        }
-
-        this.setState({
-            queryList: queryList,
-            selected: selected,
-        });
+        this.setState({ queryList: queryList });
     },
 
     onDismissed: function() {
         this.setState({
             user: null,
             addressSelected: false,
-            selected: 0,
             queryList: [],
         });
     },
@@ -193,51 +154,16 @@ module.exports = React.createClass({
                 user: self.state.queryList[index],
                 addressSelected: true,
                 queryList: [],
-                hover: false,
             });
         };
     },
 
-    onMouseEnter: function(index) {
-        var self = this;
-        return function() {
-            self.setState({
-                selected: index,
-                hover: true,
-            });
-        };
-    },
-
-    onMouseLeave: function() {
-        this.setState({ hover : false });
-    },
-
-    createQueryListTiles: function() {
-        var self = this;
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var AddressTile = sdk.getComponent("elements.AddressTile");
-        var maxSelected = this._maxSelected(this.state.queryList);
-        var queryList = [];
-
-        // Only create the query elements if there are queries
-        if (this.state.queryList.length > 0) {
-            for (var i = 0; i <= maxSelected; i++) {
-                var classes = classNames({
-                    "mx_ChatInviteDialog_queryListElement": true,
-                    "mx_ChatInviteDialog_selected": this.state.selected === i,
-                });
-
-                // NOTE: Defaulting to "vector" as the network, until the network backend stuff is done.
-                // Saving the queryListElement so we can use it to work out, in the componentDidUpdate
-                // method, how far to scroll when using the arrow keys
-                queryList.push(
-                    <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.queryListElement = ref; }} >
-                        <AddressTile user={this.state.queryList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
-                    </div>
-                );
-            }
-        }
-        return queryList;
+    onSelected: function(index) {
+        this.setState({
+            user: this.state.queryList[index],
+            addressSelected: true,
+            queryList: [],
+        });
     },
 
     _getDirectMessageRoom: function(addr) {
@@ -279,12 +205,6 @@ module.exports = React.createClass({
         this._userList = MatrixClientPeg.get().getUsers();
     }, 500),
 
-    _maxSelected: function(list) {
-        var listSize = list.length === 0 ? 0 : list.length - 1;
-        var maxSelected = listSize > (TRUNCATE_QUERY_LIST - 1) ? (TRUNCATE_QUERY_LIST - 1) : listSize
-        return maxSelected;
-    },
-
     // This is the search algorithm for matching users
     _matches: function(query, user) {
         var name = user.displayName.toLowerCase();
@@ -313,6 +233,7 @@ module.exports = React.createClass({
 
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        var AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
         var query;
@@ -335,16 +256,6 @@ module.exports = React.createClass({
             );
         }
 
-        var queryList;
-        var queryListElements = this.createQueryListTiles();
-        if (queryListElements.length > 0) {
-            queryList = (
-                <div className="mx_ChatInviteDialog_queryList" ref={(ref) => {this.scrollElement = ref}}>
-                    { queryListElements }
-                </div>
-            );
-        }
-
         return (
             <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
                 <div className="mx_Dialog_title">
@@ -358,7 +269,10 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_Dialog_content">
                     <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
-                    { queryList }
+                    <AddressSelector ref={(ref) => {this.addressSelector = ref}}
+                        addressList={ this.state.queryList }
+                        onSelected={ this.onSelected }
+                        truncateAt={ TRUNCATE_QUERY_LIST } />
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this.onStartChat}>
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
new file mode 100644
index 00000000000..095f2888cd7
--- /dev/null
+++ b/src/components/views/elements/AddressSelector.js
@@ -0,0 +1,149 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+var sdk = require("../../../index");
+var classNames = require('classnames');
+
+module.exports = React.createClass({
+    displayName: 'AddressSelector',
+
+    propTypes: {
+        onSelected: React.PropTypes.func.isRequired,
+        addressList: React.PropTypes.array.isRequired,
+        truncateAt: React.PropTypes.number.isRequired,
+        selected: React.PropTypes.number,
+    },
+
+    getInitialState: function() {
+        return {
+            selected: this.props.selected === undefined ? 0 : this.props.selected,
+            hover: false,
+        };
+    },
+
+    componentDidUpdate: function() {
+        // Make sure the selected item isn't outside the list bounds
+        var selected = this.state.selected;
+        var maxSelected = this._maxSelected(this.props.addressList);
+        if (selected > maxSelected) {
+            selected = maxSelected;
+        }
+
+        // As the user scrolls with the arrow keys keep the selected item
+        // at the top of the window.
+        if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {
+            var elementHeight = this.addressListElement.getBoundingClientRect().height;
+            this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
+        }
+    },
+
+    onKeyUpArrow: function() {
+        if (this.state.selected > 0) {
+            this.setState({
+                selected: this.state.selected - 1,
+                hover : false,
+            });
+        }
+    },
+
+    onKeyDownArrow: function() {
+        if (this.state.selected < this._maxSelected(this.props.addressList)) {
+            this.setState({
+                selected: this.state.selected + 1,
+                hover : false,
+            });
+        }
+    },
+
+    onKeyReturn: function() {
+        this.selectAddress(this.state.selected);
+    },
+
+    onClick: function(index) {
+        var self = this;
+        return function() {
+            self.selectAddress(index);
+        };
+    },
+
+    onMouseEnter: function(index) {
+        var self = this;
+        return function() {
+            self.setState({
+                selected: index,
+                hover: true,
+            });
+        };
+    },
+
+    onMouseLeave: function() {
+        this.setState({ hover : false });
+    },
+
+    selectAddress: function(index) {
+        this.props.onSelected(index);
+        this.setState({ hover: false });
+    },
+
+    createAddressListTiles: function() {
+        var self = this;
+        var AddressTile = sdk.getComponent("elements.AddressTile");
+        var maxSelected = this._maxSelected(this.props.addressList);
+        var addressList = [];
+
+        // Only create the address elements if there are address
+        if (this.props.addressList.length > 0) {
+            for (var i = 0; i <= maxSelected; i++) {
+                var classes = classNames({
+                    "mx_AddressSelector_addressListElement": true,
+                    "mx_AddressSelector_selected": this.state.selected === i,
+                });
+
+                // NOTE: Defaulting to "vector" as the network, until the network backend stuff is done.
+                // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
+                // 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" />
+                    </div>
+                );
+            }
+        }
+        return addressList;
+    },
+
+    _maxSelected: function(list) {
+        var listSize = list.length === 0 ? 0 : list.length - 1;
+        var maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize
+        return maxSelected;
+    },
+
+    render: function() {
+        var classes = classNames({
+            "mx_AddressSelector": true,
+            "mx_AddressSelector_empty": this.props.addressList.length === 0,
+        });
+
+        return (
+            <div className={classes} ref={(ref) => {this.scrollElement = ref}}>
+                { this.createAddressListTiles() }
+            </div>
+        );
+    }
+});

From 7d58968ea619cd96dd7f57d5a0d24e0c7f362360 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 14:07:51 +0100
Subject: [PATCH 02/26] Correctly positioning the selected element if list
 shrinks in size

---
 src/components/views/elements/AddressSelector.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 095f2888cd7..cd627058091 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -37,14 +37,16 @@ module.exports = React.createClass({
         };
     },
 
-    componentDidUpdate: function() {
+    componentWillReceiveProps: function(props) {
         // Make sure the selected item isn't outside the list bounds
         var selected = this.state.selected;
-        var maxSelected = this._maxSelected(this.props.addressList);
+        var maxSelected = this._maxSelected(props.addressList);
         if (selected > maxSelected) {
-            selected = maxSelected;
+            this.setState({ selected: maxSelected });
         }
+    },
 
+    componentDidUpdate: function() {
         // As the user scrolls with the arrow keys keep the selected item
         // at the top of the window.
         if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {

From d538377b826aebd5a3b920beac0ed936a1ee9000 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 14:48:00 +0100
Subject: [PATCH 03/26] Added an inviteList state to hold all the users to
 invite, but currently pretend it only has one users (the first one)

---
 .../views/dialogs/ChatInviteDialog.js         | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index f0eb1c4e635..6d4cf21f701 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -55,8 +55,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            user: null,
-            addressSelected: false,
+            inviteList: [],
             queryList: [],
         };
     },
@@ -73,8 +72,8 @@ module.exports = React.createClass({
         var addr;
 
         // Either an address tile was created, or text input is being used
-        if (this.state.user) {
-            addr = this.state.user.userId;
+        if (this.state.inviteList[0]) {
+            addr = this.state.inviteList[0].userId;
         } else {
             addr = this.refs.textinput.value;
         }
@@ -141,8 +140,7 @@ module.exports = React.createClass({
 
     onDismissed: function() {
         this.setState({
-            user: null,
-            addressSelected: false,
+            inviteList: [],
             queryList: [],
         });
     },
@@ -150,18 +148,15 @@ module.exports = React.createClass({
     onClick: function(index) {
         var self = this;
         return function() {
-            self.setState({
-                user: self.state.queryList[index],
-                addressSelected: true,
-                queryList: [],
-            });
+            self.onSelected(index);
         };
     },
 
     onSelected: function(index) {
+        var inviteList = this.state.inviteList.slice();
+        inviteList.push(this.state.queryList[index]);
         this.setState({
-            user: this.state.queryList[index],
-            addressSelected: true,
+            inviteList: inviteList,
             queryList: [],
         });
     },
@@ -237,10 +232,10 @@ module.exports = React.createClass({
         this.scrollElement = null;
 
         var query;
-        if (this.state.addressSelected) {
+        if (this.state.inviteList.length > 0) {
             var AddressTile = sdk.getComponent("elements.AddressTile");
             query = (
-                <AddressTile user={this.state.user} canDismiss={true} onDismissed={this.onDismissed} />
+                <AddressTile user={this.state.inviteList[0]} canDismiss={true} onDismissed={this.onDismissed} />
             );
         } else {
             query = (

From 5acdb8233bf77dd0e3b4ef3b5b73f5fa16e78c47 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 15:04:32 +0100
Subject: [PATCH 04/26] The dismiss function now correctly deletes the
 dismissed element. Also the query render, will now render all invitees

---
 .../views/dialogs/ChatInviteDialog.js         | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 6d4cf21f701..69dd6764a6a 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -138,11 +138,16 @@ module.exports = React.createClass({
         this.setState({ queryList: queryList });
     },
 
-    onDismissed: function() {
-        this.setState({
-            inviteList: [],
-            queryList: [],
-        });
+    onDismissed: function(index) {
+        var self = this;
+        return function() {
+            var inviteList = self.state.inviteList.slice();
+            inviteList.splice(index, 1);
+            self.setState({
+                inviteList: inviteList,
+                queryList: [],
+            });
+        }
     },
 
     onClick: function(index) {
@@ -234,9 +239,12 @@ module.exports = React.createClass({
         var query;
         if (this.state.inviteList.length > 0) {
             var AddressTile = sdk.getComponent("elements.AddressTile");
-            query = (
-                <AddressTile user={this.state.inviteList[0]} canDismiss={true} onDismissed={this.onDismissed} />
-            );
+            query = [];
+            for (let i = 0; i < this.state.inviteList.length; i++) {
+                query.push(
+                    <AddressTile key={i} user={this.state.inviteList[0]} canDismiss={true} onDismissed={ this.onDismissed(i) } />
+                );
+            }
         } else {
             query = (
                 <textarea rows="1"

From 4836025a1dd17dc4b257a14c57fd70d2d4cd77f0 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 15:21:17 +0100
Subject: [PATCH 05/26] First pass at adding multiple addresses, can only add
 from AddressSelector at the moment

---
 .../views/dialogs/ChatInviteDialog.js         | 31 ++++++++++---------
 .../views/elements/AddressSelector.js         |  7 +++--
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 69dd6764a6a..9b1bb1752a8 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -236,28 +236,29 @@ module.exports = React.createClass({
         var AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
-        var query;
+        var query = [];
+        // create the invite list
         if (this.state.inviteList.length > 0) {
             var AddressTile = sdk.getComponent("elements.AddressTile");
-            query = [];
             for (let i = 0; i < this.state.inviteList.length; i++) {
                 query.push(
-                    <AddressTile key={i} user={this.state.inviteList[0]} canDismiss={true} onDismissed={ this.onDismissed(i) } />
+                    <AddressTile key={i} user={this.state.inviteList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />
                 );
             }
-        } else {
-            query = (
-                <textarea rows="1"
-                    id="textinput"
-                    ref="textinput"
-                    className="mx_ChatInviteDialog_input"
-                    onChange={this.onQueryChanged}
-                    placeholder={this.props.placeholder}
-                    defaultValue={this.props.value}
-                    autoFocus={this.props.focus}>
-                </textarea>
-            );
         }
+        // Add the query at the end
+        query.push(
+            <textarea key={this.state.inviteList.length}
+                rows="1"
+                id="textinput"
+                ref="textinput"
+                className="mx_ChatInviteDialog_input"
+                onChange={this.onQueryChanged}
+                placeholder={this.props.placeholder}
+                defaultValue={this.props.value}
+                autoFocus={this.props.focus}>
+            </textarea>
+        );
 
         return (
             <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index cd627058091..7668cca5372 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -99,8 +99,11 @@ module.exports = React.createClass({
     },
 
     selectAddress: function(index) {
-        this.props.onSelected(index);
-        this.setState({ hover: false });
+        // Only try to select an address if one exists
+        if (this.props.addressList.length !== 0) {
+            this.props.onSelected(index);
+            this.setState({ hover: false });
+        }
     },
 
     createAddressListTiles: function() {

From e28a3f10a04849d7ae20dca549821413caee6434 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 15:48:32 +0100
Subject: [PATCH 06/26] Don't allow someone who is already on the invite list
 to appear in the AddressSelector

---
 src/components/views/dialogs/ChatInviteDialog.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 9b1bb1752a8..7ed7be1c153 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -211,6 +211,11 @@ module.exports = React.createClass({
         var uid = user.userId.toLowerCase();
         query = query.toLowerCase();
 
+        // dount match any that are already on the invite list
+        if (this._isOnInviteList(uid)) {
+            return false;
+        }
+
         // direct prefix matches
         if (name.indexOf(query) === 0 || uid.indexOf(query) === 0) {
             return true;
@@ -231,6 +236,15 @@ module.exports = React.createClass({
         return false;
     },
 
+    _isOnInviteList: function(uid) {
+        for (let i = 0; i < this.state.inviteList.length; i++) {
+            if (this.state.inviteList[i].userId.toLowerCase() === uid) {
+                return true;
+            }
+        }
+        return false;
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var AddressSelector = sdk.getComponent("elements.AddressSelector");

From 5b2cc555a31a5fdf2bd47f95af5b5612b42c2799 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 16:52:04 +0100
Subject: [PATCH 07/26] Refactored AddressTile to use string address rather
 than user object, so it can user email as well mx userId

---
 .../views/dialogs/ChatInviteDialog.js         |  8 +-
 .../views/elements/AddressSelector.js         |  2 +-
 src/components/views/elements/AddressTile.js  | 77 +++++++++++++++----
 3 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 7ed7be1c153..a88b27ba026 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/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) } />
                 );
             }
         }
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 7668cca5372..204e08404e7 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/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>
                 );
             }
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index e0a5dbbc801..a5223fb21cf 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/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;
-        var imgUrl = Avatar.avatarUrlForUser(this.props.user, 25, 25, "crop");
+
+        // Check if the addr is a valid type
+        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>
-                <div className={idClasses}>{ userId }</div>
+                { info }
                 { dismiss }
             </div>
         );

From 44b8c29c849a9feb46876adacb6c61710527d723 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 17:06:43 +0100
Subject: [PATCH 08/26] Allow addresses to be added as text when space or comma
 are pressed

---
 src/components/views/dialogs/ChatInviteDialog.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index a88b27ba026..ce7a0c26d58 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -74,8 +74,6 @@ 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];
-        } else {
-            addr = this.refs.textinput.value;
         }
 
         // Check if the addr is a valid type
@@ -121,6 +119,15 @@ module.exports = React.createClass({
             e.stopPropagation();
             e.preventDefault();
             this.addressSelector.onKeyReturn();
+        } else if (e.keyCode === 32 || e.keyCode === 188) { // space or comma
+            e.stopPropagation();
+            e.preventDefault();
+            var inviteList = this.state.inviteList.slice();
+            inviteList.push(this.refs.textinput.value);
+            this.setState({
+                inviteList: inviteList,
+                queryList: [],
+            });
         }
     },
 

From 95d9df75341b6d716a7e4664539dd995ce2d75bb Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 17:15:56 +0100
Subject: [PATCH 09/26] Make an invalid mx user an unknown user AddressTile

---
 src/components/views/elements/AddressTile.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index a5223fb21cf..dedb0a6a28c 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -58,6 +58,9 @@ module.exports = React.createClass({
                 userId = user.userId;
                 name = user.displayName || userId;
                 imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
+            } else {
+                name="Unknown";
+                imgUrl = "img/icon-email-user.svg";
             }
         } else if (addrType === "email") {
             email = this.props.address;

From 5a0a72ee46bd5327a6c3662e3de89766ac4847c3 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 17:25:14 +0100
Subject: [PATCH 10/26] Added styling for unknown addresses

---
 src/components/views/elements/AddressTile.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index dedb0a6a28c..a6b86c12b28 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -60,7 +60,7 @@ module.exports = React.createClass({
                 imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
             } else {
                 name="Unknown";
-                imgUrl = "img/icon-email-user.svg";
+                imgUrl = "img/avatar-error.svg";
             }
         } else if (addrType === "email") {
             email = this.props.address;
@@ -68,7 +68,7 @@ module.exports = React.createClass({
             imgUrl = "img/icon-email-user.svg";
         } else {
             name="Unknown";
-            imgUrl = "img/icon-email-user.svg";
+            imgUrl = "img/avatar-error.svg";
         }
 
         var network;
@@ -81,6 +81,7 @@ module.exports = React.createClass({
         }
 
         var info;
+        var error = false;
         if (userId) {
             var nameClasses = classNames({
                 "mx_AddressTile_name": true,
@@ -108,6 +109,7 @@ module.exports = React.createClass({
                 <div className={emailClasses}>{ email }</div>
             );
         } else {
+            error = true;
             var unknownClasses = classNames({
                 "mx_AddressTile_unknown": true,
                 "mx_AddressTile_justified": this.props.justified,
@@ -118,6 +120,11 @@ module.exports = React.createClass({
             );
         }
 
+        var classes = classNames({
+            "mx_AddressTile": true,
+            "mx_AddressTile_error": error,
+        });
+
         var dismiss;
         if (this.props.canDismiss) {
             dismiss = (
@@ -128,7 +135,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_AddressTile">
+            <div className={classes}>
                 { network }
                 <div className="mx_AddressTile_avatar">
                     <BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />

From 96299e864a71f112e2b409b5797ccf42b74fec9b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 17:38:32 +0100
Subject: [PATCH 11/26] Need cto push the actual userId not the toLowerCase
 version, as userId's are case sensitive

---
 src/components/views/dialogs/ChatInviteDialog.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index ce7a0c26d58..9dface8da48 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -166,7 +166,7 @@ module.exports = React.createClass({
 
     onSelected: function(index) {
         var inviteList = this.state.inviteList.slice();
-        inviteList.push(this.state.queryList[index].userId.toLowerCase());
+        inviteList.push(this.state.queryList[index].userId);
         this.setState({
             inviteList: inviteList,
             queryList: [],
@@ -219,7 +219,7 @@ module.exports = React.createClass({
         query = query.toLowerCase();
 
         // dount match any that are already on the invite list
-        if (this._isOnInviteList(uid)) {
+        if (this._isOnInviteList(uid).toLowerCase()) {
             return false;
         }
 

From 0f720dd6b828b7a935388f7698aa0a2fd84ea531 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 12 Sep 2016 17:41:32 +0100
Subject: [PATCH 12/26] Oops, toLowerCase call in wrong place

---
 src/components/views/dialogs/ChatInviteDialog.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 9dface8da48..ce7ca0ff4d8 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -219,7 +219,7 @@ module.exports = React.createClass({
         query = query.toLowerCase();
 
         // dount match any that are already on the invite list
-        if (this._isOnInviteList(uid).toLowerCase()) {
+        if (this._isOnInviteList(uid)) {
             return false;
         }
 
@@ -245,7 +245,7 @@ module.exports = React.createClass({
 
     _isOnInviteList: function(uid) {
         for (let i = 0; i < this.state.inviteList.length; i++) {
-            if (this.state.inviteList[i] === uid) {
+            if (this.state.inviteList[i].toLowerCase() === uid) {
                 return true;
             }
         }

From a7ea1931890dec4bc13bedfbb56d3b7857b0a885 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 10:29:17 +0100
Subject: [PATCH 13/26] A supplied roomId property, will make the dialog use
 that room for the invites, rather than creating a new one

---
 .../views/dialogs/ChatInviteDialog.js         | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index ce7ca0ff4d8..be878aa6702 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -37,6 +37,7 @@ module.exports = React.createClass({
         ]),
         value: React.PropTypes.string,
         placeholder: React.PropTypes.string,
+        roomId: React.PropTypes.string,
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired
@@ -189,19 +190,31 @@ module.exports = React.createClass({
     },
 
     _startChat: function(addr) {
-        // Start the chat
-        createRoom().then(function(roomId) {
-            return Invite.inviteToRoom(roomId, addr);
-        })
-        .catch(function(err) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Failure to invite user",
-                description: err.toString()
-            });
-            return null;
-        })
-        .done();
+        if (this.props.roomId) {
+            Invite.inviteToRoom(this.props.roomId, addr).catch(function(err) {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failure to invite user",
+                    description: err.toString()
+                });
+                return null;
+            })
+            .done();
+        } else {
+            // Start the chat
+            createRoom().then(function(roomId) {
+                return Invite.inviteToRoom(roomId, addr);
+            })
+            .catch(function(err) {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failure to invite user",
+                    description: err.toString()
+                });
+                return null;
+            })
+            .done();
+        }
 
         // Close - this will happen before the above, as that is async
         this.props.onFinished(true, addr);

From 99dfcb4ed2c35115de5f8485b43e5cdb6de3d5c2 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 10:33:15 +0100
Subject: [PATCH 14/26] It's no longer a onde to one chat dialog, as you can
 invite multiple people

---
 src/components/structures/MatrixChat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index c83da2b8f00..696be0f7ac2 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -512,7 +512,7 @@ module.exports = React.createClass({
     _createChat: function() {
         var ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
         Modal.createDialog(ChatInviteDialog, {
-            title: "Start a one to one chat",
+            title: "Start a new chat",
         });
     },
 

From ca2ba5528863ed5ed2eee7be88033c0eaaeddbb7 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 11:02:59 +0100
Subject: [PATCH 15/26] Added error checking, and UI

---
 .../views/dialogs/ChatInviteDialog.js         | 59 +++++++++++++++----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index be878aa6702..5946f143d81 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -56,6 +56,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
+            error: false,
             inviteList: [],
             queryList: [],
         };
@@ -123,12 +124,16 @@ module.exports = React.createClass({
         } else if (e.keyCode === 32 || e.keyCode === 188) { // space or comma
             e.stopPropagation();
             e.preventDefault();
-            var inviteList = this.state.inviteList.slice();
-            inviteList.push(this.refs.textinput.value);
-            this.setState({
-                inviteList: inviteList,
-                queryList: [],
-            });
+            if (this._isValidAddress(this.refs.textinput.value)) {
+                var inviteList = this.state.inviteList.slice();
+                inviteList.push(this.refs.textinput.value);
+                this.setState({
+                    inviteList: inviteList,
+                    queryList: [],
+                });
+            } else {
+                this.setState({ error: true });
+            }
         }
     },
 
@@ -143,7 +148,10 @@ module.exports = React.createClass({
             });
         }
 
-        this.setState({ queryList: queryList });
+        this.setState({
+            queryList: queryList,
+            error: false,
+        });
     },
 
     onDismissed: function(index) {
@@ -265,6 +273,23 @@ module.exports = React.createClass({
         return false;
     },
 
+    _isValidAddress: function(addr) {
+        // Check if the addr is a valid type
+        var addrType = Invite.getAddressType(addr);
+        if (addrType === "mx") {
+            let user = MatrixClientPeg.get().getUser(addr);
+            if (user) {
+                return true;
+            } else {
+                return false;
+            }
+        } else if (addrType === "email") {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var AddressSelector = sdk.getComponent("elements.AddressSelector");
@@ -280,6 +305,7 @@ module.exports = React.createClass({
                 );
             }
         }
+
         // Add the query at the end
         query.push(
             <textarea key={this.state.inviteList.length}
@@ -294,6 +320,19 @@ module.exports = React.createClass({
             </textarea>
         );
 
+        var error;
+        var addressSelector;
+        if (this.state.error) {
+            error = <div className="mx_ChatInviteDialog_error">You have entered an invalid contact. Try using their Matrix ID or email address.</div>
+        } else {
+            addressSelector = (
+                <AddressSelector ref={(ref) => {this.addressSelector = ref}}
+                    addressList={ this.state.queryList }
+                    onSelected={ this.onSelected }
+                    truncateAt={ TRUNCATE_QUERY_LIST } />
+            );
+        }
+
         return (
             <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
                 <div className="mx_Dialog_title">
@@ -307,10 +346,8 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_Dialog_content">
                     <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
-                    <AddressSelector ref={(ref) => {this.addressSelector = ref}}
-                        addressList={ this.state.queryList }
-                        onSelected={ this.onSelected }
-                        truncateAt={ TRUNCATE_QUERY_LIST } />
+                    { error }
+                    { addressSelector }
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this.onStartChat}>

From 0b267763e2c9b240a95d93580eaeeb028178a2ab Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 12:07:49 +0100
Subject: [PATCH 16/26] Small refactor to handle Direct Message chat as well as
 multi invite chat

---
 src/components/views/dialogs/ChatInviteDialog.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 5946f143d81..bf4acf59d30 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -70,7 +70,7 @@ module.exports = React.createClass({
         this._updateUserList();
     },
 
-    onStartChat: function() {
+    onButtonClick: function() {
         var addr;
 
         // Either an address tile was created, or text input is being used
@@ -78,8 +78,8 @@ module.exports = React.createClass({
             addr = this.state.inviteList[0];
         }
 
-        // Check if the addr is a valid type
-        if (Invite.getAddressType(addr) === "mx") {
+        if (this.state.inviteList.length === 1 && Invite.getAddressType(addr) === "mx" && !this.props.roomId) {
+            // Direct Message chat
             var room = this._getDirectMessageRoom(addr);
             if (room) {
                 // A Direct Message room already exists for this user and you
@@ -92,11 +92,9 @@ module.exports = React.createClass({
             } else {
                 this._startChat(addr);
             }
-        } else if (Invite.getAddressType(addr) === "email") {
-            this._startChat(addr);
         } else {
-            // Nothing to do, so focus back on the textinput
-            this.refs.textinput.focus();
+            // Multi invite chat
+            this._startChat(addr);
         }
     },
 
@@ -350,7 +348,7 @@ module.exports = React.createClass({
                     { addressSelector }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onStartChat}>
+                    <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
                         {this.props.button}
                     </button>
                 </div>

From cba76d651a79a0084a0ad4ce8dfd7f36138b1f83 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 12:12:33 +0100
Subject: [PATCH 17/26] Moved the isValidAddress method to the Invite utilty
 object

---
 src/Invite.js                                 | 17 +++++++++++++++++
 .../views/dialogs/ChatInviteDialog.js         | 19 +------------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/Invite.js b/src/Invite.js
index 3b52d6a1f46..2c908628b67 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -43,3 +43,20 @@ export function inviteToRoom(roomId, addr) {
         throw new Error('Unsupported address');
     }
 }
+
+export function isValidAddress(addr) {
+    // Check if the addr is a valid type
+    var addrType = this.getAddressType(addr);
+    if (addrType === "mx") {
+        let user = MatrixClientPeg.get().getUser(addr);
+        if (user) {
+            return true;
+        } else {
+            return false;
+        }
+    } else if (addrType === "email") {
+        return true;
+    } else {
+        return false;
+    }
+}
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index bf4acf59d30..3cfe7303be2 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -122,7 +122,7 @@ module.exports = React.createClass({
         } else if (e.keyCode === 32 || e.keyCode === 188) { // space or comma
             e.stopPropagation();
             e.preventDefault();
-            if (this._isValidAddress(this.refs.textinput.value)) {
+            if (Invite.isValidAddress(this.refs.textinput.value)) {
                 var inviteList = this.state.inviteList.slice();
                 inviteList.push(this.refs.textinput.value);
                 this.setState({
@@ -271,23 +271,6 @@ module.exports = React.createClass({
         return false;
     },
 
-    _isValidAddress: function(addr) {
-        // Check if the addr is a valid type
-        var addrType = Invite.getAddressType(addr);
-        if (addrType === "mx") {
-            let user = MatrixClientPeg.get().getUser(addr);
-            if (user) {
-                return true;
-            } else {
-                return false;
-            }
-        } else if (addrType === "email") {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var AddressSelector = sdk.getComponent("elements.AddressSelector");

From 538b68a6b272ac72ffcb7b46099c185d8c685577 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 12:47:31 +0100
Subject: [PATCH 18/26] Updated with the new createRoom DM stuff

---
 .../views/dialogs/ChatInviteDialog.js          | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e4ed432acd5..38f45a93705 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -200,7 +200,8 @@ module.exports = React.createClass({
 
     _startChat: function(addr) {
         if (this.props.roomId) {
-            Invite.inviteToRoom(this.props.roomId, addr).catch(function(err) {
+            Invite.inviteToRoom(this.props.roomId, addr)
+            .catch(function(err) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Failure to invite user",
@@ -211,9 +212,7 @@ module.exports = React.createClass({
             .done();
         } else {
             // Start the chat
-            createRoom().then(function(roomId) {
-                return Invite.inviteToRoom(roomId, addr);
-            })
+            createRoom({dmUserId: addr})
             .catch(function(err) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
@@ -224,17 +223,6 @@ module.exports = React.createClass({
             })
             .done();
         }
-//        // Start the chat
-//        createRoom({dmUserId: addr})
-//        .catch(function(err) {
-//            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-//            Modal.createDialog(ErrorDialog, {
-//                title: "Failure to invite user",
-//                description: err.toString()
-//            });
-//            return null;
-//        })
-//        .done();
 
         // Close - this will happen before the above, as that is async
         this.props.onFinished(true, addr);

From ca1bb0f70090847d163139fd7f0f7364a7b3be8d Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 14:28:03 +0100
Subject: [PATCH 19/26] Added new Invite button in the RHS footer which calls
 the new 'view_invite' action

---
 src/components/structures/MatrixChat.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 696be0f7ac2..4d4b47ce325 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -373,6 +373,9 @@ module.exports = React.createClass({
             case 'view_create_chat':
                 this._createChat();
                 break;
+            case 'view_invite':
+                this._invite(payload.roomId);
+                break;
             case 'notifier_enabled':
                 this.forceUpdate();
                 break;
@@ -516,6 +519,15 @@ module.exports = React.createClass({
         });
     },
 
+    _invite: function() {
+        var ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
+        Modal.createDialog(ChatInviteDialog, {
+            title: "Invite new room members",
+            button: "Send Invites",
+            description: "Who would you like to add to this room?"
+        });
+    },
+
     // update scrollStateMap according to the current scroll state of the
     // room view.
     _updateScrollMap: function() {

From 2db8f4ae6723f79446f6ce69d4d82ba4cacce591 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 14:30:37 +0100
Subject: [PATCH 20/26] Added pass through of roomId

---
 src/components/structures/MatrixChat.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 4d4b47ce325..45c7f5d01b9 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -519,12 +519,13 @@ module.exports = React.createClass({
         });
     },
 
-    _invite: function() {
+    _invite: function(roomId) {
         var ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
         Modal.createDialog(ChatInviteDialog, {
             title: "Invite new room members",
             button: "Send Invites",
-            description: "Who would you like to add to this room?"
+            description: "Who would you like to add to this room?",
+            roomId: roomId,
         });
     },
 

From 2fd9e2a98f6a3b102d53092cad8d4c884ad5f076 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 13 Sep 2016 14:47:56 +0100
Subject: [PATCH 21/26] Pull out multi-inviting from MultiInviteDialog

MultiInviteDialog would otherwise use this, but is about to go away, so it has been left.
---
 src/Invite.js             |  15 ++++
 src/utils/MultiInviter.js | 144 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 src/utils/MultiInviter.js

diff --git a/src/Invite.js b/src/Invite.js
index 3b52d6a1f46..de1f9bd1bbf 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import MatrixClientPeg from './MatrixClientPeg';
+import MultiInviter from '../../../utils/MultiInviter';
 
 const emailRegex = /^\S+@\S+\.\S+$/;
 
@@ -43,3 +44,17 @@ export function inviteToRoom(roomId, addr) {
         throw new Error('Unsupported address');
     }
 }
+
+/**
+ * Invites multiple addresses to a room
+ * Simpler interface to utils/MultiInviter but with
+ * no option to cancel.
+ *
+ * @param {roomId} The ID of the room to invite to
+ * @param {array} Array of strings of addresses to invite. May be matrix IDs or 3pids.
+ * @returns Promise
+ */
+export function inviteMultipleToRoom(roomId, addrs) {
+    this.inviter = new MultiInviter(roomId);
+    return inviter.invite(addrs);
+}
diff --git a/src/utils/MultiInviter.js b/src/utils/MultiInviter.js
new file mode 100644
index 00000000000..68a0800ed7d
--- /dev/null
+++ b/src/utils/MultiInviter.js
@@ -0,0 +1,144 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {getAddressType, inviteToRoom} from '../Invite';
+import q from 'q';
+
+/**
+ * Invites multiple addresses to a room, handling rate limiting from the server
+ */
+export default class MultiInviter {
+    constructor(roomId) {
+        this.roomId = roomId;
+
+        this.canceled = false;
+        this.addrs = [];
+        this.busy = false;
+        this.completionStates = {}; // State of each address (invited or error)
+        this.errorTexts = {}; // Textual error per address
+        this.deferred = null;
+    }
+
+    /**
+     * Invite users to this room. This may only be called once per
+     * instance of the class.
+     *
+     * The promise is given progress when each address completes, with an
+     * object argument with each completed address with value either
+     * 'invited' or 'error'.
+     *
+     * @param {array} addresses Array of addresses to invite
+     * @returns {Promise} Resolved when all invitations in the queue are complete
+     */
+    invite(addrs) {
+        if (this.addrs.length > 0) {
+            throw new Error("Already inviting/invited");
+        }
+        this.addrs.push(...addrs);
+
+        for (const addr of this.addrs) {
+            if (getAddressType(addr) === null) {
+                this.completionStates[addr] = 'error';
+                this.errorTexts[addr] = 'Unrecognised address';
+            }
+        }
+        this.deferred = q.defer();
+        this._inviteMore(0);
+
+        return this.deferred.promise;
+    }
+
+    /**
+     * Stops inviting. Causes promises returned by invite() to be rejected.
+     */
+    cancel() {
+        if (!this.busy) return;
+
+        this._canceled = true;
+        this.deferred.reject(new Error('canceled'));
+    }
+
+    getCompletionState(addr) {
+        return this.completionStates[addr];
+    }
+
+    getErrorText(addr) {
+        return this.errorTexts[addr];
+    }
+
+    _inviteMore(nextIndex) {
+        if (this._canceled) {
+            return;
+        }
+
+        if (nextIndex == this.addrs.length) {
+            this.busy = false;
+            this.deferred.resolve(this.completionStates);
+            return;
+        }
+
+        const addr = this.addrs[nextIndex];
+
+        // don't try to invite it if it's an invalid address
+        // (it will already be marked as an error though,
+        // so no need to do so again)
+        if (getAddressType(addr) === null) {
+            this._inviteMore(nextIndex + 1);
+            return;
+        }
+
+        // don't re-invite (there's no way in the UI to do this, but
+        // for sanity's sake)
+        if (this.completionStates[addr] == 'invited') {
+            this._inviteMore(nextIndex + 1);
+            return;
+        }
+
+        inviteToRoom(this.roomId, addr).then(() => {
+            if (this._canceled) { return; }
+
+            this.completionStates[addr] = 'invited';
+            this.deferred.notify(this.completionStates);
+
+            this._inviteMore(nextIndex + 1);
+        }, (err) => {
+            if (this._canceled) { return; }
+
+            let errorText;
+            let fatal = false;
+            if (err.errcode == 'M_FORBIDDEN') {
+                fatal = true;
+                errorText = 'You do not have permission to invite people to this room.';
+            } else if (err.errcode == 'M_LIMIT_EXCEEDED') {
+                // we're being throttled so wait a bit & try again
+                setTimeout(() => {
+                    this._inviteMore(nextIndex);
+                }, 5000);
+                return;
+            } else {
+                errorText = 'Unknown server error';
+            }
+            this.completionStates[addr] = 'error';
+            this.errorTexts[addr] = errorText;
+            this.busy = !fatal;
+
+            if (!fatal) {
+                this.deferred.notify(this.completionStates);
+                this._inviteMore(nextIndex + 1);
+            }
+        });
+    }
+}

From a53e00919854e87795ca4ab62d76f6f8078d11f7 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 13 Sep 2016 14:55:16 +0100
Subject: [PATCH 22/26] Missed a brace

---
 src/Invite.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Invite.js b/src/Invite.js
index 494d5f56624..d1debc4e8c7 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -57,6 +57,7 @@ export function inviteToRoom(roomId, addr) {
 export function inviteMultipleToRoom(roomId, addrs) {
     this.inviter = new MultiInviter(roomId);
     return inviter.invite(addrs);
+}
 
 export function isValidAddress(addr) {
     // Check if the addr is a valid type

From 406771532d9a72b70b2f531c479fb7614bf9bf8a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 13 Sep 2016 14:56:54 +0100
Subject: [PATCH 23/26] Correct path for MultiInviter

---
 src/Invite.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Invite.js b/src/Invite.js
index d1debc4e8c7..59e1dc41ea4 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import MatrixClientPeg from './MatrixClientPeg';
-import MultiInviter from '../../../utils/MultiInviter';
+import MultiInviter from './utils/MultiInviter';
 
 const emailRegex = /^\S+@\S+\.\S+$/;
 

From 272dd82b9def55798c60ce87b11b000da6ddf023 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 16:06:04 +0100
Subject: [PATCH 24/26] Added multi invite functionality

---
 src/Invite.js                                 |  2 +-
 .../views/dialogs/ChatInviteDialog.js         | 74 ++++++++++++-------
 2 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/Invite.js b/src/Invite.js
index 59e1dc41ea4..678a838bf10 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -56,7 +56,7 @@ export function inviteToRoom(roomId, addr) {
  */
 export function inviteMultipleToRoom(roomId, addrs) {
     this.inviter = new MultiInviter(roomId);
-    return inviter.invite(addrs);
+    return this.inviter.invite(addrs);
 }
 
 export function isValidAddress(addr) {
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 38f45a93705..6169107b1c8 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -71,30 +71,28 @@ module.exports = React.createClass({
     },
 
     onButtonClick: function() {
-        var addr;
-
-        // Either an address tile was created, or text input is being used
-        if (this.state.inviteList[0]) {
-            addr = this.state.inviteList[0];
-        }
-
-        if (this.state.inviteList.length === 1 && Invite.getAddressType(addr) === "mx" && !this.props.roomId) {
-            // Direct Message chat
-            var room = this._getDirectMessageRoom(addr);
-            if (room) {
-                // A Direct Message room already exists for this user and you
-                // so go straight to that room
-                dis.dispatch({
-                    action: 'view_room',
-                    room_id: room.roomId,
-                });
-                this.props.onFinished(true, addr);
+        if (this.state.inviteList.length > 0) {
+            if (this._isDmChat()) {
+                // Direct Message chat
+                var room = this._getDirectMessageRoom(this.state.inviteList[0]);
+                if (room) {
+                    // A Direct Message room already exists for this user and you
+                    // so go straight to that room
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: room.roomId,
+                    });
+                    this.props.onFinished(true, this.state.inviteList[0]);
+                } else {
+                    this._startChat(this.state.inviteList);
+                }
             } else {
-                this._startChat(addr);
+                // Multi invite chat
+                this._startChat(this.state.inviteList);
             }
         } else {
-            // Multi invite chat
-            this._startChat(addr);
+            // No addresses supplied
+            this.setState({ error: true });
         }
     },
 
@@ -198,9 +196,22 @@ module.exports = React.createClass({
         return null;
     },
 
-    _startChat: function(addr) {
+    _startChat: function(addrs) {
         if (this.props.roomId) {
-            Invite.inviteToRoom(this.props.roomId, addr)
+            // Invite new user to a room
+            Invite.inviteMultipleToRoom(this.props.roomId, addrs)
+            .catch(function(err) {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failure to invite user",
+                    description: err.toString()
+                });
+                return null;
+            })
+            .done();
+        } else if (this._isDmChat()) {
+            // Start the DM chat
+            createRoom({dmUserId: addrs[0]})
             .catch(function(err) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
@@ -211,8 +222,11 @@ module.exports = React.createClass({
             })
             .done();
         } else {
-            // Start the chat
-            createRoom({dmUserId: addr})
+            // Start multi user chat
+            var self = this;
+            createRoom().then(function(roomId) {
+                return Invite.inviteMultipleToRoom(self.props.roomId, addrs);
+            })
             .catch(function(err) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
@@ -225,7 +239,7 @@ module.exports = React.createClass({
         }
 
         // Close - this will happen before the above, as that is async
-        this.props.onFinished(true, addr);
+        this.props.onFinished(true, addrs);
     },
 
     _updateUserList: new rate_limited_func(function() {
@@ -273,6 +287,14 @@ module.exports = React.createClass({
         return false;
     },
 
+    _isDmChat: function() {
+        if (this.state.inviteList.length === 1 && Invite.getAddressType(this.state.inviteList[0]) === "mx" && !this.props.roomId) {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var AddressSelector = sdk.getComponent("elements.AddressSelector");

From 890100a5bcb0b04dedafef8bdd29b39e769ba9c6 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 16:28:35 +0100
Subject: [PATCH 25/26] Silly mistake fixed, spotted by Dave (cheers)

---
 src/components/views/dialogs/ChatInviteDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 6169107b1c8..a2471092d0e 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -225,7 +225,7 @@ module.exports = React.createClass({
             // Start multi user chat
             var self = this;
             createRoom().then(function(roomId) {
-                return Invite.inviteMultipleToRoom(self.props.roomId, addrs);
+                return Invite.inviteMultipleToRoom(roomId, addrs);
             })
             .catch(function(err) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");

From 7fa102998c88ce85af759375e002982cdba9bcba Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 13 Sep 2016 17:09:40 +0100
Subject: [PATCH 26/26] Added valid but unknown mx user

---
 src/Invite.js                                    |  8 +++++++-
 src/components/views/dialogs/ChatInviteDialog.js |  3 ++-
 src/components/views/elements/AddressTile.js     | 15 ++++++++++++---
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Invite.js b/src/Invite.js
index 678a838bf10..64228127347 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -59,6 +59,12 @@ export function inviteMultipleToRoom(roomId, addrs) {
     return this.inviter.invite(addrs);
 }
 
+/**
+ * Checks is the supplied address is valid
+ *
+ * @param {addr} The mx userId or email address to check
+ * @returns true, false, or null for unsure
+ */
 export function isValidAddress(addr) {
     // Check if the addr is a valid type
     var addrType = this.getAddressType(addr);
@@ -67,7 +73,7 @@ export function isValidAddress(addr) {
         if (user) {
             return true;
         } else {
-            return false;
+            return null;
         }
     } else if (addrType === "email") {
         return true;
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index a2471092d0e..7f04986b6b4 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -120,7 +120,8 @@ module.exports = React.createClass({
         } else if (e.keyCode === 32 || e.keyCode === 188) { // space or comma
             e.stopPropagation();
             e.preventDefault();
-            if (Invite.isValidAddress(this.refs.textinput.value)) {
+            var check = Invite.isValidAddress(this.refs.textinput.value);
+            if (check === true || check === null) {
                 var inviteList = this.state.inviteList.slice();
                 inviteList.push(this.refs.textinput.value);
                 this.setState({
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index a6b86c12b28..f81bb3dff08 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -59,8 +59,8 @@ module.exports = React.createClass({
                 name = user.displayName || userId;
                 imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
             } else {
-                name="Unknown";
-                imgUrl = "img/avatar-error.svg";
+                name=this.props.address;
+                imgUrl = "img/icon-mx-user.svg";
             }
         } else if (addrType === "email") {
             email = this.props.address;
@@ -82,7 +82,7 @@ module.exports = React.createClass({
 
         var info;
         var error = false;
-        if (userId) {
+        if (addrType === "mx" && userId) {
             var nameClasses = classNames({
                 "mx_AddressTile_name": true,
                 "mx_AddressTile_justified": this.props.justified,
@@ -99,6 +99,15 @@ module.exports = React.createClass({
                     <div className={idClasses}>{ userId }</div>
                 </div>
             );
+        } else if (addrType === "mx") {
+            var unknownMxClasses = classNames({
+                "mx_AddressTile_unknownMx": true,
+                "mx_AddressTile_justified": this.props.justified,
+            });
+
+            info = (
+                <div className={unknownMxClasses}>{ this.props.address }</div>
+            );
         } else if (email)  {
             var emailClasses = classNames({
                 "mx_AddressTile_email": true,