123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- 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,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,
- 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(`${prodBaseURL}/notifications/receive.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 Chats yet!' />;
- }
- export default ChatsList
|