mirror of https://github.com/waku-org/js-waku.git
Group sequential messages from same sender
Name and date are not repeated anymore.
This commit is contained in:
parent
2c72c6d388
commit
2c741da2c3
|
@ -1,6 +1,11 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
import { ChatMessage } from '../../build/main/chat/chat_message';
|
||||
import { Message, MessageText, MessageGroup } from '@livechat/ui-kit';
|
||||
import {
|
||||
Message,
|
||||
MessageText,
|
||||
MessageGroup,
|
||||
MessageList,
|
||||
} from '@livechat/ui-kit';
|
||||
|
||||
interface Props {
|
||||
messages: ChatMessage[];
|
||||
|
@ -9,33 +14,57 @@ interface Props {
|
|||
export default function ChatList(props: Props) {
|
||||
const messages = props.messages;
|
||||
|
||||
const listItems = messages.map((currentMessage) => (
|
||||
<Message
|
||||
// We assume that the same user is not sending two messages in the same second
|
||||
key={currentMessage.timestamp.toString() + currentMessage.nick}
|
||||
authorName={currentMessage.nick}
|
||||
date={formatDisplayDate(currentMessage)}
|
||||
>
|
||||
<MessageText>{currentMessage.message}</MessageText>
|
||||
</Message>
|
||||
));
|
||||
|
||||
return (
|
||||
<MessageGroup>
|
||||
{listItems}
|
||||
<AlwaysScrollToBottom messages={messages} />
|
||||
</MessageGroup>
|
||||
const messagesGroupedBySender = groupMessagesBySender(props.messages).map(
|
||||
(currentMessageGroup) => (
|
||||
<MessageGroup onlyFirstWithMeta>
|
||||
{currentMessageGroup.map((currentMessage) => (
|
||||
<Message
|
||||
// We assume that the same user is not sending two messages in the same second
|
||||
key={currentMessage.timestamp.toString() + currentMessage.nick}
|
||||
authorName={currentMessage.nick}
|
||||
date={formatDisplayDate(currentMessage)}
|
||||
>
|
||||
<MessageText>{currentMessage.message}</MessageText>
|
||||
</Message>
|
||||
))}
|
||||
</MessageGroup>
|
||||
)
|
||||
);
|
||||
|
||||
function formatDisplayDate(message: ChatMessage) {
|
||||
return message.timestamp.toLocaleString([], {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
return (
|
||||
<MessageList active containScrollInSubtree>
|
||||
{messagesGroupedBySender}
|
||||
<AlwaysScrollToBottom messages={messages} />
|
||||
</MessageList>
|
||||
);
|
||||
}
|
||||
|
||||
function groupMessagesBySender(messageArray: ChatMessage[]): ChatMessage[][] {
|
||||
let currentSender = -1;
|
||||
let lastNick = '';
|
||||
let messagesBySender: ChatMessage[][] = [];
|
||||
let currentSenderMessage = 0;
|
||||
|
||||
for (let currentMessage of messageArray) {
|
||||
if (lastNick !== currentMessage.nick) {
|
||||
currentSender++;
|
||||
messagesBySender[currentSender] = [];
|
||||
currentSenderMessage = 0;
|
||||
lastNick = currentMessage.nick;
|
||||
}
|
||||
messagesBySender[currentSender][currentSenderMessage++] = currentMessage;
|
||||
}
|
||||
return messagesBySender;
|
||||
}
|
||||
|
||||
function formatDisplayDate(message: ChatMessage): string {
|
||||
return message.timestamp.toLocaleString([], {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
const AlwaysScrollToBottom = (props: Props) => {
|
||||
|
|
|
@ -5,7 +5,7 @@ import { ChatContentTopic } from './App';
|
|||
import ChatList from './ChatList';
|
||||
import MessageInput from './MessageInput';
|
||||
import { useWaku } from './WakuContext';
|
||||
import { TitleBar, MessageList } from '@livechat/ui-kit';
|
||||
import { TitleBar } from '@livechat/ui-kit';
|
||||
|
||||
interface Props {
|
||||
lines: ChatMessage[];
|
||||
|
@ -23,9 +23,7 @@ export default function Room(props: Props) {
|
|||
style={{ height: '98vh', display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<TitleBar title="Waku v2 chat app" />
|
||||
<MessageList active containScrollInSubtree>
|
||||
<ChatList messages={props.lines} />
|
||||
</MessageList>
|
||||
<ChatList messages={props.lines} />
|
||||
<MessageInput
|
||||
messageHandler={setMessageToSend}
|
||||
sendMessage={
|
||||
|
|
Loading…
Reference in New Issue