Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 1 | import { GroupRounded as GroupIcon } from '@mui/icons-material'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 2 | import List from '@mui/material/List'; |
| 3 | import ListSubheader from '@mui/material/ListSubheader'; |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 4 | import Typography from '@mui/material/Typography'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 5 | import { useEffect } from 'react'; |
| 6 | |
| 7 | import Conversation from '../../../model/Conversation'; |
ervinanoh | 34eb947 | 2022-09-13 04:20:28 -0400 | [diff] [blame] | 8 | import { useAppSelector } from '../../redux/hooks'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 9 | import ConversationListItem from './ConversationListItem'; |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 10 | |
simon | 6b9ddfb | 2022-10-03 00:04:50 -0400 | [diff] [blame] | 11 | type ConversationListProps = { |
| 12 | accountId: string; |
| 13 | conversations: Conversation[]; |
| 14 | search?: Conversation; |
| 15 | }; |
| 16 | export default function ConversationList(props: ConversationListProps) { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 17 | const { refresh } = useAppSelector((state) => state.app); |
ervinanoh | 34eb947 | 2022-09-13 04:20:28 -0400 | [diff] [blame] | 18 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 19 | useEffect(() => { |
| 20 | console.log('refresh list'); |
| 21 | }, [refresh]); |
ervinanoh | 34eb947 | 2022-09-13 04:20:28 -0400 | [diff] [blame] | 22 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 23 | return ( |
| 24 | <div className="rooms-list"> |
| 25 | <List> |
| 26 | {props.search instanceof Conversation && ( |
| 27 | <div> |
| 28 | <ListSubheader>Public directory</ListSubheader> |
| 29 | <ConversationListItem conversation={props.search} /> |
| 30 | <ListSubheader>Conversations</ListSubheader> |
| 31 | </div> |
| 32 | )} |
| 33 | {props.conversations.map((conversation) => ( |
| 34 | <ConversationListItem key={conversation.getId()} conversation={conversation} /> |
| 35 | ))} |
| 36 | {props.conversations.length === 0 && ( |
| 37 | <div className="list-placeholder"> |
| 38 | <GroupIcon color="disabled" fontSize="large" /> |
| 39 | <Typography className="subtitle" variant="subtitle2"> |
| 40 | No conversation yet |
| 41 | </Typography> |
| 42 | </div> |
| 43 | )} |
| 44 | </List> |
| 45 | </div> |
| 46 | ); |
Adrien Béraud | 995e802 | 2021-04-08 13:46:51 -0400 | [diff] [blame] | 47 | } |