waku-org/js-waku
1
0
Fork 0
mirror of https://github.com/waku-org/js-waku.git synced 2025-01-13 05:54:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move ChatList component to dedicated file

Browse Source
This commit is contained in:
Franck Royer 2021-04-27 13:59:25 +10:00
parent 243a9aba77
commit 14ccfdf2dd
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web-chat/src/ChatList.tsx Normal file
View File

@ -0,0 +1,39 @@
import { List, ListItem, ListItemText } from '@material-ui/core';
import React from 'react';
import { ChatMessage } from '../../build/main/chat/chat_message';
interface Props {
messages: ChatMessage[];
}
export default function ChatList(props: Props) {
const messages = props.messages;
const listItems = messages.map((message) => (
<ListItem key={message.timestamp.toString()}>
<ListItemText primary={<Message message={message} />} />
</ListItem>
));
return <List dense={true}>{listItems}</List>;
}
interface MessageProps {
message: ChatMessage;
}
function Message(props: MessageProps) {
const chatMsg = props.message;
const timestamp = chatMsg.timestamp.toLocaleString([], {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
hour12: false,
});
return (
<div className="chat-message">
{`<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`}
</div>
);
}

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

@ -1,8 +1,8 @@
import { List, ListItem, ListItemText } from '@material-ui/core';
import React, { useState } from 'react';
import { ChatMessage } from 'waku-chat/chat_message';
import { WakuMessage } from 'waku/waku_message';
import { ChatContentTopic } from './App';
import ChatList from './ChatList';
import MessageInput from './MessageInput';
import { useWaku } from './WakuContext';
@ -62,39 +62,3 @@ async function handleMessage(
return messageSender(wakuMsg);
}
}
interface ChatListProps {
messages: ChatMessage[];
}
function ChatList(props: ChatListProps) {
const messages = props.messages;
const listItems = messages.map((message) => (
<ListItem key={message.timestamp.toString()}>
<ListItemText primary={<Message message={message} />} />
</ListItem>
));
return <List dense={true}>{listItems}</List>;
}
interface MessageProps {
message: ChatMessage;
}
function Message(props: MessageProps) {
const chatMsg = props.message;
const timestamp = chatMsg.timestamp.toLocaleString([], {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
hour12: false,
});
return (
<div className="chat-message">
{`<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`}
</div>
);
}