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 * Clear text message
*/ */
@ -10,16 +13,20 @@ export interface Props {
messages: Message[]; messages: Message[];
} }
export default function Messages(props: Props) { export default function Messages({ messages }: Props) {
const messages = props.messages.map((msg) => { return <List dense={true}>{generate(messages)}</List>;
}
function generate(messages: Message[]) {
return messages.map((msg) => {
const text = `<${formatDisplayDate(msg.timestamp)}> ${msg.text}`;
return ( return (
<li> <ListItem>
{formatDisplayDate(msg.timestamp)} {msg.text} <ListItemText key={formatDisplayDate(msg.timestamp)} primary={text} />
</li> </ListItem>
); );
}); });
return <ul>{messages}</ul>;
} }
function formatDisplayDate(timestamp: Date): string { function formatDisplayDate(timestamp: Date): string {