refactoring code and new components

frontend/src/components/chatPage/generalChat/AdminUserInfiButton.jsx

@@ -0,0 +1,88 @@
+import {Button} from '@mui/material';
+import { store } from "../../../store";
+import { privateMessage } from "../../../reducers/userDataReducer";
+import { useSelector } from "react-redux";
+import { banUser } from '../service/banUser';
+import { muteUser } from '../service/muteUser';
+import './userInfo.scss';
+
+
+export const AdminUserInfiButton = ({item, i}) => {
+
+
+    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
+    const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline);
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+    const isTabletorMobile = (window.screen.width < 730);
+    const chatId = useSelector(state => state.userDataReducer.chatId)
+    const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
+    const arrUsersOnline = usersOnline.map( i => i?.userName)
+    const userNamesOnlineSet =  new Set(arrUsersOnline)
+
+
+    return(
+        <div 
+            key={item._id}
+            className={isPrivatChat&&(chatId === item._id)? 'online active' :'online' }                       
+            onClick={() => {
+                console.log(item._id, user._id)
+                store.dispatch(privateMessage({chatId: item._id}))
+                socket.emit('private message', {
+                    user,
+                    to: item._id,
+                    })
+            }}>
+                <div>
+                    {item.userName}
+                </div>
+
+                <div>
+                    {(user.userName === item.userName )?   
+                        "admin"
+                    :   
+                    <>      
+                        <Button
+                            variant="contained"
+                            onClick={()=>{
+                                muteUser(item.userName, item?.isMutted, socket)
+                            }}
+                            sx={(isTabletorMobile) 
+                                ? 
+                                {height: '15px',
+                                    maxWidth:'20px'}: 
+                                {
+                                margin:'3px',
+                                height: '25px'}}>
+
+                                {item.isMutted
+                                ? 
+                                'unmute'
+                                : 'mute'}
+                        </Button>
+
+                        <Button
+                            variant="contained"
+                            onClick={()=>{ 
+                                banUser(item.userName, item.isBanned, socket)
+                            }}
+                            sx={(isTabletorMobile) 
+                                ? 
+                                {height: '15px',
+                                margin:'2px'} : 
+                                {
+                                margin:'3px',
+                                height: '25px'}}
+                        >
+                                {item?.isBanned ? 'unban' : 'ban'}
+                        </Button> 
+                    </>}
+            
+                </div>
+                    {
+                    userNamesOnlineSet.has(item.userName)? 
+                    <span key={i} style={{color: 'green'}}>online</span>
+                    : ''
+                    }
+        </div>
+    )
+}

frontend/src/components/chatPage/generalChat/UserInfoButton.jsx

@@ -0,0 +1,53 @@
+import { store } from "../../../store";
+import { privateMessage } from "../../../reducers/userDataReducer";
+import { useSelector } from "react-redux";
+import { StyledAvatar } from "../messageForm/StyledAvatar";
+import { Avatar } from "@mui/material";
+
+export const UserInfoButton = ({item, i}) => {
+
+    console.log(item, i)
+
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL
+
+    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+    const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
+    const chatId = useSelector(state => state.userDataReducer.chatId)
+
+
+    return (
+        <div 
+        className={isPrivatChat&&(chatId === item._id)? 'online active' :'online' }                       
+        onClick={() => {
+            console.log(item._id, user._id)
+            store.dispatch(privateMessage({chatId: item._id}))
+            socket.emit('private message', {
+                user,
+                to: item._id,
+              })
+        }
+        }
+        >  
+        
+            <div style={{color: item.color}}>
+            <StyledAvatar  key={i}  sx={{ marginRight:2}}
+>
+                <Avatar 
+                    src= {SERVER_URL + '/'+ item?.avatar}
+                    sx={{ alignSelf: 'flex-end'}}
+                    
+                    > 
+                    {item?.userName.slice(0, 1)}
+                </Avatar>   
+
+
+            </StyledAvatar>
+                {item.userName}  
+            </div>
+            <span style={{color: 'green'}}>
+                online
+            </span>
+    </div>
+    )
+}

frontend/src/components/chatPage/generalChat/userInfo.scss

@@ -0,0 +1,12 @@
+.userAvatar {
+    background-color: grey;
+    width: 100px;
+    height: 100px;
+    font-size: 14;
+    margin: 20px auto;
+}
+
+.active {
+    background-color:rgb(30, 8, 62);
+}
+

frontend/src/components/chatPage/userInfo/UserInfo.jsx

@@ -6,9 +6,9 @@ import './userInfo.scss';
 import { useDispatch } from 'react-redux';
 import { getUserAvatar, privateMessage } from '../../../reducers/userDataReducer';
 import { useState, useEffect } from 'react';
