ChatPage.jsx 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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} from '../../reducers/userDataReducer'
  8. import { useDispatch, useSelector } from 'react-redux';
  9. import {getSocket} from'../../reducers/socketReducer';
  10. import { sendMessage, storeMessage } from '../../reducers/messageReducer';
  11. import { editMessage } from '../../reducers/messageReducer';
  12. import { SwitchButton } from './SwitchButton';
  13. import { MessageEditorMenu } from './MessageEditorMenu.jsx';
  14. import './chatPage.scss';
  15. export const ChatPage = () => {
  16. const SOCKET_EVENTS = process.env.REACT_APP_SERVER_URL || ['allmessages', 'usersOnline', 'allDbUsers']
  17. const dispatch = useDispatch();
  18. const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
  19. const user = useSelector(state => state.getUserSocketReducer.socketUserData)
  20. const socket = useSelector(state => state.getUserSocketReducer.socket)
  21. const editOldMessage = useSelector(state => state.messageReducer.editMessage)
  22. let showUserInfoBox = useSelector(state => state.messageReducer.showUserInfoBox)// || localStorage.getItem('showBox');
  23. const [message, setMessage] = useState({message: ''});
  24. const [isUserTyping, setUserTyping] = useState([]);
  25. const isTabletorMobile = (window.screen.width < 730);
  26. useEffect(() => {
  27. if(socket) {
  28. socket.on('writing', (data) => {
  29. setUserTyping(data)
  30. setTimeout(() => setUserTyping([]), 500 )
  31. })
  32. }
  33. }, [socket])
  34. useEffect(() => {
  35. if(token){
  36. SOCKET_EVENTS.map(event => dispatch(getSocket(event)))
  37. }
  38. }, [token, editOldMessage, showUserInfoBox])
  39. return (
  40. <div className='rootContainer'>
  41. <Box className = 'rootBox'>
  42. { isTabletorMobile ? <SwitchButton/> : null}
  43. <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
  44. <MessageForm/>
  45. {isUserTyping.isTyping && (isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
  46. <Box
  47. component="form"
  48. onSubmit = {e => {
  49. e.preventDefault()
  50. dispatch(sendMessage({user, socket}))
  51. dispatch(getSocket('allmessages'))
  52. dispatch(editMessage({editMessage: ''}))
  53. setMessage({message: ''})
  54. }}
  55. sx={(isTabletorMobile)?{
  56. display: 'flex',
  57. margin: '10px 2px'}
  58. :{
  59. display: 'flex',
  60. margin: '20px 5px'}
  61. }>
  62. <TextareaAutosize
  63. id="outlined-basic"
  64. label="Type a message..."
  65. variant="outlined"
  66. value={message.message || editOldMessage}
  67. placeholder='type you message...'
  68. minRows={3}
  69. maxRows={4}
  70. className='textArea'
  71. onKeyPress={(e) => {
  72. if (e.key === "Enter") {
  73. e.preventDefault();
  74. dispatch(sendMessage({user, socket}))
  75. dispatch(getSocket('allmessages'))
  76. dispatch(editMessage({editMessage: ''}))
  77. setMessage({message: ''})
  78. }
  79. }}
  80. onChange={e => {
  81. dispatch(storeMessage({message: e.target.value}))
  82. socket.emit('userWriting');
  83. setMessage({message: e.target.value})}
  84. }
  85. />
  86. <Button
  87. variant="contained"
  88. type='submit'
  89. disabled={user?.isMutted}
  90. style={{width: '20%'}}
  91. >
  92. Send
  93. </Button>
  94. </Box>
  95. </Box>
  96. <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
  97. sx = {showUserInfoBox ? {
  98. transform: "translateX(100%)",
  99. display: "none"
  100. }: {}}>
  101. <Button
  102. sx={isTabletorMobile ?
  103. {
  104. maxHeight:'25px',
  105. maxWidth: '20px'}
  106. :{margin:'10px 5px'}}
  107. variant="outlined"
  108. onClick={()=> {
  109. localStorage.removeItem('token');
  110. dispatch(removeToken());
  111. socket.disconnect();
  112. }}>
  113. Logout
  114. </Button>
  115. <UserInfo/>
  116. </Box>
  117. </Box>
  118. </div>
  119. )
  120. }