Merge pull request #7326 from Tainan404/issue-7292

Fix create breakout room missing some users.

bigbluebutton-html5/imports/api/breakouts/server/eventHandlers.js

@@ -3,9 +3,11 @@ import handleBreakoutJoinURL from './handlers/breakoutJoinURL';
 import handleBreakoutStarted from './handlers/breakoutStarted';
 import handleUpdateTimeRemaining from './handlers/updateTimeRemaining';
 import handleBreakoutClosed from './handlers/breakoutClosed';
+import joinedUsersChanged from './handlers/joinedUsersChanged';
 
 RedisPubSub.on('BreakoutRoomStartedEvtMsg', handleBreakoutStarted);
 RedisPubSub.on('BreakoutRoomJoinURLEvtMsg', handleBreakoutJoinURL);
 RedisPubSub.on('RequestBreakoutJoinURLRespMsg', handleBreakoutJoinURL);
 RedisPubSub.on('BreakoutRoomsTimeRemainingUpdateEvtMsg', handleUpdateTimeRemaining);
 RedisPubSub.on('BreakoutRoomEndedEvtMsg', handleBreakoutClosed);
+RedisPubSub.on('UpdateBreakoutUsersEvtMsg', joinedUsersChanged);

bigbluebutton-html5/imports/api/breakouts/server/handlers/breakoutStarted.js

