Merge pull request #1559 from mewtaylor/issue/gh-1545

Fix GH-1545: add `unread` as a key/value on each message

src/views/messages/container.jsx

@@ -116,11 +116,23 @@ var Messages = React.createClass({
             )
         );
     },
-    filterMessages: function (messages, typesAllowed) {
+    filterMessages: function (messages, typesAllowed, unreadCount) {
         var filteredMessages = [];
-        for (var i in messages) {
-            if (typesAllowed.indexOf(messages[i].type) > -1) {
-                filteredMessages.push(messages[i]);
+        if (typesAllowed.length > 0) {
+            for (var i in messages) {
+                // check to see if the position of the message in the list is earlier
+                // than the unread count. If it is, then the message is totally unread.
+                messages[i].unread = false;
+                if (i < unreadCount) messages[i].unread = true;
+
+                if (typesAllowed.indexOf(messages[i].type) > -1) {
+                    filteredMessages.push(messages[i]);
+                }
+            }
+        } else {
+            filteredMessages = messages;
+            for (var j = 0; j < unreadCount; j++) {
+                filteredMessages[j].unread = true;
             }
         }
         return filteredMessages;
@@ -131,10 +143,11 @@ var Messages = React.createClass({
             loadMore = false;
         }
 
-        var messages = this.props.messages;
-        if (this.state.filterValues.length > 0) {
-            messages = this.filterMessages(messages, this.state.filterValues);
-        }
+        var messages = this.filterMessages(
+            this.props.messages,
+            this.state.filterValues,
+            this.props.numNewMessages
+        );
 
         return(
             <MessagesPresentation

src/views/messages/presentation.jsx

@@ -42,8 +42,8 @@ var SocialMessagesList = React.createClass({
             numNewMessages: 0
         };
     },
-    getComponentForMessage: function (message, unread) {
-        var className = (unread) ? 'mod-unread' : '';
+    getComponentForMessage: function (message) {
+        var className = (message.unread === true) ? 'mod-unread' : '';
         var key = message.type + '_' + message.id;
 
         switch (message.type) {
@@ -140,14 +140,10 @@ var SocialMessagesList = React.createClass({
             />;
         }
     },
-    renderSocialMessages: function (messages, unreadCount) {
+    renderSocialMessages: function (messages) {
         var messageList = [];
         for (var i in messages) {
-            if (i <= unreadCount) {
-                messageList.push(this.getComponentForMessage(messages[i], true));
-            } else {
-                messageList.push(this.getComponentForMessage(messages[i], false));
-            }
+            messageList.push(this.getComponentForMessage(messages[i]));
         }
         return messageList;
     },
@@ -195,7 +191,7 @@ var SocialMessagesList = React.createClass({
                         </h4>
                     </div>,
                     <ul className="messages-social-list" key="messages-social-list">
-                        {this.renderSocialMessages(this.props.messages, (this.props.numNewMessages - 1))}
+                        {this.renderSocialMessages(this.props.messages)}
                     </ul>,
                     this.renderLoadMore(this.props.loadMore)
                 ] : []}