ChatPage.jsx 10 KB

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