83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Badge from '@mui/material/Badge';
|
|
import { useChat } from '../../contexts/ChatContext';
|
|
|
|
const ChatRoomList: React.FC = () => {
|
|
const { rooms, selectedRoomToken, selectRoom } = useChat();
|
|
|
|
return (
|
|
<Box sx={{ overflow: 'auto', flex: 1 }}>
|
|
<List disablePadding>
|
|
{rooms.map((room) => {
|
|
const isSelected = room.token === selectedRoomToken;
|
|
return (
|
|
<ListItem key={room.token} disablePadding>
|
|
<ListItemButton
|
|
selected={isSelected}
|
|
onClick={() => selectRoom(room.token)}
|
|
sx={{
|
|
py: 1,
|
|
px: 1.5,
|
|
'&.Mui-selected': {
|
|
backgroundColor: 'primary.light',
|
|
color: 'primary.contrastText',
|
|
'&:hover': {
|
|
backgroundColor: 'primary.main',
|
|
},
|
|
'& .MuiListItemIcon-root': {
|
|
color: 'primary.contrastText',
|
|
},
|
|
'& .MuiListItemText-secondary': {
|
|
color: 'primary.contrastText',
|
|
opacity: 0.7,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<ListItemIcon sx={{ minWidth: 40 }}>
|
|
<Badge
|
|
badgeContent={room.unreadMessages}
|
|
color="primary"
|
|
invisible={room.unreadMessages === 0}
|
|
>
|
|
<Avatar
|
|
sx={{
|
|
width: 32,
|
|
height: 32,
|
|
fontSize: '0.75rem',
|
|
bgcolor: isSelected ? 'primary.main' : 'action.hover',
|
|
color: isSelected ? 'primary.contrastText' : 'text.primary',
|
|
}}
|
|
>
|
|
{room.displayName.substring(0, 2).toUpperCase()}
|
|
</Avatar>
|
|
</Badge>
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={room.displayName}
|
|
primaryTypographyProps={{ noWrap: true, variant: 'subtitle2' }}
|
|
secondary={
|
|
room.lastMessage
|
|
? `${room.lastMessage.author}: ${room.lastMessage.text}`
|
|
: undefined
|
|
}
|
|
secondaryTypographyProps={{ noWrap: true, variant: 'caption' }}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
);
|
|
})}
|
|
</List>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ChatRoomList;
|