123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- 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 ContentCopyIcon from '@mui/icons-material/ContentCopy';
- import { makeStyles } from '@material-ui/core'
- import { useEffect,useMemo } from 'react';
- import AlertInfo from '../../../../reusableComponents/AlertInfo';
- import { timeStampEU,firstLetter,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
- import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
- const useStyles = makeStyles({
- container: {
- width: '100%',
- maxHeight: '86vh',
- overflowY: 'scroll',
- '&::-webkit-scrollbar': {
- width: '0.4em'
- },
- '&::-webkit-scrollbar-track': {
- boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
- webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
- backgroundColor: '#eceeec',
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: '#ccc8c8',
- },
- "&::-webkit-scrollbar-thumb:focus": {
- backgroundColor: "#959595",
- },
- "&::-webkit-scrollbar-thumb:active": {
- backgroundColor: "#959595",
- },
- },
- listItem: {
- cursor:'pointer',
- '&:hover': {
- backgroundColor: '#f0f0f0',
- }
- },
- folderIcon: {
- margin: 'auto 0px',
- color: 'rgba(0, 0, 0, 0.5)',
- },
- })
- interface ITextList {
- messagesMemo: TAllMessages,
- value: string,
- date: any,
- setDisabled: React.Dispatch<boolean>,
- sort: boolean,
- handleScrollToTheMessage:(_id:string,companionId:string) => void
- }
- const TextList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: ITextList) => {
- const classes = useStyles()
- const filtered = useMemo(() => {
- return messagesMemo.filter(({type}:{type:string}) => type === 'text')
- }, [messagesMemo])
- const filteredAndSorted = useMemo(() => {
- return filteredMessages(handleSort('createdAt', filtered, sort),date,value)
- },[filtered,sort,date,value])
-
- useEffect(() => {
- setDisabled(filtered.length > 0?false:true)
- }, [filtered, setDisabled])
-
- return (
- <>
- {filteredAndSorted.length > 0 &&
- <List className={classes.container}>
- {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl,_id,companionId }) =>
- <div key={createdAt}>
- <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
- alignItems="flex-start" className={classes.listItem}>
- <ListItemAvatar>
- <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
- sx={{ background: color, width: 40, height: 40}}>
- {`${firstLetter(name)}${firstLetter(lastName)}`}
- </Avatar>
- </ListItemAvatar>
- <ListItemText style={{ wordBreak: 'break-word',marginRight:2 }} primary={message}
- secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
- />
- <ContentCopyIcon className={classes.folderIcon} fontSize='large' />
- </ListItem>
- <Divider variant="inset" />
- </div>)}
- </List>}
- {(value || date) && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
- {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Text yet!'/>}
- </>
- )
- }
- export default TextList
|