fix onlineUsers and styles

backend/app.js

@@ -208,7 +208,7 @@ io.use( async (socket, next) => {
     
     const usersOnline = [];
     sockets.map(sock => usersOnline.push(sock.user))
-
+   
    
     try {
         const user = jwt.verify(token, TOKEN_KEY);
@@ -239,17 +239,17 @@ io.on("connection", async (socket) => {
     const userName = socket.user.userName;
     const sockets = await io.fetchSockets();
     const dbUser = await getOneUser(userName);
-    const exist = sockets.find(current => current.user.userName == socket.user.userName)
     const usersOnline = sockets.map(sock => sock.user)
 
-
+const onUser = []
     const usersOnlineID = usersOnline.map(users => Object.values(users)[0])
     const userSet = new Set(usersOnlineID)
+    for (let id of userSet) {
+        const userFromDb = await User.findById(id)
+        onUser.push(userFromDb)
+    }
 
-    console.log(userSet)
-
-
-    io.emit('usersOnline', usersOnline); // send array online users  
+    io.emit('usersOnline', onUser); // send array online users  
 
     socket.emit('connected', dbUser); //socket.user
   
@@ -307,7 +307,7 @@ io.on("connection", async (socket) => {
             const filteredUsersOnline = usersOnline.filter(user => exist.user.id !== user.id)
         
            
-           socket.emit('usersOnline', filteredUsersOnline);
+           io.emit('usersOnline', filteredUsersOnline);
 
             // const sockets = await io.fetchSockets();
             // io.emit('usersOnline', sockets.map(sock => sock.user));

frontend/src/components/chatPage/chatPage.scss

@@ -130,15 +130,15 @@
     overflow: scroll;
     border-radius: 10px;
     border: 2px solid grey; 
-    background-color:rgb(243, 243, 243);
+    background-color:rgb(30, 45, 52);
     .online {
-        border-radius: 5px;
+        border-radius: 3px;
         padding: 5px;
-        border: 2px solid grey; 
+        border:2px solid rgb(255, 255, 255); 
         margin-bottom: 5px;
         cursor: pointer;
-        background-color:rgb(247, 233, 233);
         font-weight: 700;
+        color:aliceblue;
 
     }
 }

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

@@ -8,6 +8,7 @@ import { getUserAvatar } from '../../../reducers/userDataReducer';
 import { useState, useEffect } from 'react';
 import { store } from '../../../store';
 import { getSocket } from '../../../reducers/socketReducer';
+import { StyledAvatar } from '../messageForm/StyledAvatar';
 
 
 export const UserInfo = () => {
@@ -58,7 +59,7 @@ export const UserInfo = () => {
 
     return (
             <>  
-                <h4> Hello, {user.userName} </h4>
+                <h4 style={{color:'white'}}> Hello, {user.userName} </h4>
                
                 <Avatar
                     sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
@@ -78,11 +79,28 @@ export const UserInfo = () => {
                        />
                     {user.isAdmin && !isTabletorMobile ? 
                         allUsers.map((item, key) =>
-                            <div 
+                        (user.userName !== item.userName) && <div 
                                 key={item._id}
                                 className='online'
-                                onClick={() => console.log(item.id)}
+                                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>   
+
+
+                                    </StyledAvatar> */}
                                 <div>
                                     {item.userName}
                                 </div>
@@ -137,13 +155,29 @@ export const UserInfo = () => {
                             </div>) 
                     :
                      !isTabletorMobile && usersOnline.map((item, i) =>
-                        <div 
+                     (user.userName !== item.userName) &&
+                      <div 
                             key={i}
                             className='online'                        
-                            onClick={() => console.log(item.id)}
->  
+                            onClick={() => console.log(item)}
+                            >  
+                            
                                 <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