FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/index.tsx

import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux'
import React, { useState } from 'react'
import MenuList from '@mui/material/MenuList';
import Avatar from '@mui/material/Avatar';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import Search from './Search'
import AlertInfo from "../../../../../reusableComponents/AlertInfo";
import { getMessages } from '../../../../../../redux/messages/selector'
import { format,timeStamp,firstLetter,slicedWord } from '../../../../../../helpers'
import shortid from 'shortid';


const useStyles = makeStyles({
  containerAbsolute: {
    position: 'absolute',
    top: 58,
    width: 506,
    borderLeft: 'solid 0.5px #9c9c9c',
    maxHeight: '905px',
    minHeight: '905px',
    overflowY: 'scroll',
    overflowX: 'hidden',
    backgroundColor: '#ffffff'
  },
  listItem: {
    marginBottom: 5,
    paddingBottom: 5,
    borderBottom: 'solid 1px #ececec',
  },
  message: {
    width: '100%',
    wordBreak: 'break-word',
    textAlign: "left",
    padding:'0 10px',
    color:'#363636'
  },
})

const SearchList= () => {
    const classes = useStyles()
    const messages = useSelector(getMessages)
    const [value, setValue] = useState<string>('')
    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(format(e.target.value))
    const filteredMessages = () => messages.filter((el) =>
        el.message.toLowerCase().includes(value.toLowerCase()))

return (
   <div>
     <Search handleSearch={handleSearch}/>
     <div className={classes.containerAbsolute}>
        {messages.length > 0 ?
            <MenuList >
               {filteredMessages().map(({ name, lastName, avatarUrl, color, message, createdAt }) =>
                <div className={classes.listItem}> 
                   <MenuItem style={{marginBottom:5}} key={shortid.generate()} onClick={() => console.log('clicked message in rightList')}>
                     <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
                      sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
                           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                       </Avatar>
                    <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
                     ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={timeStamp(createdAt)} />
                   </MenuItem>
                   <div className={classes.message}>{message}</div>
                 </div> )}
            </MenuList> :
            <AlertInfo name='You do not have messages yet!' />}
     </div>
   </div>
  )
}

export default SearchList