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