From b279dac9e92dd1b939809bb9294f89c93c4fdbbd Mon Sep 17 00:00:00 2001
From: Tainan Felipe <tainanfelipe214@gmail.com>
Date: Fri, 14 Dec 2018 10:33:58 -0200
Subject: [PATCH 1/5] Add mobile version to sort user on breakout rooms

---
 .../create-breakout-room/component.jsx        | 117 ++++++++++++++++-
 .../sort-user-list/component.jsx              | 103 +++++++++++++++
 .../create-breakout-room/styles.scss          | 121 ++++++++++++++++++
 .../components/modal/fullscreen/styles.scss   |   1 +
 bigbluebutton-html5/private/locales/en.json   |   4 +
 5 files changed, 341 insertions(+), 5 deletions(-)
 create mode 100644 bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index 9fdbac53d2..1abd9e197c 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -2,10 +2,13 @@ import React, { Component } from 'react';
 import Modal from '/imports/ui/components/modal/fullscreen/component';
 import { defineMessages, injectIntl } from 'react-intl';
 import _ from 'lodash';
+import cx from 'classnames';
+import browser from 'browser-detect';
+import Button from '/imports/ui/components/button/component';
 import HoldButton from '/imports/ui/components/presentation/presentation-toolbar/zoom-tool/holdButton/component';
+import SortList from './sort-user-list/component';
 import { styles } from './styles';
 import Icon from '../../icon/component';
