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

import List from '@mui/material/List';
import { makeStyles } from '@material-ui/core'
import { useState,useEffect,useRef,useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import AlertInfo from '../../../reusableComponents/AlertInfo'
import ChatItem from './ChatItem';
import { notification,playNotificationWithoutPermission,sortByRecent } from '../../../../helpers'
import { getStateMemo } from '../../../../redux/chats/selector'
import { getChatMemo } from '../../../../redux/chat/selector'
import { asyncStartChatById } from '../../../../redux/chat/operations'
import { actionRemoveChat } from '../../../../redux/chat/action'
import { actionScroll, actionIsOpen } from '../../../../redux/control/action'
import { getIsOpen } from '../../../../redux/control/selector';
import { TChats,TChat } from '../../../../typescript/redux/chats/types';
import { timeStampFilter,prodBaseURL } from '../../../../helpers';

const useStyles = makeStyles({
  list: {
    width: '100%',
    maxHeight: '93vh',
    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",
    },
  },
})

interface IChatsList {
  sort: boolean,
}

const ChatsList = ({sort}:IChatsList) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const chatsRef = useRef<any>(null)
  const [sortedChats, setSortedChats] = useState<TChats>([]);
  const { total, chats } = useSelector(getStateMemo)
  const chat = useSelector(getChatMemo)
  const isOpen = useSelector(getIsOpen)
  const handleListItemClick = (companionId: string) => {
    isOpen&&dispatch(actionIsOpen(''))
    dispatch(asyncStartChatById(companionId))
  }

  const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {
    e.stopPropagation()
    dispatch(actionScroll(true))
    isOpen&&dispatch(actionIsOpen(''))
    dispatch(asyncStartChatById(companionId))
  }

  useEffect(() => {
    const handleNotification= (companionId: string) => {
      dispatch(asyncStartChatById(companionId))
      dispatch(actionScroll(true))
    }
    setSortedChats(sortByRecent(chats, sort))
    if (chat.companionId&&!sortedChats.find((el) => el.companionId === chat.companionId)) dispatch(actionRemoveChat())
    if (chatsRef.current) {
      chatsRef.current.forEach(({total,seen}: any,i:number) => {
        const oldDifferent = total - seen
        const chat = sortedChats[i]
        if(chat === undefined) return
        const newDifferent = chat.total - chat.seen
        if (newDifferent > oldDifferent && !chat.mute) {
          playNotificationWithoutPermission(`${prodBaseURL}/receive.mp3`)
          notification(chat.name,() => handleNotification(chat.companionId))
        } 
      })
    }
      chatsRef.current = sortedChats
  }, [chats, chat,sort,sortedChats, dispatch])

  return total !== '0' ? (
    <List className={classes.list} component="nav"
      aria-label="main mailbox folders">
      {sortedChats.map((el) => <ChatItem key={el.number} chat={el}  
      handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs} />)}
    </List>
  ):<AlertInfo name='You do not have Chats yet!' />;
}

export default ChatsList