import { useEffect, 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 './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 '../../reducers/userDataReducer' import { useDispatch, useSelector } from 'react-redux'; import {getSocket} from'../../reducers/socketReducer'; export const ChatPage = () => { const dispatch = useDispatch(); const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token); const startMessages = useSelector(state => state.getUserSocketReducer.startMessages) const user = useSelector(state => state.getUserSocketReducer.socketUserData) const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline) const allUsers = useSelector(state => state.getUserSocketReducer.allUsers) const randomColor = require('randomcolor'); const endMessages = useRef(null); useEffect(() => { if(token){ dispatch(getSocket()) } }, []) useEffect(() => { scrollToBottom(endMessages) }, [startMessages]); let userColor = useMemo(() => randomColor(),[]);//color for myavatar return (
{item.text}