Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 1 | import { Avatar, Box, Divider, Typography } from '@material-ui/core' |
| 2 | import Paper from '@material-ui/core/Paper' |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 3 | import React from 'react' |
| 4 | import Message from './Message' |
| 5 | |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 6 | class MessageList extends React.Component { |
| 7 | render() { |
| 8 | return ( |
| 9 | <div className="message-list"> |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 10 | <Box> |
| 11 | <Box style={{display:'inline-block', margin: 16, verticalAlign:'middle'}}> |
| 12 | <Avatar>{this.props.conversation.getDisplayName()[0].toUpperCase()}</Avatar> |
| 13 | </Box> |
| 14 | <Box style={{display:'inline-block', verticalAlign:'middle'}}> |
| 15 | <Typography variant="h5">{this.props.conversation.getDisplayName()}</Typography> |
| 16 | <Typography variant="subtitle1">{this.props.conversation.getId()}</Typography> |
| 17 | </Box> |
| 18 | </Box> |
| 19 | <Divider orientation="horizontal" /> |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 20 | { |
| 21 | this.props.messages.map((message, index) => { |
| 22 | /*DUMMY_DATA.map((message, index) => {*/ |
| 23 | return ( |
| 24 | <Message key={index} username={message.senderId} text={message.text} /> |
| 25 | ) |
| 26 | })} |
| 27 | </div> |
| 28 | ) |
| 29 | } |
| 30 | } |
| 31 | |
| 32 | export default MessageList |