-import cx from 'classnames';
 
 const intlMessages = defineMessages({
   breakoutRoomTitle: {
@@ -48,6 +51,22 @@ const intlMessages = defineMessages({
     id: 'app.createBreakoutRoom.notAssigned',
     description: 'Not assigned label',
   },
+  breakoutRoomLabel: {
+    id: 'app.createBreakoutRoom.breakoutRoomLabel',
+    description: 'breakout room label',
+  },
+  addParticipantLabel: {
+    id: 'app.createBreakoutRoom.addParticipantLabel',
+    description: 'add Participant label',
+  },
+  nextLabel: {
+    id: 'app.createBreakoutRoom.nextLabel',
+    description: 'Next label',
+  },
+  backLabel: {
+    id: 'app.audio.backLabel',
+    description: 'Back label',
+  },
 });
 const MIN_BREAKOUT_ROOMS = 2;
 const MAX_BREAKOUT_ROOMS = 8;
@@ -68,6 +87,11 @@ class BreakoutRoom extends Component {
     this.renderRoomsGrid = this.renderRoomsGrid.bind(this);
     this.renderBreakoutForm = this.renderBreakoutForm.bind(this);
     this.renderFreeJoinCheck = this.renderFreeJoinCheck.bind(this);
+    this.renderRoomSortList = this.renderRoomSortList.bind(this);
+    this.renderDesktop = this.renderDesktop.bind(this);
+    this.renderMobile = this.renderMobile.bind(this);
+    this.renderButtonSetLevel = this.renderButtonSetLevel.bind(this);
+    this.renderSelectUserScreen = this.renderSelectUserScreen.bind(this);
 
     this.state = {
       numberOfRooms: MIN_BREAKOUT_ROOMS,
@@ -75,6 +99,8 @@ class BreakoutRoom extends Component {
       users: [],
       durationTime: 1,
       freeJoin: false,
+      formFillLevel: 1,
+      roomSelected: 0,
     };
   }
 
@@ -263,6 +289,18 @@ class BreakoutRoom extends Component {
     );
   }
 
+  renderSelectUserScreen() {
+    return (
+      <SortList
+        confirm={() => this.setState({ formFillLevel: 2 })}
+        users={this.state.users}
+        room={this.state.roomSelected}
+        onCheck={this.changeUserRoom}
+        onUncheck={userId => this.changeUserRoom(userId, 0)}
+      />
+    );
+  }
+
   renderFreeJoinCheck() {
     const { intl } = this.props;
     return (
@@ -284,7 +322,8 @@ class BreakoutRoom extends Component {
       this.setState({ seletedId: ev.target.id });
     };
 
-    const dragEnd = (ev) => {
+
+    const dragEnd = () => {
       this.setState({ seletedId: '' });
     };
 
@@ -305,9 +344,78 @@ class BreakoutRoom extends Component {
         </p>));
   }
 
+  renderRoomSortList() {
+    const { intl } = this.props;
+    const { numberOfRooms } = this.state;
+    const onClick = roomNumber => this.setState({ formFillLevel: 3, roomSelected: roomNumber });
+    return (
+      <div className={styles.listContainer}>
+        <span>
+          {
+            new Array(numberOfRooms).fill(1).map((room, idx) => (
+              <div className={styles.roomItem}>
+                <h2 className={styles.itemTitle}>
+                  {intl.formatMessage(intlMessages.breakoutRoomLabel, { 0: idx + 1 })}
+                </h2>
+                <Button
+                  className={styles.itemButton}
+                  label={intl.formatMessage(intlMessages.addParticipantLabel)}
+                  size="lg"
+                  ghost
+                  color="primary"
+                  onClick={() => onClick(idx + 1)}
+                />
+              </div>
+            ))
+          }
+        </span>
+        {this.renderButtonSetLevel(1, intl.formatMessage(intlMessages.backLabel))}
+      </div>
+    );
+  }
+
+  renderDesktop() {
+    return [
+      this.renderBreakoutForm(),
+      this.renderRoomsGrid(),
+    ];
+  }
+
+  renderMobile() {
+    const { intl } = this.props;
+    const { formFillLevel } = this.state;
+    if (formFillLevel === 2) {
+      return this.renderRoomSortList();
+    }
+
+    if (formFillLevel === 3) {
+      return this.renderSelectUserScreen();
+    }
+
+    return [
+      this.renderBreakoutForm(),
+      this.renderButtonSetLevel(2, intl.formatMessage(intlMessages.nextLabel)),
+    ];
+  }
+
+  renderButtonSetLevel(level, label) {
+    return (
+      <Button
+        color="primary"
+        size="lg"
+        label={label}
+        onClick={() => this.setState({ formFillLevel: level })}
+      />
+    );
+  }
+
   render() {
     const { intl } = this.props;
 
+    const BROWSER_RESULTS = browser();
+    const isMobileBrowser = BROWSER_RESULTS.mobile ||
+      BROWSER_RESULTS.os.includes('Android');
+
     return (
       <Modal
         title={intl.formatMessage(intlMessages.breakoutRoomTitle)}
@@ -322,9 +430,8 @@ class BreakoutRoom extends Component {
           <p className={styles.subTitle}>
             {intl.formatMessage(intlMessages.breakoutRoomDesc)}
           </p>
-          {this.renderBreakoutForm()}
-          {this.renderFreeJoinCheck()}
-          {this.renderRoomsGrid()}
+          {isMobileBrowser ?
+            this.renderMobile() : this.renderDesktop()}
         </div>
       </Modal >
     );
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx
new file mode 100644
index 0000000000..980ca2a3a4
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import Button from '/imports/ui/components/button/component';
+import { styles } from '../styles';
+
+const propTypes = {
+  confirm: PropTypes.func.isRequired,
+  users: PropTypes.arrayOf(PropTypes.object).isRequired,
+  room: PropTypes.number.isRequired,
+  onCheck: PropTypes.func,
+  onUncheck: PropTypes.func,
+};
+
+const defaultProps = {
+  onCheck: () => {},
+  onUncheck: () => {},
+};
+
+const intlMessages = defineMessages({
+  breakoutRoomLabel: {
+    id: 'app.createBreakoutRoom.breakoutRoomLabel',
+    description: 'breakout room label',
+  },
+  doneLabel: {
+    id: 'app.createBreakoutRoom.doneLabel',
+    description: 'done label',
+  },
+});
+
+class SortUsers extends Component {
+  constructor(props) {
+    super(props);
+
+    this.setUsers = this.setUsers.bind(this);
+    this.renderUserItem = this.renderUserItem.bind(this);
+    this.onChage = this.onChage.bind(this);
+
+    this.state = {
+      users: [],
+    };
+  }
+
+  componentDidMount() {
+    this.setUsers(this.props.users);
+  }
+
+  onChage(userId, room) {
+    return (ev) => {
+      const check = ev.target.checked;
+
+      if (check) {
+        return this.props.onCheck(userId, room);
+      }
+      return this.props.onUncheck(userId, room);
+    };
+  }
+
+  setUsers(users) {
+    this.setState({ users: users.sort((a, b) => a.room - b.room) });
+  }
+
+  renderUserItem() {
+    const { room } = this.props;
+    return this.state.users
+      .map((user, idx) => (
+        <div id={user.userId} className={styles.selectUserContainer} key={`breakout-user-${user.userId}`}>
+          <span className={styles.round}>
+            <input
+              type="checkbox"
+              id={`itemId${idx}`}
+              defaultChecked={user.room === room}
+              onChange={this.onChage(user.userId, room)}
+            />
+            <label htmlFor={`itemId${idx}`} />
+          </span>
+          <span className={styles.textName} >{user.userName}{user.room && !(user.room === room) ? `\t[${user.room}]` : ''}</span>
+        </div>));
+  }
+
+  render() {
+    const { intl } = this.props;
+    return (
+      <div className={styles.selectUserScreen}>
+        <header className={styles.header}>
+          <h2 className={styles.title}> {intl.formatMessage(intlMessages.breakoutRoomLabel, { 0: this.props.room })}</h2>
+          <Button
+            className={styles.buttonAdd}
+            size="md"
+            label={intl.formatMessage(intlMessages.doneLabel)}
+            color="primary"
+            onClick={this.props.confirm}
+          />
+        </header>
+        {this.renderUserItem()}
+      </div>
+    );
+  }
+}
+SortUsers.propTypes = propTypes;
+SortUsers.defaultProps = defaultProps;
+
+export default injectIntl(SortUsers);
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
index 6aec371465..da72c0b6bb 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
@@ -132,4 +132,125 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 .selectedItem {
   background-color: var(--color-primary);
   color: var(--color-white)
+}
+
+/* mobile */
+
+.listContainer {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+.itemTitle {
+  color: var(--color-blue-light);
+  margin: 0;
+}
+
+.roomItem {
+  margin: 1rem 0 1rem 0;
+
+}
+
+.itemButton {
+  padding: 0;
+  outline: none !important;
+  span {
+    color: var(--color-blue-light);
+  }
+}
+
+.selectUserScreenContainer {
+  position: fixed;
+  z-index: 1002;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, .85);
+}
+
+.selectUserScreen {
+  position: fixed;
+  display: block;
+  height: 100vh;
+  width: 100%;
+  background-color: var(--color-white);
+  z-index: 1002;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.header {
+  display: flex;
+  padding: var(--line-height-computed) 0;
+  border-bottom: var(--border-size) solid var(--color-gray-lighter);
+  margin: 0 1rem 0 1rem;
+}
+
+.title {
+  @extend %text-elipsis;
+  align-content: flex-end;
+  flex: 1;
+  margin: 0;
+  font-weight: 400;
+}
+
+.buttonAdd {
+  flex: 0 1 35%;
+}
+
+.selectUserContainer {
+  margin: 1.5rem 1rem;
+}
+
+.textName {
+  @extend %text-elipsis;
+  margin-left: 1.5rem;
+}
+
+.round {
+  position: relative;
+
+  & label {
+    margin-top: -10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 28px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 28px;
+  }
+
+  & label:after {
+    border: 2px solid #fff;
+    border-top: none;
+    border-right: none;
+    content: "";
+    height: 6px;
+    left: 7px;
+    opacity: 0;
+    position: absolute;
+    top: 8px;
+    transform: rotate(-45deg);
+    width: 12px;
+  }
+
+  & input[type="checkbox"] {
+    visibility: hidden;
+  }
+
+  & input[type="checkbox"]:checked + label {
+    background-color: #66bb6a;
+    border-color: #66bb6a;
+  }
+
+  & input[type="checkbox"]:checked + label:after {
+    opacity: 1;
+  }
 }
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
index f30735e9e4..7f093a220b 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
@@ -8,6 +8,7 @@
   outline: none;
   @include mq($small-only) {
     width: 100%;
+    height: 100%;
   }
 }
 
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 08d5708008..9e831b4184 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -436,6 +436,7 @@
     "app.videoDock.webcamUnfocusLabel": "Unfocus",
     "app.videoDock.webcamUnfocusDesc": "Unfocus the selected webcam",
     "app.createBreakoutRoom.title": "Breakout Rooms",
+    "app.createBreakoutRoom.breakoutRoomLabel": "Breakout Rooms {0}",
     "app.createBreakoutRoom.generatingURL": "Generating URL",
     "app.createBreakoutRoom.generatedURL": "Generated",
     "app.createBreakoutRoom.duration": "Duration {0}",
@@ -450,6 +451,9 @@
     "app.createBreakoutRoom.randomlyAssign": "Randomly Assign",
     "app.createBreakoutRoom.endAllBreakouts": "End All Breakout Rooms",
     "app.createBreakoutRoom.roomName": "{0} (Room - {1})",
+    "app.createBreakoutRoom.doneLabel": "Done",
+    "app.createBreakoutRoom.nextLabel": "Next",
+    "app.createBreakoutRoom.addParticipantLabel": "+ Add participant",
     "app.createBreakoutRoom.freeJoin": "Allow users to choose a breakout room to join",
     "app.createBreakoutRoom.modalDesc": "Complete the steps below to create rooms in your session, To add participants to a room."
 }

From 2bab07044b6baa17b075ec4c192cc1de2bc99dae Mon Sep 17 00:00:00 2001
From: Tainan Felipe <tainanfelipe214@gmail.com>
Date: Fri, 14 Dec 2018 17:02:55 -0200
Subject: [PATCH 2/5] Remove merge conflict

---
 .../actions-bar/create-breakout-room/component.jsx       | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index c46eb0dda1..3a3f6bfd7a 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -2,14 +2,11 @@ import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import _ from 'lodash';
 import cx from 'classnames';
-<<<<<<< HEAD
 import browser from 'browser-detect';
 import Button from '/imports/ui/components/button/component';
-=======
 import { Session } from 'meteor/session';
 import Modal from '/imports/ui/components/modal/fullscreen/component';
 import { withModalMounter } from '/imports/ui/components/modal/service';
->>>>>>> upstream/master
 import HoldButton from '/imports/ui/components/presentation/presentation-toolbar/zoom-tool/holdButton/component';
 import SortList from './sort-user-list/component';
 import { styles } from './styles';
@@ -100,15 +97,12 @@ class BreakoutRoom extends Component {
     this.renderRoomsGrid = this.renderRoomsGrid.bind(this);
     this.renderBreakoutForm = this.renderBreakoutForm.bind(this);
     this.renderFreeJoinCheck = this.renderFreeJoinCheck.bind(this);
-<<<<<<< HEAD
     this.renderRoomSortList = this.renderRoomSortList.bind(this);
     this.renderDesktop = this.renderDesktop.bind(this);
     this.renderMobile = this.renderMobile.bind(this);
     this.renderButtonSetLevel = this.renderButtonSetLevel.bind(this);
     this.renderSelectUserScreen = this.renderSelectUserScreen.bind(this);
-=======
     this.handleDismiss = this.handleDismiss.bind(this);
->>>>>>> upstream/master
 
     this.state = {
       numberOfRooms: MIN_BREAKOUT_ROOMS,
@@ -116,13 +110,10 @@ class BreakoutRoom extends Component {
       users: [],
       durationTime: 1,
       freeJoin: false,
-<<<<<<< HEAD
       formFillLevel: 1,
       roomSelected: 0,
-=======
       preventClosing: true,
       valid: true,
->>>>>>> upstream/master
     };
   }
 

From 1577f074b17d077602a4598013c462a991f8dfd9 Mon Sep 17 00:00:00 2001
From: Tainan Felipe <tainanfelipe214@gmail.com>
Date: Mon, 17 Dec 2018 08:33:41 -0200
Subject: [PATCH 3/5] Remove left over from merge

---
 .../components/actions-bar/create-breakout-room/styles.scss  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
index 328fb12ee8..4160d99bdb 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
@@ -154,7 +154,6 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
   color: var(--color-white)
 }
 
-<<<<<<< HEAD
 /* mobile */
 
 .listContainer {
@@ -274,8 +273,8 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
   & input[type="checkbox"]:checked + label:after {
     opacity: 1;
   }
-=======
+}
+
 .dontShow {
   display: none;
->>>>>>> upstream/master
 }
\ No newline at end of file

From ee7eb8f5826c8953f5a2c869a7f49afbb02bdb5e Mon Sep 17 00:00:00 2001
From: Tainan Felipe <tainanfelipe214@gmail.com>
Date: Mon, 17 Dec 2018 13:41:50 -0200
Subject: [PATCH 4/5] Add free join checkbox to render

---
 .../components/actions-bar/create-breakout-room/component.jsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index 3a3f6bfd7a..de8b9d9b36 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -416,6 +416,7 @@ class BreakoutRoom extends Component {
   renderDesktop() {
     return [
       this.renderBreakoutForm(),
+      this.renderFreeJoinCheck(),
       this.renderRoomsGrid(),
     ];
   }
@@ -433,6 +434,7 @@ class BreakoutRoom extends Component {
 
     return [
       this.renderBreakoutForm(),
+      this.renderFreeJoinCheck(),
       this.renderButtonSetLevel(2, intl.formatMessage(intlMessages.nextLabel)),
     ];
   }

From ce974d0740608c2e72613ece103f4ece45730d3c Mon Sep 17 00:00:00 2001
From: Tainan Felipe <tainanfelipe214@gmail.com>
Date: Wed, 19 Dec 2018 15:08:01 -0200
Subject: [PATCH 5/5] Fix linter errors

---
 .../create-breakout-room/component.jsx        | 101 +++++++++++-------
 .../sort-user-list/component.jsx              |  41 +++++--
 2 files changed, 93 insertions(+), 49 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index de8b9d9b36..327f22ed76 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -134,8 +134,12 @@ class BreakoutRoom extends Component {
       meetingName,
       intl,
     } = this.props;
+    const {
+      users,
+      freeJoin,
+    } = this.state;
 
-    if (this.state.users.length === this.getUserByRoom(0).length) {
+    if (users.length === this.getUserByRoom(0).length) {
       this.setState({ valid: false });
       return;
     }
@@ -147,11 +151,11 @@ class BreakoutRoom extends Component {
         0: meetingName,
         1: value,
       }),
-      freeJoin: this.state.freeJoin,
+      freeJoin,
       sequence: value,
     }));
 
-    createBreakoutRoom(rooms, durationTime, this.state.freeJoin);
+    createBreakoutRoom(rooms, durationTime, freeJoin);
     Session.set('isUserListOpen', true);
   }
 
@@ -173,7 +177,8 @@ class BreakoutRoom extends Component {
   }
 
   getUserByRoom(room) {
-    return this.state.users.filter(user => user.room === room);
+    const { users } = this.state;
+    return users.filter(user => user.room === room);
   }
 
   handleDismiss() {
@@ -202,11 +207,13 @@ class BreakoutRoom extends Component {
   }
 
   increaseDurationTime() {
-    this.setState({ durationTime: (1 * this.state.durationTime) + 1 });
+    const { durationTime } = this.state;
+    this.setState({ durationTime: (1 * durationTime) + 1 });
   }
 
   decreaseDurationTime() {
-    const number = ((1 * this.state.durationTime) - 1);
+    const { durationTime } = this.state;
+    const number = ((1 * durationTime) - 1);
     this.setState({ durationTime: number < 1 ? 1 : number });
   }
 
@@ -220,7 +227,10 @@ class BreakoutRoom extends Component {
 
   renderRoomsGrid() {
     const { intl } = this.props;
-
+    const {
+      valid,
+      numberOfRooms,
+    } = this.state;
     const allowDrop = (ev) => {
       ev.preventDefault();
     };
@@ -234,32 +244,33 @@ class BreakoutRoom extends Component {
 
     return (
       <div className={styles.boxContainer}>
-        <label htmlFor="BreakoutRoom" className={!this.state.valid ? styles.changeToWarn : null}>
+        <label htmlFor="BreakoutRoom" className={!valid ? styles.changeToWarn : null}>
           <p
             className={styles.freeJoinLabel}
           >
             {intl.formatMessage(intlMessages.notAssigned, { 0: this.getUserByRoom(0).length })}
           </p>
-          <div className={styles.breakoutBox} onDrop={drop(0)} onDragOver={allowDrop} >
+          <div className={styles.breakoutBox} onDrop={drop(0)} onDragOver={allowDrop}>
             {this.renderUserItemByRoom(0)}
           </div>
-          <span className={this.state.valid ? styles.dontShow : styles.leastOneWarn} >
+          <span className={valid ? styles.dontShow : styles.leastOneWarn}>
             {intl.formatMessage(intlMessages.leastOneWarnBreakout)}
           </span>
         </label>
         {
-          _.range(1, this.state.numberOfRooms + 1).map(value =>
-            (
-              <label htmlFor="BreakoutRoom" key={`room-${value}`}>
-                <p
-                  className={styles.freeJoinLabel}
-                >
-                  {intl.formatMessage(intlMessages.roomLabel, { 0: (value) })}
-                </p>
-                <div className={styles.breakoutBox} onDrop={drop(value)} onDragOver={allowDrop}>
-                  {this.renderUserItemByRoom(value)}
-                </div>
-              </label>))
+          _.range(1, numberOfRooms + 1).map(value => (
+            <label htmlFor="BreakoutRoom" key={`room-${value}`}>
+              <p
+                id="BreakoutRoom"
+                className={styles.freeJoinLabel}
+              >
+                {intl.formatMessage(intlMessages.roomLabel, { 0: (value) })}
+              </p>
+              <div className={styles.breakoutBox} onDrop={drop(value)} onDragOver={allowDrop}>
+                {this.renderUserItemByRoom(value)}
+              </div>
+             </label>
+          ))
         }
       </div>
     );
@@ -267,15 +278,19 @@ class BreakoutRoom extends Component {
 
   renderBreakoutForm() {
     const { intl } = this.props;
-
+    const {
+      numberOfRooms,
+      durationTime,
+    } = this.state;
     return (
       <div className={styles.breakoutSettings}>
         <label htmlFor="numberOfRooms">
           <p className={styles.labelText}>{intl.formatMessage(intlMessages.numberOfRooms)}</p>
           <select
+            id="numberOfRooms"
             name="numberOfRooms"
             className={styles.inputRooms}
-            value={this.state.numberOfRooms}
+            value={numberOfRooms}
             onChange={this.changeNumberOfRooms}
           >
             {
@@ -283,14 +298,14 @@ class BreakoutRoom extends Component {
             }
           </select>
         </label>
-        <label htmlFor="breakoutRoomTime" >
+        <label htmlFor="breakoutRoomTime">
           <p className={styles.labelText}>{intl.formatMessage(intlMessages.duration)}</p>
           <div className={styles.durationArea}>
             <input
               type="number"
               className={styles.duration}
               min={MIN_BREAKOUT_ROOMS}
-              value={this.state.durationTime}
+              value={durationTime}
               onChange={this.changeDurationTime}
             />
             <span>
@@ -298,7 +313,7 @@ class BreakoutRoom extends Component {
                 key="decrease-breakout-time"
                 exec={this.decreaseDurationTime}
                 minBound={MIN_BREAKOUT_ROOMS}
-                value={this.state.durationTime}
+                value={durationTime}
               >
                 <Icon
                   className={styles.iconsColor}
@@ -324,11 +339,15 @@ class BreakoutRoom extends Component {
   }
 
   renderSelectUserScreen() {
+    const {
+      users,
+      roomSelected,
+    } = this.state;
     return (
       <SortList
         confirm={() => this.setState({ formFillLevel: 2 })}
-        users={this.state.users}
-        room={this.state.roomSelected}
+        users={users}
+        room={roomSelected}
         onCheck={this.changeUserRoom}
         onUncheck={userId => this.changeUserRoom(userId, 0)}
       />
@@ -337,13 +356,14 @@ class BreakoutRoom extends Component {
 
   renderFreeJoinCheck() {
     const { intl } = this.props;
+    const { freeJoin } = this.state;
     return (
       <label htmlFor="freeJoinCheckbox" className={styles.freeJoinLabel}>
         <input
           type="checkbox"
           className={styles.freeJoinCheckbox}
           onChange={this.setFreeJoin}
-          checked={this.state.freeJoin}
+          checked={freeJoin}
         />
         {intl.formatMessage(intlMessages.freeJoinLabel)}
       </label>
@@ -351,11 +371,15 @@ class BreakoutRoom extends Component {
   }
 
   renderUserItemByRoom(room) {
+    const {
+      valid,
+      seletedId,
+    } = this.state;
     const dragStart = (ev) => {
       ev.dataTransfer.setData('text', ev.target.id);
       this.setState({ seletedId: ev.target.id });
 
-      if (!this.state.valid) {
+      if (!valid) {
         this.setState({ valid: true });
       }
     };
@@ -372,8 +396,8 @@ class BreakoutRoom extends Component {
           key={user.userId}
           className={cx(
             styles.roomUserItem,
-            this.state.seletedId === user.userId ? styles.selectedItem : null,
-            )
+            seletedId === user.userId ? styles.selectedItem : null,
+          )
           }
           draggable
           onDragStart={dragStart}
@@ -452,10 +476,10 @@ class BreakoutRoom extends Component {
 
   render() {
     const { intl } = this.props;
+    const { preventClosing } = this.state;
 
     const BROWSER_RESULTS = browser();
-    const isMobileBrowser = BROWSER_RESULTS.mobile ||
-      BROWSER_RESULTS.os.includes('Android');
+    const isMobileBrowser = BROWSER_RESULTS.mobile || BROWSER_RESULTS.os.includes('Android');
 
     return (
       <Modal
@@ -470,16 +494,15 @@ class BreakoutRoom extends Component {
           callback: this.handleDismiss,
           label: intl.formatMessage(intlMessages.dismissLabel),
         }}
-        preventClosing={this.state.preventClosing}
+        preventClosing={preventClosing}
       >
         <div className={styles.content}>
           <p className={styles.subTitle}>
             {intl.formatMessage(intlMessages.breakoutRoomDesc)}
           </p>
-          {isMobileBrowser ?
-            this.renderMobile() : this.renderDesktop()}
+          {isMobileBrowser ? this.renderMobile() : this.renderDesktop()}
         </div>
-      </Modal >
+      </Modal>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx
index 980ca2a3a4..b0f9b49f98 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx
@@ -42,17 +42,21 @@ class SortUsers extends Component {
   }
 
   componentDidMount() {
-    this.setUsers(this.props.users);
+    const { users } = this.props;
+    this.setUsers(users);
   }
 
   onChage(userId, room) {
+    const {
+      onCheck,
+      onUncheck,
+    } = this.props;
     return (ev) => {
       const check = ev.target.checked;
-
       if (check) {
-        return this.props.onCheck(userId, room);
+        return onCheck(userId, room);
       }
-      return this.props.onUncheck(userId, room);
+      return onUncheck(userId, room);
     };
   }
 
@@ -62,7 +66,8 @@ class SortUsers extends Component {
 
   renderUserItem() {
     const { room } = this.props;
-    return this.state.users
+    const { users } = this.state;
+    return users
       .map((user, idx) => (
         <div id={user.userId} className={styles.selectUserContainer} key={`breakout-user-${user.userId}`}>
           <span className={styles.round}>
@@ -72,24 +77,40 @@ class SortUsers extends Component {
               defaultChecked={user.room === room}
               onChange={this.onChage(user.userId, room)}
             />
-            <label htmlFor={`itemId${idx}`} />
+            <label htmlFor={`itemId${idx}`}>
+              <input
+                type="checkbox"
+                id={`itemId${idx}`}
+                defaultChecked={user.room === room}
+                onChange={this.onChage(user.userId, room)}
+              />
+            </label>
+          </span>
+          <span className={styles.textName}>
+            {user.userName}
+            {user.room && !(user.room === room) ? `\t[${user.room}]` : ''}
           </span>
-          <span className={styles.textName} >{user.userName}{user.room && !(user.room === room) ? `\t[${user.room}]` : ''}</span>
         </div>));
   }
 
   render() {
-    const { intl } = this.props;
+    const {
+      intl,
+      room,
+      confirm,
+    } = this.props;
     return (
       <div className={styles.selectUserScreen}>
         <header className={styles.header}>
-          <h2 className={styles.title}> {intl.formatMessage(intlMessages.breakoutRoomLabel, { 0: this.props.room })}</h2>
+          <h2 className={styles.title}>
+            {intl.formatMessage(intlMessages.breakoutRoomLabel, { 0: room })}
+          </h2>
           <Button
             className={styles.buttonAdd}
             size="md"
             label={intl.formatMessage(intlMessages.doneLabel)}
             color="primary"
-            onClick={this.props.confirm}
+            onClick={confirm}
           />
         </header>
         {this.renderUserItem()}