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

Use material ui list

This commit is contained in:
Franck Royer 2021-06-29 16:14:27 +10:00
parent a46a05a5ea
commit b1a1c82de3
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
examples/eth-dm/src/messaging/Messages.tsx
View File

@ -1,3 +1,6 @@
import React from 'react';
import { List, ListItem, ListItemText } from '@material-ui/core';
/**
* Clear text message
*/
@ -10,16 +13,20 @@ export interface Props {
messages: Message[];
}
export default function Messages(props: Props) {
const messages = props.messages.map((msg) => {
export default function Messages({ messages }: Props) {
return <List dense={true}>{generate(messages)}</List>;
}
function generate(messages: Message[]) {
return messages.map((msg) => {
const text = `<${formatDisplayDate(msg.timestamp)}> ${msg.text}`;
return (
<li>
{formatDisplayDate(msg.timestamp)} {msg.text}
</li>
<ListItem>
<ListItemText key={formatDisplayDate(msg.timestamp)} primary={text} />
</ListItem>
);
});
return <ul>{messages}</ul>;
}
function formatDisplayDate(timestamp: Date): string {