-import { store } from '../../../store';
-import { getSocket } from '../../../reducers/socketReducer';
-import { StyledAvatar } from '../messageForm/StyledAvatar';
+import { UserInfoButton } from '../generalChat/UserInfoButton';
+import { AdminUserInfiButton } from '../generalChat/AdminUserInfiButton';
+import './userInfo.scss';
 
 
 export const UserInfo = () => {
@@ -43,16 +43,12 @@ export const UserInfo = () => {
     const socket = useSelector(state => state.getUserSocketReducer.socket)
     const isTabletorMobile = (window.screen.width < 730);
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
-    const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
     const chatId = useSelector(state => state.userDataReducer.chatId)
 
-
-
-
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
-    
-    const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
+    const arrUsersOnline = usersOnline.map( i => i?.userName)
+    const userNamesOnlineSet =  new Set(arrUsersOnline)
 
     const inputHandler = (e) => {
         const file = e.target.files[0]
@@ -72,126 +68,25 @@ export const UserInfo = () => {
                 </Avatar>  
                 
                 <input
-                        type="file"
-                        accept="image/png, image/jpeg"
-                        name='file'
-                        style = {{
+                    type="file"
+                    accept="image/png, image/jpeg"
+                    name='file'
+                    style = {{
                             display: displayType
                         }}
-                        onChange = {e => inputHandler(e)}
-                       />
-                    {user.isAdmin && !isTabletorMobile ? 
-                        allUsers.map((item, key) =>
-                        (user.userName !== item.userName) && <div 
-                                key={item._id}
-                                className='online'
-                                onClick={() => console.log(item._id)}
-                                >
-                                {/* <StyledAvatar
-
-                                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
-                                    variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
-                                        
-                                    >
-                                    <Avatar 
-                                       
-                                        src= {SERVER_URL + '/'+ item?.user?.avatar}
-                                        sx={ {alignSelf: 'flex-end'}}
-                                        
-                                        > 
-                                        {item?.userName.slice(0, 1)}
-                                    </Avatar>   
+                    onChange = {e => inputHandler(e)}/>
 
 
-                                    </StyledAvatar> */}
-                                <div>
-                                    {item.userName}
-                                </div>
-
-                                <div>
-                                    {(user.userName === item.userName )?   
-                                        "admin"
-                                    :   
-                                    <>      
-                                        <Button
-                                            variant="contained"
-                                            onClick={()=>{
-                                                muteUser(item.userName, item?.isMutted, socket)
-                                            }}
-                                            sx={(isTabletorMobile) 
-                                                ? 
-                                                {height: '15px',
-                                                 maxWidth:'20px'}: 
-                                                {
-                                                margin:'3px',
-                                                height: '25px'}}>
-
-                                                {item.isMutted
-                                                ? 
-                                                'unmute'
-                                                : 'mute'}
-                                        </Button>
-
-                                        <Button
-                                            variant="contained"
-                                            onClick={()=>{ 
-                                                banUser(item.userName, item.isBanned, socket)
-                                            }}
-                                            sx={(isTabletorMobile) 
-                                                ? 
-                                                {height: '15px',
-                                                margin:'2px'} : 
-                                                {
-                                                margin:'3px',
-                                                height: '25px'}}
-                                       >
-                                                {item?.isBanned ? 'unban' : 'ban'}
-                                        </Button> 
-                                    </>}
-                            
-                                </div>
-                                    {
-                                    userNamesOnlineSet.has(item.userName)? 
-                                    <span key={key} style={{color: 'green'}}>online</span>
-                                    : ''
-                                    }
-                            </div>) 
-                    :
-                     !isTabletorMobile && usersOnline.map((item, i) =>
-                     (user.userName !== item.userName) &&
-                      <div 
-                            key={i}
-                            className={isPrivatChat&&(chatId==user._id)? 'online active' :'online' }                       
-                            onClick={() => {
-                                console.log(item.userName)
-                                store.dispatch(privateMessage(user._id))
-                                socket.emit('private message', user )
-                            }
-                            }
-                            >  
-                            
-                                <div style={{color: item.color}}>
-                                <StyledAvatar    sx={{ marginRight:2}}
->
-                                    <Avatar 
-                                        key={i} 
-                                        src= {SERVER_URL + '/'+ item?.avatar}
-                                        sx={{ alignSelf: 'flex-end'}}
-                                        
-                                        > 
-                                        {item?.userName.slice(0, 1)}
-                                    </Avatar>   
-
-
-                                    </StyledAvatar>
-                                    {item.userName}
-                                    
-                                </div>
-                                <span style={{color: 'green'}}>
-                                    online
-                                </span>
-                        </div>)
-                }
+                    {user.isAdmin && !isTabletorMobile ? 
+                            allUsers.map((item, i) =>
+                            (user.userName !== item?.userName) 
+                                && <AdminUserInfiButton item={item} i={i} key={i}/>) 
+                        :
+                            !isTabletorMobile 
+                            && usersOnline.map((item, i) =>
+                                    (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                   
+                            )
+                    }
             </>
         )
 }

frontend/src/components/chatPage/userInfo/userInfo.scss

@@ -7,5 +7,6 @@
 }
 
 .active {
-    background-color:rgb(12, 40, 77);
-}
+    background-color:rgb(30, 8, 62);
+}
+