import {Button,Avatar} from '@mui/material';
import { useSelector } from 'react-redux';
import { banUser } from '../service/banUser';
import Input from '@mui/material/Input';
import { muteUser } from '../service/muteUser';
import './userInfo.scss';
import { useDispatch } from 'react-redux';
import { getUserAvatar } from '../../../reducers/userDataReducer';
import { useEffect, useState } from 'react';
import { store } from '../../../store';
export const UserInfo = () => {
const PC_AVATAR_STYLE = {
bgcolor: 'grey',
width: '100px',
height: '100px',
fontSize: 14,
margin: '20px auto',
cursor: 'pointer'
};
const MOBILE_AVATAR_STYLE = { margin: '5px auto'};
const [displayType, setDisplayType] = useState('none');
const dispatch = useDispatch();
const loadAvatarHandler = () => {
setDisplayType('block')
setTimeout(() => {
setDisplayType('none')
}, 4000)
}
const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
const user = useSelector(state => state.getUserSocketReducer.socketUserData)
const usersOnline = [...new Set(useSelector(state => state.getUserSocketReducer.usersOnline))];//Set?
const socket = useSelector(state => state.getUserSocketReducer.socket)
const isTabletorMobile = (window.screen.width < 730);
let userAvatarUrl = SERVER_URL + user.avatar;
const inputHandler = (e) => {
const file = e.target.files[0]
dispatch(getUserAvatar(file))
setDisplayType('none')
}
return (
<>