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

import ListItemButton from '@mui/material/ListItemButton';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import { useDispatch,useSelector } from 'react-redux';

import { actionIsOpen } from '../../../../../redux/controlApp/action'
import { getChat } from '../../../../../redux/chats/selector'
import { firstLetter,slicedWord,timeStamp } from '../../../../../helpers'

const Credentials = () => {
  const dispatch = useDispatch()
  const chat = useSelector(getChat)
  const { name,lastName,avatarUrl,color,updatedAt } = chat
  return (
    <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
      <ListItemIcon >
        <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
              sx={{ background: color, width: 44, height: 44 }}>
              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
      </ListItemIcon> 
      <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
        secondary={`last seen ${timeStamp(updatedAt)}`} />
    </ListItemButton>
  )
}

export default Credentials