PrivateChat.jsx 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import { Avatar, Box, Button} from '@mui/material';
  2. import { dateFormat } from '../utils/dateFormat';
  3. import { useSelector } from 'react-redux';
  4. import { useRef, useEffect, useState} from 'react';
  5. import { scrollToBottom } from '../utils/scrollToBottom';
  6. import { useDispatch } from 'react-redux';
  7. import { editMessage } from '../../../reducers/messageReducer';
  8. import { MessageEditorMenu } from '../MessageEditorMenu.jsx';
  9. import imgBtn from '../../../assets/img/gg.png';
  10. import useSound from 'use-sound';
  11. import notifSound from '../../../assets/get.mp3'
  12. export const PrivateChat = () => {
  13. const dispatch = useDispatch();
  14. const socket = useSelector(state => state.getUserSocketReducer.socket)
  15. const SERVER_URL =process.env.REACT_APP_SERVER_URL
  16. const user = useSelector(state => state.getUserSocketReducer.socketUserData)
  17. const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
  18. const userNamesOnlineSet = new Set(usersOnline.map( i => i.userName))
  19. const storeMessageId = useSelector(state => state.messageReducer.messageId)
  20. const [startMessages, setStartMessages] = useState([])
  21. const [startMessagesFrom, setStartMessagesFrom] = useState([])
  22. let endMessages = useRef(null);
  23. socket.on('send privat messages', (messages)=> {
  24. setStartMessages(messages)
  25. });
  26. const newMessages = [];
  27. socket.on("private message", (message)=> {
  28. console.log(message)
  29. newMessages.push(message)
  30. });
  31. console.log(newMessages)
  32. const [isEditing, setIsEditing] = useState(false)
  33. const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
  34. const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
  35. const messages = startMessages.concat(newMessages)
  36. const [play] = useSound(notifSound);
  37. console.log(messages)
  38. useEffect(() => {
  39. if (!isEditing) {
  40. scrollToBottom((endMessages))
  41. }
  42. }, [startMessages, messages, newMessages]);
  43. useEffect(()=> {
  44. if(newMessages.length > 0 && newMessages[newMessages.length-1].userName !== user.userName){
  45. // play()
  46. }
  47. }, [newMessages])
  48. return (
  49. <Box className='messageBox'>
  50. {
  51. messages.map((item, i) =>
  52. <div key={i + 1} className={
  53. (item.fromUser === user._id)? 'message myMessage' :'message'}
  54. onClick = {(e) => {
  55. console.log(e.target)
  56. if(e.target.closest("div").className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
  57. e.currentTarget.className += ' editMessage'
  58. dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id}))
  59. setIsEditing(true)
  60. }
  61. }}
  62. >
  63. {storeMessageId === item._id ? <MessageEditorMenu />: ""}
  64. <span
  65. style={{'alignItems': 'center',
  66. marginLeft: 5,
  67. fontStyle: 'italic',
  68. fontWeight: 800
  69. }}
  70. > {item.fromUser}</span>
  71. <div
  72. key={i}
  73. className={
  74. (item.fromUser === user._id)? 'message myMessage' :'message'}>
  75. {
  76. item.text.match(regYoutube) ?
  77. <iframe
  78. width="280"
  79. height="160"
  80. style={{'maxWidth': "90%"}}
  81. src={`https://www.youtube.com/embed/`+ (item.text.match(regYoutube)[1])}
  82. title="YouTube video player"
  83. allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  84. allowFullScreen>
  85. </iframe>
  86. :
  87. (item.file && item.fileType && item.fileType.split('/')[0] !== 'image') ?
  88. <div style={{'display': 'flex', 'alignItems': 'center'}} >
  89. <a href={SERVER_URL + '/' +item.file} download>
  90. <Button
  91. variant="contained"
  92. component="label"
  93. sx = {{
  94. minWidth: 'auto',
  95. minHeight: '25px',
  96. backgroundImage:'url(' + imgBtn + ')' ,
  97. backgroundPosition: 'center',
  98. backgroundRepeat: "no-repeat",
  99. backgroundSize: '15px 20px',
  100. backgroundColor: '#d3d3d3'
  101. }}
  102. >
  103. </Button>
  104. </a>
  105. <p style={{'marginLeft': '15px'}} >{item.text}</p>
  106. </div>
  107. :
  108. <p>{item.text}</p>
  109. }
  110. {
  111. (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //need to fix for other type files
  112. ?
  113. <img width={'auto'} style={{'maxWidth': "90%"}} src={ SERVER_URL + '/' + item.file} alt={'error load image'}/>
  114. :
  115. ''
  116. }
  117. </div>
  118. {isEditiedMessage && <i>Edited</i>}
  119. <div className={
  120. (item.fromUser === user._id)? 'myDate' :'date'}>
  121. {dateFormat(item).time}
  122. </div>
  123. </div>
  124. )}
  125. <div ref={endMessages}></div>
  126. </Box>
  127. )
  128. }