Add comma to join paramenter, key for breakout item and fix class typo

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

@@ -5,7 +5,6 @@ import Button from '/imports/ui/components/button/component';
 import { Session } from 'meteor/session';
 import logger from '/imports/startup/client/logger';
 import { styles } from './styles';
-import UserListService from '/imports/ui/components/user-list/service';
 import BreakoutRoomContainer from './breakout-remaining-time/container';
 
 const intlMessages = defineMessages({
@@ -64,6 +63,23 @@ class BreakoutRoom extends PureComponent {
     return 0;
   }
 
+  static sortUsersByName(a, b) {
+    const aName = a.name.toLowerCase();
+    const bName = b.name.toLowerCase();
+
+    if (aName < bName) {
+      return -1;
+    } if (aName > bName) {
+      return 1;
+    } if (a.userId > b.userId) {
+      return -1;
+    } if (a.userId < b.userId) {
+      return 1;
+    }
+
+    return 0;
+  }
+
   constructor(props) {
     super(props);
     this.renderBreakoutRooms = this.renderBreakoutRooms.bind(this);
@@ -224,7 +240,10 @@ class BreakoutRoom extends PureComponent {
     } = this.state;
 
     const roomItems = breakoutRooms.map(breakout => (
-      <div className={styles.breakoutItems}>
+      <div
+        className={styles.breakoutItems}
+        key={`breakoutRoomItems-${breakout.breakoutId}`}
+      >
         <div className={styles.content} key={`breakoutRoomList-${breakout.breakoutId}`}>
           <span aria-hidden>
             {intl.formatMessage(intlMessages.breakoutRoom, breakout.sequence.toString())}
@@ -245,16 +264,16 @@ class BreakoutRoom extends PureComponent {
           {breakout.joinedUsers
             .sort(BreakoutRoom.sortById)
             .filter((value, idx, arr) => !(value.userId === (arr[idx + 1] || {}).userId))
-            .sort(UserListService.sortUsersByName)
+            .sort(BreakoutRoom.sortUsersByName)
             .map(u => u.name)
-            .join(',')}
+            .join(', ')}
         </div>
       </div>
     ));
 
     return (
       <div className={styles.breakoutColumn}>
-        <div className={styles.breakoutscrollableList}>
+        <div className={styles.breakoutScrollableList}>
           {roomItems}
         </div>
       </div>

bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss

@@ -161,7 +161,7 @@
   @extend .userListColumn;
 }
 
-.breakoutscrollableList {
+.breakoutScrollableList {
   @extend .scrollableList;
   background: none;
 }