Don't show addresses that have already been picked

src/GroupAddressPicker.js

@@ -32,13 +32,18 @@ export function showGroupInviteDialog(groupId) {
         </div>
     </div>;
 
+    const groupStore = GroupStoreCache.getGroupStore(groupId);
     const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
     Modal.createTrackedDialog('Group Invite', '', AddressPickerDialog, {
         title: _t("Invite new community members"),
         description: description,
         placeholder: _t("Name or matrix ID"),
         button: _t("Invite to Community"),
         validAddressTypes: ['mx-user-id'],
+        excludedAddresses: groupStore.getGroupMembers().concat(groupStore.getGroupInvitedMembers()).map((member) => ({
+            addressType: 'mx-user-id',
+            address: member.userId,
+        })), // no need to add the user as they must already be in the group
         onFinished: (success, addrs) => {
             if (!success) return;
 
@@ -64,6 +69,7 @@ export function showGroupAddRoomDialog(groupId) {
             </div>
         </label>;
 
+        const groupStore = GroupStoreCache.getGroupStore(groupId);
         const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
         Modal.createTrackedDialog('Add Rooms to Group', '', AddressPickerDialog, {
             title: _t("Add rooms to the community"),
@@ -73,6 +79,10 @@ export function showGroupAddRoomDialog(groupId) {
             button: _t("Add to community"),
             pickerType: 'room',
             validAddressTypes: ['mx-room-id'],
+            excludedAddresses: groupStore.getGroupRooms().map((room) => ({
+                addressType: 'mx-room-id',
+                address: room.roomId,
+            })),
             onFinished: (success, addrs) => {
                 if (!success) return;
 

src/RoomInvite.js

@@ -59,14 +59,28 @@ export function showStartChatInviteDialog() {
         placeholder: _t("Email, name or matrix ID"),
         button: _t("Start Chat"),
         onFinished: _onStartChatFinished,
+        excludedAddresses: {
+            addressType: 'mx-user-id',
+            address: MatrixClientPeg.get().getUserId(),
+        },
     });
 }
 
 export function showRoomInviteDialog(roomId) {
+    const room = MatrixClientPeg.get().getRoom(roomId);
+
     const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
     Modal.createTrackedDialog('Chat Invite', '', AddressPickerDialog, {
         title: _t('Invite new room members'),
         description: _t('Who would you like to add to this room?'),
+        excludedAddresses: room.currentState.getMembers().filter((member) => {
+            const membership = member.membership;
+            // Filter to users which are in the room, have already been invited or have been banned.
+            return membership === 'join' || membership === 'invite' || membership === 'ban';
+        }).map((member) => ({
+            addressType: 'mx-user-id',
+            address: member.userId,
+        })), // no need to add the user as they must already be in the room
         button: _t('Send Invites'),
         placeholder: _t("Email, name or matrix ID"),
         onFinished: (shouldInvite, addrs) => {

src/components/structures/GroupView.js

@@ -87,6 +87,10 @@ const CategoryRoomList = React.createClass({
             button: _t("Add to summary"),
             pickerType: 'room',
             validAddressTypes: ['mx-room-id'],
+            excludedAddresses: this.props.rooms.map((room) => ({
+                addressType: 'mx-room-id',
+                address: room.room_id,
+            })),
             groupId: this.props.groupId,
             onFinished: (success, addrs) => {
                 if (!success) return;
@@ -262,6 +266,13 @@ const RoleUserList = React.createClass({
             placeholder: _t("Name or matrix ID"),
             button: _t("Add to summary"),
             validAddressTypes: ['mx-user-id'],
+            excludedAddresses: this.props.users.map((user) => ({
+                addressType: 'mx-user-id',
+                address: user.summaryInfo.user_id,
+            })).concat({
+                addressType: 'mx-user-id',
+                address: MatrixClientPeg.get().getUserId(),
+            }),
             groupId: this.props.groupId,
             shouldOmitSelf: false,
             onFinished: (success, addrs) => {

src/components/views/dialogs/AddressPickerDialog.js

@@ -42,13 +42,14 @@ module.exports = React.createClass({
         button: PropTypes.string,
         focus: PropTypes.bool,
         validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)),
+        excludedAddresses: PropTypes.arrayOf(PropTypes.shape({
+            addressType: PropTypes.oneOf(addressTypes),
+            address: PropTypes.string.isRequired,
+        })),
         onFinished: PropTypes.func.isRequired,
         groupId: PropTypes.string,
         // The type of entity to search for. Default: 'user'.
         pickerType: PropTypes.oneOf(['user', 'room']),
-        // Whether the current user should be included in the addresses returned. Only
-        // applicable when pickerType is `user`. Default: false.
-        includeSelf: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -57,7 +58,6 @@ module.exports = React.createClass({
             focus: true,
             validAddressTypes: addressTypes,
             pickerType: 'user',
-            includeSelf: false,
         };
     },
 
@@ -130,7 +130,7 @@ module.exports = React.createClass({
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.refs.textinput.value == '') {
+            if (this.refs.textinput.value === '') {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
@@ -149,7 +149,7 @@ module.exports = React.createClass({
             clearTimeout(this.queryChangedDebouncer);
         }
         // Only do search if there is something to search
-        if (query.length > 0 && query != '@' && query.length >= 2) {
+        if (query.length > 0 && query !== '@' && query.length >= 2) {
             this.queryChangedDebouncer = setTimeout(() => {
                 if (this.props.pickerType === 'user') {
                     if (this.props.groupId) {
@@ -383,31 +383,33 @@ module.exports = React.createClass({
     _processResults: function(results, query) {
         const queryList = [];
         results.forEach((result) => {
+            let newEntry;
+
             if (result.room_id) {
-                queryList.push({
+                newEntry = {
                     addressType: 'mx-room-id',
                     address: result.room_id,
                     displayName: result.name,
                     avatarMxc: result.avatar_url,
                     isKnown: true,
-                });
-                return;
-            }
-            if (!this.props.includeSelf &&
-                result.user_id === MatrixClientPeg.get().credentials.userId
-            ) {
-                return;
+                };
+            } else {
+                // Return objects, structure of which is defined
+                // by UserAddressType
+                newEntry = {
+                    addressType: 'mx-user-id',
+                    address: result.user_id,
+                    displayName: result.display_name,
+                    avatarMxc: result.avatar_url,
+                    isKnown: true,
+                };
             }
 
-            // Return objects, structure of which is defined
-            // by UserAddressType
-            queryList.push({
-                addressType: 'mx-user-id',
-                address: result.user_id,
-                displayName: result.display_name,
-                avatarMxc: result.avatar_url,
-                isKnown: true,
-            });
+            // Don't add it if it is in the excludedAddresses
+            if (this.props.excludedAddresses.find((entry) => {
+                return entry.address === newEntry.address && entry.addressType === newEntry.addressType;
+            })) return;
+            queryList.push(newEntry);
         });
 
         // If the query is a valid address, add an entry for that
@@ -421,7 +423,7 @@ module.exports = React.createClass({
                 isKnown: false,
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-            if (addrType == 'email') {
+            if (addrType === 'email') {
                 this._lookupThreepid(addrType, query).done();
             }
         }
@@ -444,14 +446,14 @@ module.exports = React.createClass({
         if (!this.props.validAddressTypes.includes(addrType)) {
             this.setState({ error: true });
             return null;
-        } else if (addrType == 'mx-user-id') {
+        } else if (addrType === 'mx-user-id') {
             const user = MatrixClientPeg.get().getUser(addrObj.address);
             if (user) {
                 addrObj.displayName = user.displayName;
                 addrObj.avatarMxc = user.avatarUrl;
                 addrObj.isKnown = true;
             }
-        } else if (addrType == 'mx-room-id') {
+        } else if (addrType === 'mx-room-id') {
             const room = MatrixClientPeg.get().getRoom(addrObj.address);
             if (room) {
                 addrObj.displayName = room.name;
@@ -511,6 +513,12 @@ module.exports = React.createClass({
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
+        const queryList = this.state.queryList.filter((query) => {
+            return !this.state.userList.find((entry) => {
+                return entry.address === query.address && entry.addressType === query.addressType;
+            });
+        });
+
         const query = [];
         // create the invite list
         if (this.state.userList.length > 0) {
@@ -544,15 +552,14 @@ module.exports = React.createClass({
         let error;
         let addressSelector;
         if (this.state.error) {
-            let tryUsing = '';
             const validTypeDescriptions = this.props.validAddressTypes.map((t) => {
                 return {
                     'mx-user-id': _t("Matrix ID"),
                     'mx-room-id': _t("Matrix Room ID"),
                     'email': _t("email address"),
                 }[t];
             });
-            tryUsing = _t("Try using one of the following valid address types: %(validTypesList)s.", {
+            const tryUsing = _t("Try using one of the following valid address types: %(validTypesList)s.", {
                 validTypesList: validTypeDescriptions.join(", "),
             });
             error = <div className="mx_ChatInviteDialog_error">
@@ -562,16 +569,12 @@ module.exports = React.createClass({
             </div>;
         } else if (this.state.searchError) {
             error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
-        } else if (
-            this.state.query.length > 0 &&
-            this.state.queryList.length === 0 &&
-            !this.state.busy
-        ) {
+        } else if (this.state.query.length > 0 && queryList.length === 0 && !this.state.busy) {
             error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
-                    addressList={this.state.queryList}
+                    addressList={queryList}
                     showAddress={this.props.pickerType === 'user'}
                     onSelected={this.onSelected}
                     truncateAt={TRUNCATE_QUERY_LIST}