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. const [isEditing, setIsEditing] = useState(false)
  32. const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
  33. const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
  34. const messages = startMessages.concat(newMessages)
  35. const [play] = useSound(notifSound);
  36. console.log(messages)
  37. useEffect(() => {
  38. if (!isEditing) {
  39. scrollToBottom((endMessages))
  40. }
  41. }, [startMessages, messages, newMessages]);
  42. useEffect(()=> {
  43. if(newMessages.length > 0 && newMessages[newMessages.length-1].userName !== user.userName){
  44. // play()
  45. }
  46. }, [newMessages])
  47. return (
  48. <Box className='messageBox'>
  49. {
  50. messages.map((item, i) =>
  51. <div key={i + 1} className={
  52. (item.fromUser === user._id)? 'message myMessage' :'message'}
  53. onClick = {(e) => {
  54. console.log(e.target)
  55. if(e.target.closest("div").className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
  56. e.currentTarget.className += ' editMessage'
  57. dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id}))
  58. setIsEditing(true)
  59. }
  60. }}
  61. >
  62. {storeMessageId === item._id ? <MessageEditorMenu />: ""}
  63. <span
  64. style={{'alignItems': 'center',
  65. marginLeft: 5,
  66. fontStyle: 'italic',
  67. fontWeight: 800
  68. }}
  69. > {item.fromUser}</span>
  70. <div
  71. key={i}
  72. className={
  73. (item.fromUser === user._id)? 'message myMessage' :'message'}>
  74. {
  75. item.text.match(regYoutube) ?
  76. <iframe
  77. width="280"
  78. height="160"
  79. style={{'maxWidth': "90%"}}
  80. src={`https://www.youtube.com/embed/`+ (item.text.match(regYoutube)[1])}
  81. title="YouTube video player"
  82. allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  83. allowFullScreen>
  84. </iframe>
  85. :
  86. (item.file && item.fileType && item.fileType.split('/')[0] !== 'image') ?
  87. <div style={{'display': 'flex', 'alignItems': 'center'}} >
  88. <a href={SERVER_URL + '/' +item.file} download>
  89. <Button
  90. variant="contained"
  91. component="label"
  92. sx = {{
  93. minWidth: 'auto',
  94. minHeight: '25px',
  95. backgroundImage:'url(' + imgBtn + ')' ,
  96. backgroundPosition: 'center',
  97. backgroundRepeat: "no-repeat",
  98. backgroundSize: '15px 20px',
  99. backgroundColor: '#d3d3d3'
  100. }}
  101. >
  102. </Button>
  103. </a>
  104. <p style={{'marginLeft': '15px'}} >{item.text}</p>
  105. </div>
  106. :
  107. <p>{item.text}</p>
  108. }
  109. {
  110. (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //need to fix for other type files
  111. ?
  112. <img width={'auto'} style={{'maxWidth': "90%"}} src={ SERVER_URL + '/' + item.file} alt={'error load image'}/>
  113. :
  114. ''
  115. }
  116. </div>
  117. {isEditiedMessage && <i>Edited</i>}
  118. <div className={
  119. (item.fromUser === user._id)? 'myDate' :'date'}>
  120. {dateFormat(item).time}
  121. </div>
  122. </div>
  123. )}
  124. <div ref={endMessages}></div>
  125. </Box>
  126. )
  127. }