index.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import List from '@mui/material/List';
  2. import ListItem from '@mui/material/ListItem';
  3. import ListItemText from '@mui/material/ListItemText';
  4. import ListItemAvatar from '@mui/material/ListItemAvatar';
  5. import Avatar from '@mui/material/Avatar';
  6. import Divider from '@mui/material/Divider';
  7. import { CopyToClipboard } from 'react-copy-to-clipboard';
  8. import { makeStyles } from '@material-ui/core'
  9. import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
  10. import { timeStampEU,firstLetter,copied } from '../../../../../../../../helpers'
  11. import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
  12. const useStyles = makeStyles({
  13. listItem: {
  14. '&:hover': {
  15. backgroundColor: '#f0f0f0',
  16. }
  17. },
  18. })
  19. const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
  20. const classes = useStyles()
  21. const filteredMessagesMemo = messagesMemo.filter(({type}) => type === 'text')
  22. return filteredMessagesMemo.length > 0 ?(
  23. <List>
  24. {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
  25. <div key={createdAt}>
  26. <CopyToClipboard onCopy={() => copied()} text={message}>
  27. <ListItem alignItems="flex-start" className={classes.listItem}>
  28. <ListItemAvatar>
  29. <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
  30. sx={{ background: color, width: 38, height: 38,marginRight:2}}>
  31. {`${firstLetter(name)}${firstLetter(lastName)}`}
  32. </Avatar>
  33. </ListItemAvatar>
  34. <ListItemText style={{ wordBreak: 'break-word' }} primary={message}
  35. secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
  36. />
  37. </ListItem>
  38. </CopyToClipboard>
  39. <Divider variant="inset" />
  40. </div>)}
  41. </List>
  42. ): <AlertInfo name='You do not have Text yet!'/>
  43. }
  44. export default TextList