add unread as a key/value on each message

This fixes #1545 by adding unread as a key/value on each message during the filtering process. This means the unread count is always applied to the list of full messages, and never to a subset (as was happening before to cause #1545).
This commit is contained in:
Matthew Taylor 2017-09-19 10:13:52 -04:00
parent 5245123a4c
commit 8c631b40d9
2 changed files with 22 additions and 15 deletions

View file

@ -116,10 +116,20 @@ var Messages = React.createClass({
) )
); );
}, },
filterMessages: function (messages, typesAllowed) { filterMessages: function (messages, typesAllowed, unreadCount) {
var filteredMessages = []; var filteredMessages = [];
for (var i in messages) { for (var i in messages) {
if (typesAllowed.indexOf(messages[i].type) > -1) { // 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.length > 0) {
if (typesAllowed.indexOf(messages[i].type) > -1) {
filteredMessages.push(messages[i]);
}
} else {
// if empty, then we're looking at all messages, so just like add the message
filteredMessages.push(messages[i]); filteredMessages.push(messages[i]);
} }
} }
@ -131,10 +141,11 @@ var Messages = React.createClass({
loadMore = false; loadMore = false;
} }
var messages = this.props.messages; var messages = this.filterMessages(
if (this.state.filterValues.length > 0) { this.props.messages,
messages = this.filterMessages(messages, this.state.filterValues); this.state.filterValues,
} this.props.numNewMessages
);
return( return(
<MessagesPresentation <MessagesPresentation

View file

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