PrivateChat.jsx 6.2 KB

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