123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- import List from '@mui/material/List';
- import ListItem from '@mui/material/ListItem';
- import ListItemText from '@mui/material/ListItemText';
- import ListItemAvatar from '@mui/material/ListItemAvatar';
- import Avatar from '@mui/material/Avatar';
- import Divider from '@mui/material/Divider';
- import { CopyToClipboard } from 'react-copy-to-clipboard';
- import { makeStyles } from '@material-ui/core'
- import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
- import { timeStampEU,firstLetter,copied } from '../../../../../../../../helpers'
- import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
- const useStyles = makeStyles({
- listItem: {
- '&:hover': {
- backgroundColor: '#f0f0f0',
- }
- },
- })
- const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
- const classes = useStyles()
- const filteredMessagesMemo = messagesMemo.filter(({type}) => type === 'text')
- return filteredMessagesMemo.length > 0 ?(
- <List>
- {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
- <div key={createdAt}>
- <CopyToClipboard onCopy={() => copied()} text={message}>
- <ListItem alignItems="flex-start" className={classes.listItem}>
- <ListItemAvatar>
- <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
- sx={{ background: color, width: 38, height: 38,marginRight:2}}>
- {`${firstLetter(name)}${firstLetter(lastName)}`}
- </Avatar>
- </ListItemAvatar>
- <ListItemText style={{ wordBreak: 'break-word' }} primary={message}
- secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
- />
- </ListItem>
- </CopyToClipboard>
- <Divider variant="inset" />
- </div>)}
- </List>
- ): <AlertInfo name='You do not have Text yet!'/>
- }
- export default TextList
|