fix online users om frontend and add visual dot to avatars

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -1,4 +1,4 @@
-import {Avatar, Box} from '@mui/material';
+import { Avatar, Box, StyledBadge } from '@mui/material';
 import { dateFormat } from '../utils/dateFormat';
 import { useSelector } from 'react-redux';   
 import { Fragment, useRef, useEffect, useMemo} from 'react';
@@ -6,21 +6,23 @@ import { scrollToBottom } from '../utils/scrollToBottom';
 import { useDispatch } from 'react-redux';
 import { editMessage } from '../../../reducers/messageReducer';
 import { TimeAgoMessage } from '../TimeAgoMessage';
+import { StyledAvatar } from './StyledAvatar';
+
+
+
 
 export const MessageForm = () => {
 
-    const randomColor = require('randomcolor');  
     const dispatch = useDispatch();
     const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
 
     const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
-    const userColor = useMemo(() => randomColor(),[]);
+    const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
 
     const endMessages = useRef(null);
 
-    
 
     useEffect(() => {
         scrollToBottom(endMessages)
@@ -31,30 +33,27 @@ export const MessageForm = () => {
                 {
                 startMessages.map((item, i) =>
                     <div key={i} className={ 
-                        (item.userName === user.userName)? 'message myMessage' :'message'}>    
-                        {console.log(item)}
-                        <Avatar 
-                      
-                            src= {SERVER_URL + item?.user?.avatar}
-                            sx={
-                                (item.userName == user.userName)
-                                ? 
-                                {
-                                    alignSelf: 'flex-end',
-                                    backgroundColor: userColor
-                                }
-                                :
-                                {
-                                    backgroundColor:  (usersOnline.map(current => {
-                                        if(item.userName === current.userName ) {
-                                            return current.color
-                                        }
-                                    } )),
-                                }
-                            }> 
-                            {item?.userName.slice(0, 1)}
-                        </Avatar>   
+                        (item.userName === user.userName)? 'message myMessage' :'message'}>   
+                        <StyledAvatar
+                            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
+                             variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
+                                   
+                            >
+                            <Avatar 
 
+                                src= {SERVER_URL + item?.user?.avatar}
+                                sx={
+                                    (item.userName == user.userName)
+                                    ? 
+                                    {
+                                        alignSelf: 'flex-end',
+                                    }
+                                    :
+                                    {}
+                                }> 
+                                {item?.userName.slice(0, 1)}
+                            </Avatar>   
+                        </StyledAvatar>
                         <div 
                             key={item._id}
                             onClick = {(e) => {

frontend/src/components/chatPage/messageForm/StyledAvatar.jsx

@@ -0,0 +1,31 @@
+import { styled } from '@mui/material/styles';
+import Badge from '@mui/material/Badge';
+
+export const StyledAvatar = styled(Badge)(({ theme }) => ({
+    '& .MuiBadge-badge': {
+      backgroundColor: '#44b700',
+      color: '#44b700',
+      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+      '&::after': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        animation: 'ripple 1.2s infinite ease-in-out',
+        border: '1px solid currentColor',
+        content: '""',
+      },
+    },
+    '@keyframes ripple': {
+      '0%': {
+        transform: 'scale(.8)',
+        opacity: 1,
+      },
+      '100%': {
+        transform: 'scale(2.4)',
+        opacity: 0,
+      },
+    },
+  }));

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

@@ -1,13 +1,13 @@
 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 { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { store } from '../../../store';
+import { getSocket } from '../../../reducers/socketReducer';
 
 
 export const UserInfo = () => {
@@ -38,13 +38,17 @@ export const UserInfo = () => {
 
     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 usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline);
     const socket = useSelector(state => state.getUserSocketReducer.socket)
     const isTabletorMobile = (window.screen.width < 730);
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
 
     let userAvatarUrl = SERVER_URL + (storeUserAvatar || user.avatar);
 
+
+    const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
+    
+    
     const inputHandler = (e) => {
         const file = e.target.files[0]
         dispatch(getUserAvatar(file))
@@ -53,8 +57,12 @@ export const UserInfo = () => {
     //add delete avatar function later 
 
 
+  
+
+
     return (
             <>  
+                <h4> Hello, {user.userName} </h4>
                 <Avatar
                     sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
@@ -70,17 +78,12 @@ export const UserInfo = () => {
                         onChange = {e => inputHandler(e)}
                        />
                     {user.isAdmin ? 
-                        allUsers.map((item) =>
+                        allUsers.map((item, key) =>
                             <div 
                                 key={item._id}
                                 className='online'>
-                                <div style={{color: (usersOnline.map(current => {
-                                                if(item.userName === current.userName) {
-                                                    return current.color
-                                                }}))
-                                            }}>
-
-                                            {item.userName}
+                                <div>
+                                    {item.userName}
                                 </div>
 
                                 <div>
@@ -125,10 +128,11 @@ export const UserInfo = () => {
                                     </>}
                             
                                 </div>
-                                    {usersOnline.map((user, i) => {
-                                        if(item.userName === user.userName){
-                                            return <span key={i} style={{color: 'green'}}>online</span>
-                                        }})}
+                                    {
+                                    userNamesOnlineSet.has(item.userName)? 
+                                    <span key={key} style={{color: 'green'}}>online</span>
+                                    : ''
+                                    }
                             </div>) 
                     :
                     usersOnline.map((item, i) =>

frontend/src/reducers/socketReducer.js

@@ -30,11 +30,6 @@ const connectToSocket = (event) => {
                                     case 'allmessages':
                                         store.dispatch(getAllMessages(data));
                                         break;
-                            
-                                    case 'usersOnline':
-                                        store.dispatch(getUsersOnline(data));
-                                        break;
-
                                     case 'allDbUsers':
                                         store.dispatch(getAllUsers(data));
                                         break;
@@ -49,6 +44,9 @@ const connectToSocket = (event) => {
                                 store.dispatch(removeToken()); 
                                 localStorage.removeItem('token');
                                 })
+                            .on('usersOnline', (data) => {
+                                    store.dispatch(getUsersOnline(data))
+                                })
                             .on('disconnect', (data) => {
                                 if( data === 'io server disconnect') {
                                     socket.disconnect();