UserInfo.jsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import {Button,Avatar} from '@mui/material';
  2. import { useSelector } from 'react-redux';
  3. import { banUser } from '../service/banUser';
  4. import Input from '@mui/material/Input';
  5. import { muteUser } from '../service/muteUser';
  6. import './userInfo.scss';
  7. import { useDispatch } from 'react-redux';
  8. import { getUserAvatar } from '../../../reducers/userDataReducer';
  9. import { useEffect, useState } from 'react';
  10. import { store } from '../../../store';
  11. export const UserInfo = () => {
  12. const PC_AVATAR_STYLE = {
  13. bgcolor: 'grey',
  14. width: '100px',
  15. height: '100px',
  16. fontSize: 14,
  17. margin: '20px auto',
  18. cursor: 'pointer'
  19. };
  20. const MOBILE_AVATAR_STYLE = { margin: '5px auto'};
  21. const [displayType, setDisplayType] = useState('none');
  22. const dispatch = useDispatch();
  23. const loadAvatarHandler = () => {
  24. setDisplayType('block')
  25. setTimeout(() => {
  26. setDisplayType('none')
  27. }, 4000)
  28. }
  29. const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
  30. const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
  31. const user = useSelector(state => state.getUserSocketReducer.socketUserData)
  32. const usersOnline = [...new Set(useSelector(state => state.getUserSocketReducer.usersOnline))];//Set?
  33. const socket = useSelector(state => state.getUserSocketReducer.socket)
  34. const isTabletorMobile = (window.screen.width < 730);
  35. let userAvatarUrl = SERVER_URL + user.avatar;
  36. const inputHandler = (e) => {
  37. const file = e.target.files[0]
  38. dispatch(getUserAvatar(file))
  39. setDisplayType('none')
  40. }
  41. return (
  42. <>
  43. <Avatar
  44. sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
  45. onClick={() => loadAvatarHandler()}
  46. src={userAvatarUrl} >
  47. </Avatar>
  48. <input
  49. type="file"
  50. accept="image/png, image/jpeg"
  51. name='file'
  52. style = {{
  53. display: displayType
  54. }}
  55. onChange = {e => inputHandler(e)}
  56. />
  57. {user.isAdmin ?
  58. allUsers.map((item) =>
  59. <div
  60. key={item._id}
  61. className='online'>
  62. <div style={{color: (usersOnline.map(current => {
  63. if(item.userName === current.userName) {
  64. return current.color
  65. }}))
  66. }}>
  67. {item.userName}
  68. </div>
  69. <div>
  70. {(user.userName === item.userName )?
  71. "admin"
  72. :
  73. <>
  74. <Button
  75. variant="contained"
  76. onClick={()=>{
  77. muteUser(item.userName, item?.isMutted, socket)
  78. }}
  79. sx={(isTabletorMobile)
  80. ?
  81. {height: '15px',
  82. maxWidth:'20px'}:
  83. {
  84. margin:'3px',
  85. height: '25px'}}>
  86. {item.isMutted
  87. ?
  88. 'unmute'
  89. : 'mute'}
  90. </Button>
  91. <Button
  92. variant="contained"
  93. onClick={()=>{
  94. banUser(item.userName, item.isBanned, socket)
  95. }}
  96. sx={(isTabletorMobile)
  97. ?
  98. {height: '15px',
  99. margin:'2px'} :
  100. {
  101. margin:'3px',
  102. height: '25px'}}
  103. >
  104. {item?.isBanned ? 'unban' : 'ban'}
  105. </Button>
  106. </>}
  107. </div>
  108. {usersOnline.map((user, i) => {
  109. if(item.userName === user.userName){
  110. return <span key={i} style={{color: 'green'}}>online</span>
  111. }})}
  112. </div>)
  113. :
  114. usersOnline.map((item, i) =>
  115. <div
  116. key={i}
  117. className='online'>
  118. <div style={{color: item.color}}>
  119. {item.userName}
  120. </div>
  121. <span style={{color: 'green'}}>
  122. online
  123. </span>
  124. </div>)
  125. }
  126. </>
  127. )
  128. }