import List from '@mui/material/List'; import { makeStyles } from '@material-ui/core' import { useEffect } from 'react'; import { useSelector,useDispatch } from 'react-redux'; import AlertInfo from '../../../reusableComponents/AlertInfo' import ContactItem from './ContactItem'; import { getState } from '../../../../redux/contacts/selector' import { asyncGetContacts } from '../../../../redux/contacts/operations' import { asyncStartChatById } from '../../../../redux/chat/operations' import { getIsOpen } from '../../../../redux/control/selector' import { actionIsOpen } from '../../../../redux/control/action'; import { handleSort,timeStampFilter } from '../../../../helpers'; import { TContacts,TContact } from '../../../../typescript/redux/contacts/types'; 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 IContactList { value: string, handleClick: any, sort: boolean, date: any } const ContactsList = ({value,handleClick,sort,date} : IContactList) => { const classes = useStyles() const dispatch = useDispatch() const { total, contacts } = useSelector(getState) const isOpen = useSelector(getIsOpen) const filteredContacts = ():TContacts => handleSort('name', contacts, sort).filter((el:TContact) => { const credentials = el.name + ' ' + el.lastName if (!date) { return credentials.toLowerCase().includes(value.toLowerCase()) } else if (credentials.toLowerCase().includes(value.toLowerCase()) && timeStampFilter(date) === timeStampFilter(el.createdAt)) { return el } }) const handleListItemClick = (companionId:string) => { handleClick() isOpen&&dispatch(actionIsOpen('')) dispatch(asyncStartChatById(companionId)) } useEffect(() => { dispatch(asyncGetContacts()) const handleReset = () => isOpen !== 'credentials' &&dispatch(asyncGetContacts()) const idInterval = setInterval(handleReset, 3000); return () => clearInterval(idInterval); }, [dispatch,isOpen]); const arr = filteredContacts() return total !== '0' ? ( {arr.length > 0 ? arr.map((contact) => ) : } ):; } export default ContactsList