From 6f8422fc2fbd651915a77b35819cef1b018055e2 Mon Sep 17 00:00:00 2001
From: gcampes <gabrieldecampes@gmail.com>
Date: Mon, 22 Feb 2016 15:41:35 -0300
Subject: [PATCH] Change file names and adds status icon

---
 bigbluebutton-html5/app/client/main.html      |  4 +-
 bigbluebutton-html5/app/client/main.jsx       |  2 +-
 .../userItem.jsx => UserList/UserItem.jsx}    | 14 +++++--
 .../react/components/UserList/UserList.jsx    |  9 ++++
 .../components/UserList/UserListContainer.jsx | 42 +++++++++++++++++++
 .../react/components/userList/userList.jsx    |  9 ----
 .../react/components/userListContainer.jsx    | 37 ----------------
 7 files changed, 63 insertions(+), 54 deletions(-)
 rename bigbluebutton-html5/app/client/react/components/{userList/userItem.jsx => UserList/UserItem.jsx} (86%)
 create mode 100644 bigbluebutton-html5/app/client/react/components/UserList/UserList.jsx
 create mode 100644 bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx
 delete mode 100644 bigbluebutton-html5/app/client/react/components/userList/userList.jsx
 delete mode 100644 bigbluebutton-html5/app/client/react/components/userListContainer.jsx

diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html
index 1d14472ea2..7cb6b80b63 100755
--- a/bigbluebutton-html5/app/client/main.html
+++ b/bigbluebutton-html5/app/client/main.html
@@ -50,9 +50,7 @@
     {{#if isDisconnected}}
       {{>status}}
     {{else}}
-      <div class="userlistMenu">
-        <h3 class="meetingTitle">DEMO</h3>
-        <div id="users" class="component"></div>
+      <div id="userListSidebar" class="userlistMenu">
       </div>
       <div class="settingsMenu">
         {{> menu id="menu"}}
diff --git a/bigbluebutton-html5/app/client/main.jsx b/bigbluebutton-html5/app/client/main.jsx
index ced8137357..2a3834c605 100755
--- a/bigbluebutton-html5/app/client/main.jsx
+++ b/bigbluebutton-html5/app/client/main.jsx
@@ -90,7 +90,7 @@ Template.menu.events({
 });
 
 Template.main.rendered = function() {
-  ReactDOM.render(<UserListContainer />, document.getElementById("users"));
+  ReactDOM.render(<UserListContainer />, document.getElementById("userListSidebar"));
 
   let lastOrientationWasLandscape;
   $("#dialog").dialog({
diff --git a/bigbluebutton-html5/app/client/react/components/userList/userItem.jsx b/bigbluebutton-html5/app/client/react/components/UserList/UserItem.jsx
similarity index 86%
rename from bigbluebutton-html5/app/client/react/components/userList/userItem.jsx
rename to bigbluebutton-html5/app/client/react/components/UserList/UserItem.jsx
index ccb4f7c788..6ed06cd43f 100644
--- a/bigbluebutton-html5/app/client/react/components/userList/userItem.jsx
+++ b/bigbluebutton-html5/app/client/react/components/UserList/UserItem.jsx
@@ -1,4 +1,4 @@
-UserItem = React.createClass({
+UserItem = class UserItem extends React.Component {
   statusicons(user){
     if(user.isPresenter){
       return (
@@ -18,7 +18,7 @@ UserItem = React.createClass({
         </div>
       )
     }
-    else{
+    else if(this.props.currentUserModerator){
       return (
         <div className="status">
           <span className="setPresenter" rel="tooltip" data-placement="bottom" title={"set " + user.name + " as presenter"}>
@@ -27,7 +27,13 @@ UserItem = React.createClass({
         </div>
       )
     }
-  },
+    else{
+      return (
+        <div className="status">
+        </div>  
+      )
+    }
+  };
 
   render() {
     return (
@@ -39,4 +45,4 @@ UserItem = React.createClass({
       </div>
     );
   }
-})
+}
diff --git a/bigbluebutton-html5/app/client/react/components/UserList/UserList.jsx b/bigbluebutton-html5/app/client/react/components/UserList/UserList.jsx
new file mode 100644
index 0000000000..c4df6e3357
--- /dev/null
+++ b/bigbluebutton-html5/app/client/react/components/UserList/UserList.jsx
@@ -0,0 +1,9 @@
+UserList = class UserList extends React.Component {
+  render() {
+    return (
+      <div className="userlist ScrollableWindowY">
+        {this.props.users.map((user) => <UserItem key={user.id} user={user} currentUserModerator={this.props.currentUserModerator}/>)}
+      </div>
+    );
+  }
+}
diff --git a/bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx b/bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx
new file mode 100644
index 0000000000..91f5bdacdf
--- /dev/null
+++ b/bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx
@@ -0,0 +1,42 @@
+UserListContainer = React.createClass({
+  mixins: [ReactMeteorData],
+  getMeteorData() {
+    const currentUser = BBB.getCurrentUser();
+    const isCurrentUserModerator = currentUser.user.role === "MODERATOR";
+    const currentUserId = currentUser.userId;
+
+    console.log(currentUser);
+    return {
+      // All this mapping should be on a service and not on the component itself
+      currentUserModerator: isCurrentUserModerator,
+      users: Meteor.Users.find().fetch().map(u => u.user).map(u => {
+        return {
+          id: u.userid,
+          name: u.name,
+          isCurrent: u.userid === currentUserId,
+          isPresenter: u.presenter,
+          isModerator: u.role === "MODERATOR",
+          emoji: u.emoji_status,
+          sharingStatus: {
+            isLocked: true, //TODO: Migrate blaze logic
+            isWebcamOpen: u.webcam_stream.length,
+            isListenOnly: u.listenOnly,
+            isMuted: u.voiceUser.muted,
+            isTalking: u.voiceUser.talking
+          }
+        };
+      })
+    };
+  },
+
+  render() {
+    return (
+      <div id="users" className="component">
+        <h3 className="meetingTitle">DEMO</h3>
+        <div id="user-contents">
+          <UserList users={this.data.users} currentUserModerator={this.data.currentUserModerator}/>
+        </div>
+      </div>
+    );
+  }
+})
diff --git a/bigbluebutton-html5/app/client/react/components/userList/userList.jsx b/bigbluebutton-html5/app/client/react/components/userList/userList.jsx
deleted file mode 100644
index 597c639c34..0000000000
--- a/bigbluebutton-html5/app/client/react/components/userList/userList.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-UserList = React.createClass({
-  render() {
-    return (
-      <div className="userlist ScrollableWindowY">
-        {this.props.users.map((user) => <UserItem user={user}/>)}
-      </div>
-    );
-  }
-})
diff --git a/bigbluebutton-html5/app/client/react/components/userListContainer.jsx b/bigbluebutton-html5/app/client/react/components/userListContainer.jsx
deleted file mode 100644
index 26fe1333ce..0000000000
--- a/bigbluebutton-html5/app/client/react/components/userListContainer.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-UserListContainer = React.createClass({
-  mixins: [ReactMeteorData],
-  getMeteorData() {
-    const currentUserId = BBB.getCurrentUser().userId;
-
-    return {
-      // All this mapping should be on a service and not on the component itself
-      users: Meteor.Users.find()
-        .fetch()
-        .map(u => u.user)
-        .map(u => {
-          return {
-            name: u.name,
-            isCurrent: u.userid === currentUserId,
-            isPresenter: u.presenter,
-            isModerator: u.role === "MODERATOR",
-            emoji: u.emoji_status,
-            sharingStatus: {
-              isLocked: true, //TODO: Migrate blaze logic
-              isWebcamOpen: u.webcam_stream.length,
-              isListenOnly: u.listenOnly,
-              isMuted: u.voiceUser.muted,
-              isTalking: u.voiceUser.talking,
-            }
-          };
-        })
-    };
-  },
-
-  render() {
-    return (
-      <div id="user-contents">
-        <UserList users={this.data.users}/>
-      </div>
-    );
-  }
-})