Skip to content

Commit 25ee291

Browse files
pardeep-kumar-bspardeep-kumar-bs
committed
fix date issue in message listing.
1 parent 5d02fb6 commit 25ee291

2 files changed

Lines changed: 104 additions & 56 deletions

File tree

‎live-stream/src/js/components/conversation.js‎

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -534,10 +534,14 @@ class Conversation {
534534
}
535535

536536
// Remove the last message date time elements.
537-
if (loadMoreMessages) {
538-
let lastMessageDateTimeEle = document.getElementById("ch_msg_datetime_" + this.messages[this.messages.length - 1]['id']);
539-
if (lastMessageDateTimeEle) {
540-
lastMessageDateTimeEle.remove();
537+
if (loadMoreMessages && messages.length) {
538+
if ( moment(new Date(messages[0].createdAt)).format('DD/MM/YYYY') ==
539+
moment(new Date(this.messages[this.messages.length - 1].createdAt)).format('DD/MM/YYYY')
540+
){
541+
let lastMessageDateTimeEle = document.getElementById("ch_msg_datetime_" + this.messages[this.messages.length - 1]['id']);
542+
if (lastMessageDateTimeEle) {
543+
lastMessageDateTimeEle.remove();
544+
}
541545
}
542546
}
543547

@@ -901,7 +905,7 @@ class Conversation {
901905
let messagesBox = document.getElementById("ch_messages_box");
902906

903907
// Create message frame
904-
this._createMessageBubble(msgData, messagesBox, false, true);
908+
this._createMessageBubble(msgData, messagesBox, true, true);
905909
}
906910

907911
_getMessages(conversation, limit, skip, cb) {
@@ -989,7 +993,7 @@ class Conversation {
989993
message.createdAt = new Date();
990994

991995
// Create message frame
992-
this._createMessageBubble(message, messagesBox, false);
996+
this._createMessageBubble(message, messagesBox, true, false);
993997
}
994998

995999
_createMessageReactionFrame(message, parentDiv) {
@@ -1681,31 +1685,50 @@ class Conversation {
16811685
}
16821686
}
16831687

1684-
_isDateDiffShown(messageId) {
1685-
const messageIndex = this.messages.findIndex(message => message.id == messageId);
1686-
if (messageIndex == -1) {
1687-
return false;
1688-
}
1689-
1690-
if (!this.messages[messageIndex + 1]) {
1691-
return true;
1692-
}
1693-
1694-
const currentMsgDate = moment(new Date(this.messages[messageIndex].createdAt)).format('DD/MM/YYYY');
1695-
const nextMsgDate = moment(new Date(this.messages[messageIndex + 1].createdAt)).format('DD/MM/YYYY');
1696-
1697-
if (currentMsgDate != nextMsgDate) {
1698-
return true;
1699-
}
1700-
return false
1688+
_isDateDiffShown(currentMsgId, lastMsgId, isNewMessage) {
1689+
const messageIndex = this.messages.findIndex(message => message.id == currentMsgId);
1690+
if (messageIndex == -1) {
1691+
return false;
1692+
}
1693+
const currentMsgDate = moment(new Date(this.messages[messageIndex].createdAt)).format('DD/MM/YYYY');
1694+
1695+
// Check if this new message
1696+
// 1. Yes: this is new entered message.
1697+
// 2. No: Means this is came from API.
1698+
if (isNewMessage) {
1699+
// This in only one message.
1700+
if (!lastMsgId) {
1701+
return true;
1702+
}
1703+
const lastMsgIndex = this.messages.findIndex(message => message.id == lastMsgId);
1704+
if (lastMsgIndex == -1) {
1705+
return true;
1706+
}
1707+
const lastMsgDate = moment(new Date(this.messages[lastMsgIndex].createdAt)).format('DD/MM/YYYY');
1708+
if (currentMsgDate != lastMsgDate) {
1709+
return true;
1710+
}
1711+
return false;
1712+
}
1713+
1714+
if (!this.messages[messageIndex + 1]) {
1715+
return true;
1716+
}
1717+
1718+
const nextMsgDate = moment(new Date(this.messages[messageIndex + 1].createdAt)).format('DD/MM/YYYY');
1719+
if (currentMsgDate != nextMsgDate) {
1720+
return true;
1721+
}
1722+
return false;
17011723
}
17021724

1703-
_createMessageBubble(message, messagesBox, showDateDiff = true, isPendingMessage = false) {
1725+
_createMessageBubble(message, messagesBox, isNewMessage = false, isPendingMessage = false) {
17041726
// Create message list
1727+
const lastMsgId = messagesBox.lastChild && messagesBox.lastChild.id;
1728+
17051729
let msgBubbleEleAttributes = [{"id":message.id},{"class":"ch-msg-bubble"}];
17061730
let msgBubbleEle = this.utility.createElement("div", msgBubbleEleAttributes, null, messagesBox);
1707-
1708-
if(showDateDiff && this._isDateDiffShown(message.id)) {
1731+
if(!isPendingMessage && this._isDateDiffShown(message.id, lastMsgId, isNewMessage)) {
17091732
let msgDateTimeAttributes = [{"id":"ch_msg_datetime_" + message.id},{"class":"ch-msg-datetime"}];
17101733
this.utility.createElement("div", msgDateTimeAttributes, this.utility.formatDate(message.createdAt), msgBubbleEle);
17111734
}

‎live-stream/src/js/components/threads.js‎

Lines changed: 55 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -410,10 +410,16 @@ class Threads {
410410
}
411411

412412
// Remove the last message date time elements.
413-
let lastMessageDateTimeEle = document.getElementById("ch_thread_msg_datetime_" +
414-
this.threadsMessages[this.threadsMessages.length - 1]['id']);
415-
if (lastMessageDateTimeEle) {
416-
lastMessageDateTimeEle.remove();
413+
if (loadMoreMessages && messages.length) {
414+
if ( moment(new Date(messages[0].createdAt)).format('DD/MM/YYYY') ==
415+
moment(new Date(this.threadsMessages[this.threadsMessages.length - 1].createdAt)).format('DD/MM/YYYY')
416+
) {
417+
let lastMessageDateTimeEle = document.getElementById("ch_thread_msg_datetime_" +
418+
this.threadsMessages[this.threadsMessages.length - 1]['id']);
419+
if (lastMessageDateTimeEle) {
420+
lastMessageDateTimeEle.remove();
421+
}
422+
}
417423
}
418424

419425
this.threadsMessages = this.threadsMessages.concat(messages);
@@ -550,23 +556,21 @@ class Threads {
550556
}
551557

552558
_createParentMessageBubble(message, messagesBox) {
553-
554559
let threadStart = document.getElementById("ch_thread_start");
555560
if (!threadStart) {
556561
// Create message frame
557-
this._createMessageBubble(message, messagesBox, false);
562+
this._createMessageBubble(message, messagesBox, false, false, false);
558563

564+
let parentMessage = document.getElementById("thread_" + message.id);
559565
// Create a line breaker b/w parent and chid message.
560566
let threadStartAttributes = [{"id":"ch_thread_start"},{"class":"ch-thread-start ch-msg-bubble"}];
561-
let threadStart = this.utility.createElement("div", threadStartAttributes, null, messagesBox);
567+
let threadStart = this.utility.createElement("div", threadStartAttributes, null, parentMessage);
562568

563569
let threadLineSpanAttributes = [];
564570
let threadLineSpan = this.utility.createElement("span", threadLineSpanAttributes, LANGUAGE_PHRASES.START_OF_A_NEW_THREAD, threadStart);
565571

566-
// Set parent message and line breaker position
567-
let parentMessage = document.getElementById("thread_" + message.id);
572+
// Set parent message position
568573
messagesBox.insertBefore(parentMessage, messagesBox.childNodes[0]);
569-
messagesBox.insertBefore(threadStart, messagesBox.childNodes[1]);
570574

571575
// Add date time on the top of the parent message.
572576
let msgDateTimeAttributes = [{"id":"ch_thread_msg_datetime_" + message.id},{"class":"ch-msg-datetime"}];
@@ -1073,7 +1077,7 @@ class Threads {
10731077
let messagesBox = document.getElementById("ch_thread_messages_box");
10741078

10751079
// Create message frame
1076-
this._createMessageBubble(msgData, messagesBox, false, true);
1080+
this._createMessageBubble(msgData, messagesBox, false, true, true);
10771081
}
10781082

10791083
addNewMessage(message, newConversation) {
@@ -1115,7 +1119,7 @@ class Threads {
11151119
message.createdAt = new Date();
11161120

11171121
// Create message frame
1118-
this._createMessageBubble(message, messagesBox, false);
1122+
this._createMessageBubble(message, messagesBox, true, true, false);
11191123
}
11201124

11211125
_getMessages(conversation, limit, skip, cb) {
@@ -1126,31 +1130,52 @@ class Threads {
11261130
});
11271131
}
11281132

1129-
_isDateDiffShown(messageId) {
1130-
const messageIndex = this.threadsMessages.findIndex(message => message.id == messageId);
1131-
if (messageIndex == -1) {
1132-
return false;
1133-
}
1133+
_isDateDiffShown(currentMsgId, lastMsgId, isNewMessage) {
1134+
const messageIndex = this.threadsMessages.findIndex(message => message.id == currentMsgId);
1135+
if (messageIndex == -1) {
1136+
return false;
1137+
}
1138+
const currentMsgDate = moment(new Date(this.threadsMessages[messageIndex].createdAt)).format('DD/MM/YYYY');
1139+
1140+
// Check if this new message
1141+
// 1. Yes: this is new entered message.
1142+
// 2. No: Means this is came from API.
1143+
if (isNewMessage) {
1144+
// This in only one message.
1145+
if (!lastMsgId) {
1146+
return true;
1147+
}
1148+
const lastMsgIndex = this.threadsMessages.findIndex(message => message.id == lastMsgId);
1149+
if (lastMsgIndex == -1) {
1150+
return true;
1151+
}
1152+
const lastMsgDate = moment(new Date(this.threadsMessages[lastMsgIndex].createdAt)).format('DD/MM/YYYY');
1153+
if (currentMsgDate != lastMsgDate) {
1154+
return true;
1155+
}
1156+
return false;
1157+
}
1158+
1159+
if (!this.threadsMessages[messageIndex + 1]) {
1160+
return true;
1161+
}
11341162

1135-
if (!this.threadsMessages[messageIndex + 1]) {
1136-
return true;
1137-
}
1138-
1139-
const currentMsgDate = moment(new Date(this.threadsMessages[messageIndex].createdAt)).format('DD/MM/YYYY');
1140-
const nextMsgDate = moment(new Date(this.threadsMessages[messageIndex + 1].createdAt)).format('DD/MM/YYYY');
1141-
1142-
if (currentMsgDate != nextMsgDate) {
1143-
return true;
1144-
}
1145-
return false
1163+
const nextMsgDate = moment(new Date(this.threadsMessages[messageIndex + 1].createdAt)).format('DD/MM/YYYY');
1164+
1165+
if (currentMsgDate != nextMsgDate) {
1166+
return true;
1167+
}
1168+
return false;
11461169
}
11471170

1148-
_createMessageBubble(message, messagesBox, showDateDiff = true, isPendingMessage = false) {
1171+
_createMessageBubble(message, messagesBox, showDateDiff = true, isNewMessage = false, isPendingMessage = false) {
11491172
// Create message list
1173+
const lastMsgId = messagesBox.lastChild && messagesBox.lastChild.id.replace("thread_", "");
1174+
11501175
let msgBubbleEleAttributes = [{"id":"thread_" + message.id},{"class":"ch-msg-bubble"}];
11511176
let msgBubbleEle = this.utility.createElement("div", msgBubbleEleAttributes, null, messagesBox);
11521177

1153-
if(showDateDiff && this._isDateDiffShown(message.id)) {
1178+
if(showDateDiff && this._isDateDiffShown(message.id, lastMsgId, isNewMessage)) {
11541179
let msgDateTimeAttributes = [{"id":"ch_thread_msg_datetime_" + message.id},{"class":"ch-msg-datetime"}];
11551180
this.utility.createElement("div", msgDateTimeAttributes, this.utility.formatDate(message.createdAt), msgBubbleEle);
11561181
}

0 commit comments

Comments
 (0)