Skip to content

fix: resolve broken message insertion logic #1123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deepak0x wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: resolve broken message insertion logic #1123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/react/src/lib/messageListHelpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import cloneArray from './cloneArray';

// Caution: Not a pure function
export const insertMessage = (messages, message) => {
const idx = messages.findIndex((m) => new Date(m.ts) < new Date(message.ts));
const idx = messages.findIndex((m) => new Date(m.ts) > new Date(message.ts));
if (idx === -1) {
// all the messages are newer than the current message, insert at last
// all the messages are older than the current message, insert at last
messages.push(message);
} else if (idx === 0) {
// the message is the latest one, insert at front
// the message is the oldest one, insert at front
messages.unshift(message);
} else {
messages.splice(idx, 0, message);
Expand Down
5 changes: 3 additions & 2 deletions packages/react/src/store/messageStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ const useMessageStore = create((set, get) => ({
setFilter: (filter) => set(() => ({ filtered: filter })),
setMessages: (newMessages, append = false) =>
set((state) => {
const incomingAscending = [...newMessages].reverse();
const allMessages = append
? [...state.messages, ...newMessages]
: newMessages;
? [...incomingAscending, ...state.messages]
: incomingAscending;
const uniqueMessages = Array.from(
new Map(allMessages.map((msg) => [msg._id, msg])).values()
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/views/MessageAggregators/common/MessageAggregator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const MessageAggregator = ({
const messages = useMessageStore((state) => state.messages);
const threadMessages = useMessageStore((state) => state.threadMessages) || [];
const allMessages = useMemo(
() => [...messages, ...[...threadMessages].reverse()],
() => [...messages, ...threadMessages],
[messages, threadMessages]
);

Expand Down
55 changes: 26 additions & 29 deletions packages/react/src/views/MessageList/MessageList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,37 +76,34 @@ const MessageList = ({
<Throbber />
</Box>
)}
{filteredMessages
.slice()
.reverse()
.map((msg, index, arr) => {
const prev = arr[index - 1];
const next = arr[index + 1];
{filteredMessages.slice().map((msg, index, arr) => {
const prev = arr[index - 1];
const next = arr[index + 1];

if (!msg) return null;
const newDay = isMessageNewDay(msg, prev);
const sequential = isMessageSequential(msg, prev, 300);
const lastSequential =
sequential && isMessageLastSequential(msg, next);
const showUnreadDivider =
firstUnreadMessageId && msg._id === firstUnreadMessageId;
if (!msg) return null;
const newDay = isMessageNewDay(msg, prev);
const sequential = isMessageSequential(msg, prev, 300);
const lastSequential =
sequential && isMessageLastSequential(msg, next);
const showUnreadDivider =
firstUnreadMessageId && msg._id === firstUnreadMessageId;

return (
<React.Fragment key={msg._id}>
{showUnreadDivider && (
<MessageDivider unread>Unread Messages</MessageDivider>
)}
<Message
message={msg}
newDay={newDay}
sequential={sequential}
lastSequential={lastSequential}
type="default"
showAvatar
/>
</React.Fragment>
);
})}
return (
<React.Fragment key={msg._id}>
{showUnreadDivider && (
<MessageDivider unread>Unread Messages</MessageDivider>
)}
<Message
message={msg}
newDay={newDay}
sequential={sequential}
lastSequential={lastSequential}
type="default"
showAvatar
/>
</React.Fragment>
);
})}
{showReportMessage && (
<MessageReportWindow
messageId={messageToReport}
Expand Down