123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- import { useEffect, useState, useMemo, useRef, Fragment} from 'react';
- import { MessageForm } from './messageForm/MessageForm';
- import {Button,Avatar, Box} from '@mui/material';
- import { UserInfo } from './userInfo/UserInfo';
- import { dateFormat } from './utils/dateFormat';
- import {io} from 'socket.io-client';
- import './chatPage.scss';
- import { scrollToBottom } from './utils/scrollToBottom';
- import { banUser } from './service/banUser';
- import { muteUser } from './service/muteUser';
- import {sendMessage} from './service/sendMessage';
- import { store } from '../../store';
- import { removeToken } from '../../actions/actions';
- import { useDispatch } from 'react-redux';
- export const ChatPage = () => {
-
- const [socket, setSocket] = useState(null);
- const [messages, setMessages] = useState([])
- const [user, setUser] = useState({})
- const [usersOnline, setUsersOnline] = useState([])
- const [allUsers, setAllUsers] = useState([])
- const randomColor = require('randomcolor');
- const endMessages = useRef(null);
- const token = localStorage.getItem('token');
- const dispatch = useDispatch();
- useEffect(() => {
- if(token){
-
- try {
- setSocket(io.connect(
- process.env.REACT_APP_SERVER_URL || 'http://localhost:5000',
- {auth: {token}})
- )
- } catch (error) {
- console.log(error)
- }
- }
- }, [token])
- useEffect(() => {
- if(socket){
- socket.on('connected', (data) => {
- setUser(data);
- }).on('error', (e) => {
- console.log('On connected', e)
- });
- socket.on('allmessages', (data) => {
- setMessages(data)
- }).on('error', (e) => {
- console.log('allmessages', e)
- });
- socket.on('usersOnline', (data) => {
- setUsersOnline(data)
- }).on('error', (e) => {
- console.log(e)
- });
- socket.on('allDbUsers', (data) => {
- setAllUsers(data);
- }).on('error', (e) => {
- console.log(e)
- });
- socket.on('disconnect', (data) => {
- if(data === 'io server disconnect') {
- socket.disconnect();
- store.dispatch(removeToken());
- }
- }).on('error', (e) => {
- console.log('error token', e)
- });
- socket.on('message', (data) => {
- setMessages((messages) => [...messages, data] )
- }).on('error', (e) => {
- console.log(e)
- });
-
- }
- // return () => {
- // socket.off('connected');
- // socket.off('allmessages');
- // }
- }, [socket])
- useEffect(() => {
- scrollToBottom(endMessages)
- }, [messages]);
- let userColor = useMemo(() => randomColor(),[]);//color for myavatar
- return (
- <div className='rootContainer'>
- <Box
- sx={{
- display: 'flex',
- height: '100vh'
- }}>
- <Box
- sx={{
- display: 'flex',
- flexGrow:'2',
- flexDirection: 'column',
- }}>
- <Box className='messageBox'>
- {
- messages.map((item, i) =>
- <Fragment key={i} >
- <Avatar
- sx={
- (item.userName == user.userName)
- ?
- {
- alignSelf: 'flex-end',
- fontSize: 10,
- width: '60px',
- height: '60px',
- color:'black',
- backgroundColor: userColor
- }
- :
- {
- backgroundColor: (usersOnline.map(current =>{
- if(item.userName == current.userName ) {
- return current.color
- }
-
- } )),
- fontSize: 10,
- width: '60px',
- height: '60px',
- color:'black'
- }
- }>
- {item.userName}
- </Avatar>
- <div
- key={item._id}
- onClick = {(e) => {
- if(e.target.className.includes('myMessage')){
- e.currentTarget.className += ' editMessage'
- }
- }}
- className={
- (item.userName ==user.userName)
- ?
- 'message myMessage'
- :
- 'message'}
- >
- <p>{item.text}</p>
- <div
- style={{fontStyle:'italic',
- color: 'grey',
- fontSize: 14}}>
- {dateFormat(item).time}
- </div>
- <div
- style={{fontStyle:'italic',
- fontSize: 12,
- color: 'grey'}}>
- {dateFormat(item).year}
- </div>
- </div>
-
- </Fragment>
- )}
- <div ref={endMessages}></div>
-
- </Box>
- <MessageForm
- data = {user}
- sendMessage = {data => sendMessage(data, socket)}>
- </MessageForm>
- </Box>
- <Box
- className='usersBox'
- sx={{
- overflow: 'scroll',
- }}>
- <Button
- sx={{margin:'10px 5px'}}
- variant="outlined"
- onClick={(e)=> {
- socket.disconnect()
- dispatch(removeToken())
- }}>
- Logout
- </Button>
- <UserInfo
- data = {user.userName}
- color={userColor}/>
- {
- user.isAdmin
- ?
- allUsers.map((item) =>
- <div
- key={item._id}
- className='online'>
- <div style={
- {color: (usersOnline.map(current =>{
- if(item.userName == current.userName ) {
- return current.color
- }
-
- }))}}>{item.userName}</div>
- <div>
- <Button
- variant="contained"
- onClick={()=>{
- muteUser(item.userName, item.isMutted, socket)
- }}
- sx={{
- margin:'3px',
- height: '25px'
- }}>
- {item.isMutted
- ?
- 'unmute'
- : 'mute'}
- </Button>
- <Button
- variant="contained"
- onClick={()=>{
- banUser(item.userName, item.isBanned, socket)
- }}
- sx={{
- margin:'3px',
- height: '25px'
- }}>
- {item.isBanned
- ? 'unban'
- : 'ban'}
- </Button>
- </div>
- {
- usersOnline.map((user, i) =>{
- if(item.userName == user.userName){
- return <span key={i} style={{color: 'green'}}>online</span>
- }
- })
- }
- </div>)
- :
- usersOnline.map((item, i) =>
- <div
- key={i}
- className='online'>
- <div style={{color: item.color}}>
- {item.userName}
- </div>
- <span style={{color: 'green'}}>
- online
- </span>
- </div>)
- }
- </Box>
- </Box>
- </div>
- )
- }
|