waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make message a component

This commit is contained in:
Franck Royer 2021-04-27 13:57:53 +10:00
parent 5635ca028b
commit 243a9aba77
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web-chat/src/Room.tsx
View File

@ -22,7 +22,7 @@ export default function Room(props: Props) {
style={{ height: '100vh', display: 'flex', flexDirection: 'column' }} style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
> >
<div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}> <div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}>
<Lines messages={props.lines} /> <ChatList messages={props.lines} />
</div> </div>
<div className="chat-input" style={{ flexGrow: 0, height: '120px' }}> <div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
<MessageInput <MessageInput
@ -63,29 +63,28 @@ async function handleMessage(
} }
} }
interface LinesProps { interface ChatListProps {
messages: ChatMessage[]; messages: ChatMessage[];
} }
const Lines = (props: LinesProps) => { function ChatList(props: ChatListProps) {
const renderedLines = []; const messages = props.messages;
for (const i in props.messages) { const listItems = messages.map((message) => (
renderedLines.push( <ListItem key={message.timestamp.toString()}>
<ListItem> <ListItemText primary={<Message message={message} />} />
<ListItemText
key={'chat-message-' + i}
primary={printMessage(props.messages[i])}
/>
</ListItem> </ListItem>
); ));
}
return <List dense={true}>{renderedLines}</List>; return <List dense={true}>{listItems}</List>;
}; }
// TODO: Make it a proper component interface MessageProps {
function printMessage(chatMsg: ChatMessage) { message: ChatMessage;
}
function Message(props: MessageProps) {
const chatMsg = props.message;
const timestamp = chatMsg.timestamp.toLocaleString([], { const timestamp = chatMsg.timestamp.toLocaleString([], {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
@ -93,5 +92,9 @@ function printMessage(chatMsg: ChatMessage) {
minute: '2-digit', minute: '2-digit',
hour12: false, hour12: false,
}); });
return `<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`; return (
<div className="chat-message">
{`<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`}
</div>
);
} }