PrivateChat.jsx 6.5 KB

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