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 { asyncGetChats } from '../../../../redux/chats/operations'
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 } from '../../../../typescript/redux/chats/types';
import { timeStampFilter } 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,
  date: any,
  value: string
}

const ChatsList = ({sort,date,value}:IChatsList) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const ref = useRef<any>(null)
  const [sortedChats, setSortedChats] = useState<TChats>([]);
  const { total, chats } = useSelector(getStateMemo)
  const chat = useSelector(getChatMemo)
  const isOpen = useSelector(getIsOpen)
  const filteredChats = useCallback((arr: TChats) => arr.filter((el) => {
    if (!date) {
      return el
    } else if (timeStampFilter(date) === timeStampFilter(el.lastMessageCreatedAt ?
      el.lastMessageCreatedAt : el.createdAt)) {
      return el
    }
  }),[date])

  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(() => {
    dispatch(asyncGetChats())
    const handleReset = () => dispatch(asyncGetChats())
    const idInterval = setInterval(handleReset, 3000);
    return () => clearInterval(idInterval);
  }, [dispatch]);

  useEffect(() => {
    const handleNotification= (companionId: string) => {
      dispatch(asyncStartChatById(companionId))
      dispatch(actionScroll(true))
    }
    const sorted = filteredChats(sortByRecent(chats,sort))
    setSortedChats(sorted)
    if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId))dispatch(actionRemoveChat())
    if (ref.current) {
      ref.current.forEach(({total,seen}: any,i:number) => {
        const oldDifferent = total - seen
        const chat = sorted[i]
        if(chat === undefined) return
        const newDifferent = chat.total - chat.seen
        if (newDifferent > oldDifferent && !chat.mute) {
          playNotificationWithoutPermission('http://localhost:3000/recive.mp3')
          notification(chat.name,() => handleNotification(chat.companionId))
        } 
      })
    }
      ref.current = sorted
  }, [chats, chat,sort,filteredChats,dispatch]) 

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

export default ChatsList