Fixes inviting more than one participant (#4352)

* Fixes inviting more than one participant.

* Shows a notification when participants are invited.

* Adds support for both .id and .user_id props for people query results.

lang/main.json

@@ -472,6 +472,9 @@
         "focus": "Conference focus",
         "focusFail": "__component__ not available - retry in __ms__ sec",
         "grantedTo": "Moderator rights granted to __to__!",
+        "invitedOneMember": "__name__ has been invited",
+        "invitedThreePlusMembers": "__name__ and __count__ others have been invited",
+        "invitedTwoMembers": "__first__ and __second__ have been invited",
         "kickParticipant": "__kicked__ was kicked by __kicker__",
         "me": "Me",
         "moderator": "Moderator rights granted!",

react/features/invite/components/add-people-dialog/AbstractAddPeopleDialog.js

@@ -11,6 +11,10 @@ import {
     isAddPeopleEnabled,
     isDialOutEnabled
 } from '../../functions';
+import {
+    NOTIFICATION_TIMEOUT,
+    showNotification
+} from '../../../notifications';
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
@@ -21,6 +25,11 @@ export type Props = {
      */
     _addPeopleEnabled: boolean,
 
+    /**
+     * Whether or not call flows are enabled.
+     */
+    _callFlowsEnabled: boolean,
+
     /**
      * The URL for validating if a phone number can be called.
      */
@@ -115,7 +124,7 @@ export default class AbstractAddPeopleDialog<P: Props, S: State>
             addToCallInProgress: true
         });
 
-        const { dispatch } = this.props;
+        const { _callFlowsEnabled, dispatch } = this.props;
 
         return dispatch(invite(invitees))
             .then(invitesLeftToSend => {
@@ -140,6 +149,39 @@ export default class AbstractAddPeopleDialog<P: Props, S: State>
                     this.setState({
                         addToCallError: true
                     });
+                } else if (!_callFlowsEnabled) {
+                    const invitedCount = invitees.length;
+                    let notificationProps;
+
+                    if (invitedCount >= 3) {
+                        notificationProps = {
+                            titleArguments: {
+                                name: invitees[0].name,
+                                count: invitedCount - 1
+                            },
+                            titleKey: 'notify.invitedThreePlusMembers'
+                        };
+                    } else if (invitedCount === 2) {
+                        notificationProps = {
+                            titleArguments: {
+                                first: invitees[0].name,
+                                second: invitees[1].name
+                            },
+                            titleKey: 'notify.invitedTwoMembers'
+                        };
+                    } else if (invitedCount) {
+                        notificationProps = {
+                            titleArguments: {
+                                name: invitees[0].name
+                            },
+                            titleKey: 'notify.invitedOneMember'
+                        };
+                    }
+
+                    if (notificationProps) {
+                        dispatch(
+                            showNotification(notificationProps, NOTIFICATION_TIMEOUT));
+                    }
                 }
 
                 return invitesLeftToSend;
@@ -206,6 +248,7 @@ export default class AbstractAddPeopleDialog<P: Props, S: State>
  */
 export function _mapStateToProps(state: Object) {
     const {
+        callFlowsEnabled,
         dialOutAuthUrl,
         peopleSearchQueryTypes,
         peopleSearchUrl
@@ -213,6 +256,7 @@ export function _mapStateToProps(state: Object) {
 
     return {
         _addPeopleEnabled: isAddPeopleEnabled(state),
+        _callFlowsEnabled: callFlowsEnabled,
         _dialOutAuthUrl: dialOutAuthUrl,
         _dialOutEnabled: isDialOutEnabled(state),
         _jwt: state['features/base/jwt'].jwt,

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

@@ -212,7 +212,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
      * @returns {string}
      */
     _keyExtractor(item) {
-        return item.type === 'user' ? item.user_id : item.number;
+        return item.type === 'user' ? item.id || item.user_id : item.number;
     }
 
     _onCloseAddPeopleDialog: () => void
@@ -315,8 +315,9 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                         && !inviteItems.find(
                             _.matchesProperty('number', result.number));
                 case 'user':
-                    return result.user_id && !inviteItems.find(
-                        _.matchesProperty('user_id', result.user_id));
+                    return !inviteItems.find(
+                        (result.user_id && _.matchesProperty('id', result.id))
+                        || (result.user_id && _.matchesProperty('user_id', result.user_id)));
                 default:
                     return false;
                 }
@@ -367,10 +368,12 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
             break;
         case 'user':
             selected
-                = inviteItems.find(_.matchesProperty('user_id', item.user_id));
+                = item.id
+                    ? inviteItems.find(_.matchesProperty('id', item.id))
+                    : inviteItems.find(_.matchesProperty('user_id', item.user_id));
             renderableItem = {
                 avatar: item.avatar,
-                key: item.user_id,
+                key: item.id || item.user_id,
                 title: item.name
             };
             break;

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js

@@ -254,10 +254,10 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                 if (invitesLeftToSend.length) {
                     const unsentInviteIDs
                         = invitesLeftToSend.map(invitee =>
-                            invitee.id || invitee.number);
+                            invitee.id || invitee.user_id || invitee.number);
                     const itemsToSelect
                         = inviteItems.filter(({ item }) =>
-                            unsentInviteIDs.includes(item.id || item.number));
+                            unsentInviteIDs.includes(item.id || item.user_id || item.number));
 
                     if (this._multiselect) {
                         this._multiselect.setSelectedItems(itemsToSelect);
@@ -296,7 +296,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                         size = 'xsmall'
                         src = { user.avatar } />
                 },
-                value: user.id
+                value: user.id || user.user_id
             };
         });