index.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import List from '@mui/material/List';
  2. import { makeStyles } from '@material-ui/core'
  3. import { useEffect,useRef,useCallback,useMemo } from 'react';
  4. import { useSelector, useDispatch } from 'react-redux';
  5. import AlertInfo from '../../../reusableComponents/AlertInfo'
  6. import ChatItem from './ChatItem';
  7. import { notification,playNotificationWithoutPermission,sortByRecent } from '../../../../helpers'
  8. import { getStateMemo } from '../../../../redux/chats/selector'
  9. import { getChatMemo } from '../../../../redux/chat/selector'
  10. import { getSilentMode } from '../../../../redux/authorization/selector'
  11. import { asyncGetChatById } from '../../../../redux/chat/operations'
  12. import { asyncGetChats } from '../../../../redux/chats/operations';
  13. import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../redux/control/action'
  14. import { TChats,TChat } from '../../../../typescript/redux/chats/types';
  15. import { prodBaseURL,refreshAppTime } from '../../../../helpers';
  16. const useStyles = makeStyles({
  17. list: {
  18. width: '100%',
  19. maxHeight: '93vh',
  20. overflowY: 'scroll',
  21. '&::-webkit-scrollbar': {
  22. width: '0.4em'
  23. },
  24. '&::-webkit-scrollbar-track': {
  25. boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
  26. webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
  27. backgroundColor: '#eceeec',
  28. },
  29. '&::-webkit-scrollbar-thumb': {
  30. backgroundColor: '#ccc8c8',
  31. },
  32. "&::-webkit-scrollbar-thumb:focus": {
  33. backgroundColor: "#959595",
  34. },
  35. "&::-webkit-scrollbar-thumb:active": {
  36. backgroundColor: "#959595",
  37. },
  38. },
  39. })
  40. interface IChatsList {
  41. sort: boolean,
  42. }
  43. const ChatsList = ({sort}:IChatsList) => {
  44. const classes = useStyles()
  45. const dispatch = useDispatch()
  46. const chatsRef = useRef<any>(null)
  47. const silentMode = useSelector(getSilentMode)
  48. const { total, chats } = useSelector(getStateMemo)
  49. const chat = useSelector(getChatMemo)
  50. const handleListItemClick = (companionId: string) => {
  51. dispatch(actionRightIsOpen(''))
  52. dispatch(actionOpenPinned(false))
  53. dispatch(asyncGetChatById(companionId))
  54. if(chat.companionId !== companionId) setTimeout(() => dispatch(actionScrollChat(true)), 500)
  55. }
  56. const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {
  57. e.stopPropagation()
  58. dispatch(actionRightIsOpen(''))
  59. dispatch(actionOpenPinned(false))
  60. dispatch(asyncGetChatById(companionId))
  61. setTimeout(() => dispatch(actionScrollChat(true)), 500)
  62. }
  63. const handleNotification = useCallback((companionId: string) => {
  64. dispatch(asyncGetChatById(companionId))
  65. dispatch(actionOpenPinned(false))
  66. dispatch(actionRightIsOpen(''))
  67. setTimeout(() => dispatch(actionScrollChat(true)), 500)
  68. }, [dispatch])
  69. const sortedChats = useMemo((): TChats => {
  70. const pinnedArr: any[] = []
  71. const sortedAndFilteredArr: TChats = sortByRecent(chats, sort)
  72. .filter((el: TChat) => {
  73. if (el.pinned === true) {
  74. pinnedArr.push(el)
  75. return undefined
  76. } else return el
  77. })
  78. return [...pinnedArr,...sortedAndFilteredArr]
  79. },[chats,sort])
  80. useEffect(() => {
  81. const handleReset = () => dispatch(asyncGetChats())
  82. handleReset()
  83. const idInterval = setInterval(handleReset, refreshAppTime);
  84. return () => clearInterval(idInterval);
  85. }, [dispatch]);
  86. useEffect(() => {
  87. if (chatsRef.current) {
  88. chatsRef.current.forEach(({total,seen}: any,i:number) => {
  89. const oldDifferent = total - seen
  90. const chat = sortedChats[i]
  91. if(chat === undefined) return
  92. const newDifferent = chat.total - chat.seen
  93. if (newDifferent > oldDifferent && !chat.mute) {
  94. !silentMode&&playNotificationWithoutPermission(`${prodBaseURL}/telegramReceive.mp3`)
  95. notification(chat.name, () => handleNotification(chat.companionId))
  96. }
  97. })
  98. }
  99. chatsRef.current = sortedChats
  100. }, [chat,sortedChats,handleNotification,dispatch,silentMode])
  101. return total !== '0' ? (
  102. <List className={classes.list} component="nav"
  103. aria-label="main mailbox folders">
  104. {sortedChats.map((el) => <ChatItem key={el.number} chat={el}
  105. handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs}
  106. id={el._id} pinned={el.pinned}/>)}
  107. </List>
  108. ):<AlertInfo name='You do not have Chats yet!' />;
  109. }
  110. export default ChatsList