UserInfo.jsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import {Button,Avatar} from '@mui/material';
  2. import { useSelector } from 'react-redux';
  3. import { banUser } from '../service/banUser';
  4. import { muteUser } from '../service/muteUser';
  5. import './userInfo.scss';
  6. import { useDispatch } from 'react-redux';
  7. import { getUserAvatar } from '../../../reducers/userDataReducer';
  8. import { useState, useEffect } from 'react';
  9. import { store } from '../../../store';
  10. import { getSocket } from '../../../reducers/socketReducer';
  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 = useSelector(state => state.getUserSocketReducer.usersOnline);
  33. const socket = useSelector(state => state.getUserSocketReducer.socket)
  34. const isTabletorMobile = (window.screen.width < 730);
  35. const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
  36. let userAvatarUrl = SERVER_URL + (storeUserAvatar || user.avatar);
  37. const userNamesOnlineSet = new Set(usersOnline.map( i => i.userName))
  38. const inputHandler = (e) => {
  39. const file = e.target.files[0]
  40. dispatch(getUserAvatar(file))
  41. setDisplayType('none')
  42. }
  43. return (
  44. <>
  45. <h4> Hello, {user.userName} </h4>
  46. <Avatar
  47. sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
  48. onClick={() => loadAvatarHandler()}
  49. src={userAvatarUrl} >
  50. </Avatar>
  51. <input
  52. type="file"
  53. accept="image/png, image/jpeg"
  54. name='file'
  55. style = {{
  56. display: displayType
  57. }}
  58. onChange = {e => inputHandler(e)}
  59. />
  60. {user.isAdmin ?
  61. allUsers.map((item, key) =>
  62. <div
  63. key={item._id}
  64. className='online'>
  65. <div>
  66. {item.userName}
  67. </div>
  68. <div>
  69. {(user.userName === item.userName )?
  70. "admin"
  71. :
  72. <>
  73. <Button
  74. variant="contained"
  75. onClick={()=>{
  76. muteUser(item.userName, item?.isMutted, socket)
  77. }}
  78. sx={(isTabletorMobile)
  79. ?
  80. {height: '15px',
  81. maxWidth:'20px'}:
  82. {
  83. margin:'3px',
  84. height: '25px'}}>
  85. {item.isMutted
  86. ?
  87. 'unmute'
  88. : 'mute'}
  89. </Button>
  90. <Button
  91. variant="contained"
  92. onClick={()=>{
  93. banUser(item.userName, item.isBanned, socket)
  94. }}
  95. sx={(isTabletorMobile)
  96. ?
  97. {height: '15px',
  98. margin:'2px'} :
  99. {
  100. margin:'3px',
  101. height: '25px'}}
  102. >
  103. {item?.isBanned ? 'unban' : 'ban'}
  104. </Button>
  105. </>}
  106. </div>
  107. {
  108. userNamesOnlineSet.has(item.userName)?
  109. <span key={key} style={{color: 'green'}}>online</span>
  110. : ''
  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. }