ChatPage.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. import { useEffect, useState} from 'react';
  2. import {Button, Box} from '@mui/material';
  3. import TextareaAutosize from '@mui/material/TextareaAutosize';
  4. import { MessageForm } from './messageForm/MessegaForm';
  5. import { UserInfo } from './userInfo/UserInfo';
  6. import { store } from '../../store';
  7. import { removeToken, isPrivatChat, privateMessage} from '../../reducers/userDataReducer'
  8. import { useDispatch, useSelector } from 'react-redux';
  9. import {getSocket} from'../../reducers/socketReducer';
  10. import { sendMessage, storeMessage, fileMessage } from '../../reducers/messageReducer';
  11. import { editMessage } from '../../reducers/messageReducer';
  12. import { SwitchButton } from './SwitchButton';
  13. import { MessageEditorMenu } from './MessageEditorMenu.jsx';
  14. import imgBtn from '../../assets/img/gg.png';
  15. import imgBtnPhoto from '../../assets/img/photo.png'
  16. import './chatPage.scss';
  17. import WebcamCapture from './service/webCam/WebcamCapture';
  18. import useSound from 'use-sound';
  19. import getNotif from '../../assets/sendSound.mp3'
  20. import { PrivateChat } from './privateChat/PrivateChat';
  21. import { PrivatChatHeader } from './privateChat/PrivatChatHeader';
  22. export const ChatPage = () => {
  23. const SOCKET_EVENTS = ['allmessages', 'usersOnline', 'allDbUsers']
  24. const dispatch = useDispatch();
  25. const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
  26. const user = useSelector(state => state.getUserSocketReducer.socketUserData)
  27. const socket = useSelector(state => state.getUserSocketReducer.socket)
  28. const editOldMessage = useSelector(state => state.messageReducer.editMessage)
  29. let showUserInfoBox = useSelector(state => state.messageReducer.showUserInfoBox)// || localStorage.getItem('showBox');
  30. const toUser = useSelector(state => state.userDataReducer.toUser)
  31. const chatId = useSelector(state => state.userDataReducer.toUser.socketId)
  32. const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
  33. const [message, setMessage] = useState({message: ''});
  34. const [isUserTyping, setUserTyping] = useState([]);
  35. const [isCamActiv, setisCamActiv] = useState(false);
  36. const [showSpinner, setshowSpinner] = useState(false);
  37. const [loadingPercentage, setLoadPercentage] = useState(0)
  38. const isTabletorMobile = (window.screen.width < 730);
  39. const [play] = useSound(getNotif, {volume: 0.005});
  40. const axiosConfig = {
  41. headers: {
  42. "Content-type": "multipart/form-data"
  43. },
  44. onUploadProgress: (progress) => {
  45. const {loaded, total} = progress;
  46. const loadStatus = Math.floor(loaded * 100 / total);
  47. setLoadPercentage(loadStatus)
  48. if(loadStatus == 100) {
  49. setshowSpinner(false)
  50. }
  51. }}
  52. const webcamEventHandler = async () => {
  53. let stream = null;
  54. try {
  55. stream = await navigator.mediaDevices.getUserMedia({ video: { width: 300 }});
  56. if (stream){
  57. setisCamActiv(!isCamActiv)
  58. }
  59. } catch(err) {
  60. console.log(err)
  61. }
  62. setisCamActiv(!isCamActiv) // test camera
  63. }
  64. const sendPrivateMessage = () => {
  65. socket.emit("private message", {
  66. fromUser: user,
  67. message: message.message,
  68. to: chatId,
  69. toUser
  70. })
  71. }
  72. useEffect(() => {
  73. if(socket) {
  74. socket.on('writing', (data) => {
  75. setUserTyping(data)
  76. setTimeout(() => setUserTyping([]), 500 )
  77. })
  78. socket.on("private message", ({ content, from }) => {
  79. console.log(content, from)
  80. });
  81. }
  82. }, [])
  83. useEffect(() => {
  84. if(token){
  85. ['allmessages', 'usersOnline', 'allDbUsers'].map(event => dispatch(getSocket(event))) //use const SOCKETS EVENT
  86. console.log('socket events')
  87. }
  88. }, [token, editOldMessage, showUserInfoBox])
  89. return (
  90. <div className='rootContainer'>
  91. <Box className = {isTabletorMobile?'mobileRootBox':'rootBox'}>
  92. <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
  93. sx = {showUserInfoBox ? {
  94. transform: "translateX(100%)",
  95. display: "none"
  96. }: { }}>
  97. <UserInfo/>
  98. { isTabletorMobile ? <SwitchButton/> : null}
  99. <Button
  100. style={isTabletorMobile ?
  101. {
  102. maxHeight:'20px',
  103. maxWidth: '15px',
  104. fontSize: '10px',
  105. marginLeft: '25px',
  106. marginRight: '10px'}
  107. :{margin:'10px 5px'}}
  108. variant="contained"
  109. onClick={()=> {
  110. localStorage.removeItem('token');
  111. dispatch(removeToken());
  112. socket.disconnect();
  113. }}>
  114. Logout
  115. </Button>
  116. </Box>
  117. <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
  118. {isCamActiv ?
  119. <div>
  120. <Button
  121. variant="contained"
  122. component="label"
  123. onClick = {() => webcamEventHandler()}
  124. >
  125. close camera
  126. </Button>
  127. <WebcamCapture />
  128. </div>
  129. :
  130. ""}
  131. {isPrivatChat? <PrivateChat/> : <MessageForm/>}
  132. {isUserTyping.isTyping && (isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
  133. <Box
  134. component="form"
  135. onSubmit = {e => {
  136. e.preventDefault()
  137. if (message.message.length){
  138. isPrivatChat? sendPrivateMessage() : dispatch(sendMessage({user, socket}));
  139. isPrivatChat && dispatch(getSocket('allmessages'))
  140. isPrivatChat &&dispatch(editMessage({editMessage: ''}))
  141. setMessage({message: ''})
  142. play()
  143. }
  144. }}
  145. sx={(isTabletorMobile)?{
  146. display: 'flex',
  147. margin: '10px 2px'}
  148. :{
  149. display: 'flex',
  150. margin: '20px 5px'}
  151. }>
  152. <Button
  153. disabled={showSpinner}
  154. variant="contained"
  155. component="label"
  156. sx = {showSpinner?
  157. {
  158. minWidth: 'auto'}
  159. :
  160. {
  161. minWidth: 'auto',
  162. backgroundImage:'url(' + imgBtn + ')' ,
  163. backgroundPosition: 'center',
  164. backgroundRepeat: "no-repeat",
  165. backgroundSize: '20px 20px'
  166. }}
  167. style = {{color: 'green'}}
  168. >
  169. <input
  170. onChange={e =>{
  171. setshowSpinner(true)
  172. dispatch(fileMessage({files: e.target.files, axiosConfig}))
  173. }}
  174. type="file"
  175. multiple
  176. hidden
  177. />
  178. {showSpinner? loadingPercentage : ""}
  179. </Button>
  180. <Button
  181. variant="contained"
  182. component="label"
  183. sx = {{
  184. minWidth: 'auto',
  185. backgroundImage:'url(' + imgBtnPhoto + ')' ,
  186. backgroundPosition: 'center',
  187. backgroundRepeat: "no-repeat",
  188. backgroundSize: '20px 20px'
  189. }}
  190. onClick = {() => webcamEventHandler()}
  191. >
  192. </Button>
  193. <TextareaAutosize
  194. id="outlined-basic"
  195. label="Type a message..."
  196. variant="outlined"
  197. value={message.message}
  198. placeholder='type you message...'
  199. minRows={2}
  200. maxRows={4}
  201. className='textArea'
  202. onKeyPress={(e) => {
  203. if (e.key === "Enter") {
  204. e.preventDefault();
  205. dispatch(sendMessage({user, socket}))
  206. dispatch(getSocket('allmessages'))
  207. dispatch(editMessage({editMessage: ''}))
  208. setMessage({message: ''})
  209. }
  210. }}
  211. onChange={e => {
  212. dispatch(storeMessage({message: e.target.value}))
  213. socket.emit('userWriting');
  214. setMessage({message: e.target.value})}
  215. }
  216. // onFocus={ e => {
  217. // if (isTabletorMobile) {
  218. // e.target.className = 'focus'
  219. // }
  220. // }}
  221. // onBlur={e=> {
  222. // e.target.className = 'blur'
  223. // }}
  224. />
  225. <Button
  226. variant="contained"
  227. type='submit'
  228. disabled={user?.isMutted || !message.message.length}
  229. style={{width: '20%'}}
  230. >
  231. Send
  232. </Button>
  233. </Box>
  234. </Box>
  235. </Box>
  236. </div>
  237. )
  238. }