Add UserItem component unread badge

Conflicts:
	bigbluebutton-html5/app/client/react/components/UserList/UserItem.jsx

bigbluebutton-html5/app/client/react/components/Button.jsx

@@ -61,9 +61,4 @@ Button = React.createClass({
       </Component>
     );
   },
-
-
-  handleClick() {
-    alert('cliquei2');
-  },
 });

bigbluebutton-html5/app/client/react/components/UserList/UserItem.jsx

@@ -29,13 +29,46 @@ UserItem = React.createClass({
   },
 
   render() {
+    const user = this.props.user;
     return (
       <div id="content" className="userItem">
-        {this.statusicons(this.props.user)}
-        <span className="usernameEntry" rel="tooltip" data-placement="bottom" title={this.props.user.name}>
-          <span className="userName">{this.props.user.name}</span>
-        </span>
+        {this.statusicons(user)}
+        {this.renderUserName(user)}
+        {this.renderUnreadBadge(user.unreadMessagesCount)}
       </div>
     );
+  },
+
+  renderUserName(user) {
+    let classes = ['usernameEntry'];
+    let userName = user.name;
+
+    if(user.isCurrent) {
+      userName = userName.concat(' (you)');
+      classes.push('userCurrent');
     }
+
+    if(user.unreadMessagesCount) {
+      classes.push('gotUnreadMail');
+    }
+
+    return (
+      <Tooltip className={classNames(classes)} title={userName}>
+        <span className="userName">{userName}</span>
+      </Tooltip>
+    );
+  },
+
+  renderUnreadBadge(unreadMessagesCount) {
+    if(!unreadMessagesCount) {
+      return;
+    }
+
+    return (
+      <div className="unreadChatNumber">
+        {(unreadMessagesCount > 9) ? '9+' : unreadMessagesCount }
+      </div>
+    );
+  },
+
 })

bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx

@@ -5,8 +5,10 @@ UserListContainer = React.createClass({
     const isCurrentUserModerator = currentUser.user.role === "MODERATOR";
     const currentUserId = currentUser.userId;
 
-    const users = Meteor.Users.find().fetch().map(u => u.user).map(u => {
-      return {
+    const chats = getInSession('chats');
+
+    let users = Meteor.Users.find().fetch().map(u => u.user).map(u => {
+      let user = {
         id: u.userid,
         name: u.name,
         isCurrent: u.userid === currentUserId,
@@ -19,8 +21,24 @@ UserListContainer = React.createClass({
           isListenOnly: u.listenOnly,
           isMuted: u.voiceUser.muted,
           isTalking: u.voiceUser.talking
-        }
+        },
+        unreadMessagesCount: 0
       };
+
+      chats.forEach(c => {
+        let key = c.userId;
+
+        // show unread count for public chat on the user itself
+        if(user.isCurrent) {
+          key = "PUBLIC_CHAT";
+        }
+
+        if(c.gotMail && c.userId === user.id) {
+          user.unreadMessagesCount = c.number;
+        }
+      });
+
+      return user;
     });
 
     return {