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] 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()}
--
GitLab