@@ -22,7 +22,10 @@ export default function handleBreakoutRoomStarted({ body }, meetingId) {
 
   const modifier = {
     $set: Object.assign(
-      { users: [] },
+      {
+        users: [],
+        joinedUsers: [],
+      },
       { timeRemaining: DEFAULT_TIME_REMAINING },
       { parentMeetingId },
       flat(breakout),
@@ -34,8 +37,8 @@ export default function handleBreakoutRoomStarted({ body }, meetingId) {
       return Logger.error(`updating breakout: ${err}`);
     }
 
-    return Logger.info('Updated timeRemaining and externalMeetingId ' +
-      `for breakout id=${breakoutId}`);
+    return Logger.info('Updated timeRemaining and externalMeetingId '
+      + `for breakout id=${breakoutId}`);
   };
 
   return Breakouts.upsert(selector, modifier, cb);

bigbluebutton-html5/imports/api/breakouts/server/handlers/joinedUsersChanged.js

+import Breakouts from '/imports/api/breakouts';
+import Logger from '/imports/startup/server/logger';
+import { check } from 'meteor/check';
+
+export default function joinedUsersChanged({ body }) {
+  check(body, Object);
+
+  const {
+    parentId,
+    breakoutId,
+    users,
+  } = body;
+
+  check(parentId, String);
+  check(breakoutId, String);
+  check(users, Array);
+
+  const selector = {
+    parentMeetingId: parentId,
+    breakoutId,
+  };
+
+  const usersMapped = users.map(user => ({ userId: user.id, name: user.name }));
+  const modifier = {
+    $set: {
+      joinedUsers: usersMapped,
+    },
+  };
+
+
+  const cb = (err) => {
+    if (err) {
+      return Logger.error(`updating joined users in breakout: ${err}`);
+    }
+
+    return Logger.info('Updated joined users '
+      + `in breakout id=${breakoutId}`);
+  };
+  Breakouts.find(selector);
+  Breakouts.update(selector, modifier, cb);
+}

bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx

@@ -137,6 +137,7 @@ class BreakoutRoom extends Component {
     this.handleDismiss = this.handleDismiss.bind(this);
     this.setInvitationConfig = this.setInvitationConfig.bind(this);
     this.blurDurationTime = this.blurDurationTime.bind(this);
+    this.removeRoomUsers = this.removeRoomUsers.bind(this);
 
     this.state = {
       numberOfRooms: MIN_BREAKOUT_ROOMS,
@@ -165,9 +166,20 @@ class BreakoutRoom extends Component {
 
   componentDidUpdate(prevProps, prevstate) {
     const { numberOfRooms } = this.state;
+    const { users } = this.props;
+    const { users: prevUsers } = prevProps;
     if (numberOfRooms < prevstate.numberOfRooms) {
       this.resetUserWhenRoomsChange(numberOfRooms);
     }
+    const usersCount = users.length;
+    const prevUsersCount = prevUsers.length;
+    if (usersCount > prevUsersCount) {
+      this.setRoomUsers();
+    }
+
+    if (usersCount < prevUsersCount) {
+      this.removeRoomUsers();
+    }
   }
 
   onCreateBreakouts() {
@@ -229,6 +241,7 @@ class BreakoutRoom extends Component {
       ));
   }
 
+
   setInvitationConfig() {
     const { getBreakouts } = this.props;
     this.setState({
@@ -239,16 +252,22 @@ class BreakoutRoom extends Component {
 
   setRoomUsers() {
     const { users, getUsersNotAssigned } = this.props;
-
-    const roomUsers = getUsersNotAssigned(users).map(user => ({
-      userId: user.userId,
-      userName: user.name,
-      isModerator: user.moderator,
-      room: 0,
-    }));
+    const { users: stateUsers } = this.state;
+    const stateUsersId = stateUsers.map(user => user.userId);
+    const roomUsers = getUsersNotAssigned(users)
+      .filter(user => !stateUsersId.includes(user.userId))
+      .map(user => ({
+        userId: user.userId,
+        userName: user.name,
+        isModerator: user.moderator,
+        room: 0,
+      }));
 
     this.setState({
-      users: roomUsers,
+      users: [
+        ...stateUsers,
+        ...roomUsers,
+      ],
     });
   }
 
@@ -261,6 +280,17 @@ class BreakoutRoom extends Component {
     return users.filter(user => user.room === room);
   }
 
+  removeRoomUsers() {
+    const { users } = this.props;
+    const { users: stateUsers } = this.state;
+    const userIds = users.map(user => user.userId);
+    const removeUsers = stateUsers.filter(user => userIds.includes(user.userId));
+
+    this.setState({
+      users: removeUsers,
+    });
+  }
+
   handleDismiss() {
     const { mountModal } = this.props;
 

bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/container.jsx

+import React from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import Service from '/imports/ui/components/actions-bar/service';
+
+import CreateBreakoutRoomModal from './component';
+
+export default withTracker(() => ({
+  createBreakoutRoom: Service.createBreakoutRoom,
+  getBreakouts: Service.getBreakouts,
+  getUsersNotAssigned: Service.getUsersNotAssigned,
+  sendInvitation: Service.sendInvitation,
+  users: Service.users(),
+  meetingName: Service.meetingName(),
+}))(CreateBreakoutRoomModal);

bigbluebutton-html5/imports/ui/components/actions-bar/service.js

 import Auth from '/imports/ui/services/auth';
 import Users from '/imports/api/users';
-import fp from 'lodash/fp';
 import { makeCall } from '/imports/ui/services/api';
 import Meetings from '/imports/api/meetings';
 import Breakouts from '/imports/api/breakouts';
@@ -13,31 +12,13 @@ const getBreakouts = () => Breakouts.find({ parentMeetingId: Auth.meetingID })
   .fetch()
   .sort((a, b) => a.sequence - b.sequence);
 
-const getBreakoutUser = user => Users.find({
-  extId: new RegExp(`^${user.userId}`),
-  connectionStatus: 'online',
-}).fetch();
-
-const currentBreakoutUsers = userArray => userArray.length === 1;
+const currentBreakoutUsers = user => !Breakouts.findOne({
+  'joinedUsers.userId': new RegExp(`^${user.userId}`),
+});
 
 const filterBreakoutUsers = filter => users => users.filter(filter);
 
-const filterUsersNotAssigned = filterBreakoutUsers(currentBreakoutUsers);
-
-const mapUsersToNotAssined = mapFunction => users => users.map(mapFunction);
-
-const flatUsersArray = usersArray => usersArray.reduce((acc, users) => [...acc, ...users], []);
-
-/*
-  The concept of pipe is simple
-  it combines n functions. It’s a pipe flowing left-to-right,
-  calling each function with the output of the last one.
-*/
-const getUsersNotAssigned = fp.pipe(
-  mapUsersToNotAssined(getBreakoutUser),
-  filterUsersNotAssigned,
-  flatUsersArray,
-);
+const getUsersNotAssigned = filterBreakoutUsers(currentBreakoutUsers);
 
 const takePresenterRole = () => makeCall('assignPresenter', Auth.userID);
 

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx

@@ -10,7 +10,7 @@ import DropdownContent from '/imports/ui/components/dropdown/content/component';
 import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import LockViewersContainer from '/imports/ui/components/lock-viewers/container';
-import BreakoutRoom from '/imports/ui/components/actions-bar/create-breakout-room/component';
+import BreakoutRoom from '/imports/ui/components/actions-bar/create-breakout-room/container';
 import { styles } from './styles';
 
 const propTypes = {
@@ -23,8 +23,6 @@ const propTypes = {
   toggleStatus: PropTypes.func.isRequired,
   mountModal: PropTypes.func.isRequired,
   users: PropTypes.arrayOf(Object).isRequired,
-  meetingName: PropTypes.string.isRequired,
-  createBreakoutRoom: PropTypes.func.isRequired,
   meetingIsBreakout: PropTypes.bool.isRequired,
   hasBreakoutRoom: PropTypes.bool.isRequired,
 };
@@ -153,25 +151,13 @@ class UserOptions extends PureComponent {
 
   handleCreateBreakoutRoomClick(isInvitation) {
     const {
-      createBreakoutRoom,
       mountModal,
-      meetingName,
-      users,
-      getUsersNotAssigned,
-      getBreakouts,
-      sendInvitation,
     } = this.props;
 
     return mountModal(
       <BreakoutRoom
         {...{
-          createBreakoutRoom,
-          meetingName,
-          users,
-          getUsersNotAssigned,
           isInvitation,
-          getBreakouts,
-          sendInvitation,
         }}
       />,
     );

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx

@@ -32,14 +32,10 @@ const UserOptionsContainer = withTracker((props) => {
     isMeetingMuted: meeting.voiceProp.muteOnStart,
     isUserPresenter: Service.isUserPresenter(),
     isUserModerator: Service.isUserModerator(),
-    createBreakoutRoom: Service.createBreakoutRoom,
     meetingIsBreakout: Service.meetingIsBreakout(),
+    getUsersNotAssigned: Service.getUsersNotAssigned,
     hasBreakoutRoom: Service.hasBreakoutRoom(),
-    meetingName: Service.meetingName(),
     users: Service.users(),
-    getBreakouts: Service.getBreakouts,
-    sendInvitation: Service.sendInvitation,
-    getUsersNotAssigned: Service.getUsersNotAssigned,
     userListService,
   };
 })(UserOptions);