FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/ContactsList/index.tsx

import List from '@mui/material/List';
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 { makeStyles } from '@material-ui/core'
import { useState } from 'react';
import  shortid  from 'shortid';

import { contacts } from './contacts'

const useStyles = makeStyles({
  list: {
    width: '100%',
    maxHeight: '890px',
    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_iconAvatar: {
    marginRight:10
  },
})

const  ChatsList = () => {
  const [selectedIndex, setSelectedIndex] = useState<number>(1);

  const classes = useStyles()

  const handleListItemClick = (e: React.SyntheticEvent<Element, Event>, i: number) => {
    console.log(i,'index','selected chat in chat bar',e)
    setSelectedIndex(i);
  }

  const data = new Date(2022, 3, 8).toLocaleString("en-US", {
    year:'numeric',
    month: 'short',
    day: 'numeric'
  });

  const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
  const slicedWord = (word: string, max: number, from: number = 0) =>
    word.length < max ? word.slice(from) : word.slice(from, max)

  return (
    <List
        className={classes.list} component="nav"
        aria-label="main mailbox folders">
         {contacts && contacts.map(({name,lastName,avatarUrl}: any,i:number) =>
          <ListItemButton
          key={shortid.generate()}
          selected={selectedIndex === i}
          onClick={(e) => handleListItemClick(e, i)}
          >
          <ListItemIcon className={classes.listItem_iconAvatar}>
            <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
                 sx={{ background: '#f0c712', width: 54, height: 54 }}>
                 {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
              </Avatar>
          </ListItemIcon> 
          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={data} />        
        </ListItemButton>)}
      </List>
  );
}

export default ChatsList