Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | import Message from './Message' |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 2 | import React, { useEffect } from 'react' |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 3 | import { Box, Divider, Typography } from '@mui/material' |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 4 | import ConversationAvatar from './ConversationAvatar' |
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) { |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 7 | const displayName = props.conversation.getDisplayName() |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 8 | const messages = props.conversation.getMessages() |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 9 | |
| 10 | useEffect(() => { |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 11 | if (!props.loading) |
| 12 | props.loadMore() |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 13 | }, [props.conversation.getId()]) |
| 14 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 15 | return ( |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 16 | <React.Fragment> |
| 17 | <Box className="conversation-header"> |
Adrien Béraud | 0561d3c | 2021-05-02 11:23:54 -0400 | [diff] [blame] | 18 | <Box style={{ margin: 16, flexShrink: 0 }}> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 19 | <ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} /> |
| 20 | </Box> |
Adrien Béraud | 0561d3c | 2021-05-02 11:23:54 -0400 | [diff] [blame] | 21 | <Box style={{ flex: "1 1 auto", overflow: 'hidden' }}> |
| 22 | <Typography className="title" variant="h6">{displayName}</Typography> |
| 23 | <Typography className="subtitle" variant="subtitle1" >{props.conversation.getId()}</Typography> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 24 | </Box> |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 25 | <Divider orientation="horizontal" /> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 26 | </Box> |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 27 | <div className="message-list"> |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 28 | {messages.map((message) => <Message key={message.id} message={message} />)} |
| 29 | <div style={{ border: "1px solid transparent" }}/> |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 30 | </div> |
| 31 | </React.Fragment> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 32 | ) |
Adrien Béraud | af09a46 | 2021-04-15 18:02:29 -0400 | [diff] [blame] | 33 | } |