105: Group sequential messages from same sender into single group, reduce CSS padding, and don't repeat sender name and timestamp r=D4nte a=littlealex003

- **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
Feature

- **What is the current behavior?** (You can also link to an open issue here)
Resolves #86 
Name and timestamp are printed for each message
Large amounts of space are used for each message

- **What is the new behavior (if this is a feature change)?**
Name and timestamp are only printed for first message from sender until someone else sends a message
Padding and margin around text eliminated to maximize screen real estate usage


Co-authored-by: Franck Royer <franck@status.im>
This commit is contained in:
bors[bot] 2021-05-03 21:54:39 +00:00 committed by GitHub
commit 689f439948
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 30 deletions

View File

@ -13,6 +13,35 @@ import { WakuContext } from './WakuContext';
import { ThemeProvider } from '@livechat/ui-kit';
import { generate } from 'server-name-generator';
const themes = {
AuthorName: {
css: {
fontSize: '1.1em',
},
},
Message: {
css: {
margin: '0em',
padding: '0em',
fontSize: '0.83em',
},
},
MessageText: {
css: {
margin: '0em',
padding: '0.1em',
paddingLeft: '1em',
fontSize: '1.1em',
},
},
MessageGroup: {
css: {
margin: '0em',
padding: '0.2em',
},
},
};
export const ChatContentTopic = 'dingpu';
export default function App() {
@ -82,7 +111,7 @@ export default function App() {
style={{ height: '100vh', width: '100vw', overflow: 'hidden' }}
>
<WakuContext.Provider value={{ waku: stateWaku }}>
<ThemeProvider>
<ThemeProvider theme={themes}>
<Room
nick={nick}
lines={stateMessages}

View File

@ -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) => {

View File

@ -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={