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