add new private message indicator

backend/app.js

@@ -210,7 +210,6 @@ io.use( async (socket, next) => {
     const usersOnline = [];
     sockets.map(sock => usersOnline.push(sock.user))
    
-   
     try {
         const user = jwt.verify(token, TOKEN_KEY);
         const userName = user.userName;

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

@@ -3,7 +3,7 @@ import { privateMessage } from "../../../reducers/userDataReducer";
 import { useSelector } from "react-redux";
 import { StyledAvatar } from "../messageForm/StyledAvatar";
 import { Avatar } from "@mui/material";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useDispatch } from 'react-redux';
 import {selectedUser} from "../../../reducers/dataReducers";
 
@@ -21,13 +21,24 @@ export const UserInfoButton = ({item, i}) => {
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
+    const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
+    const [isPrivate, setIsPrivate] = useState(false)
+
+
+    useEffect(() => {
+        if(newPrivateMessages.text && newPrivateMessages?.sender[0].userName === item.userName){
+         setIsPrivate(!!newPrivateMessages.text)
+         }
+    },[newPrivateMessages])
+   
     return (
         <div 
         className={(item.socketId&&isPrivatChat&&(chatId === item.socketId))? 'online active' :'online' }                       
         onClick={(e) => {
             store.dispatch(selectedUser(item))
             store.dispatch(privateMessage({toUser: item}))
+            setIsPrivate(false) 
             socket.emit('privat chat', {
                 user,
                 to: item.socketId,
@@ -36,13 +47,14 @@ export const UserInfoButton = ({item, i}) => {
             }
         }
         >  
-        
+         {isPrivate && item.userName && <span style={{color:'red'}} > new </span>} 
             <div style={{color: item.color}}>
             <StyledAvatar  key={i}  sx={{ marginRight:2}} 
                            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
                            variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
 
 >
+    
                 <Avatar 
                     src= {SERVER_URL + '/'+ item?.avatar}
                     sx={{ alignSelf: 'flex-end'}}
@@ -51,10 +63,12 @@ export const UserInfoButton = ({item, i}) => {
                     {item?.userName.slice(0, 1)}
                 </Avatar>   
 
+           
 
             </StyledAvatar>
                 {item.userName}  
             </div>
+            
     </div>
     )
 }

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

@@ -25,7 +25,7 @@ export const MessageForm = () => {
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     const storeMessageId = useSelector(state => state.messageReducer.messageId)
     const newMessages = useSelector(state => state.getUserSocketReducer.newMessages)
-
+    
     let endMessages = useRef(null);
     const [isEditing, setIsEditing] = useState(false)   
     const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
@@ -36,7 +36,6 @@ export const MessageForm = () => {
     const [play] = useSound(notifSound);
 
 
-
     useEffect(() => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 

frontend/src/components/chatPage/privateChat/PrivateChat.jsx

@@ -64,7 +64,6 @@ socket.on('send privat messages', (messages)=> {
                 
                     {
                     startMessages.map((item, i) =>
-                    
                         <div key={i + 1} className={ 
                             (item.fromUser === user._id)? 'message myMessage' :'message'}
                             onClick = {(e) => {
@@ -137,7 +136,7 @@ socket.on('send privat messages', (messages)=> {
 
                             <div className={ 
                                 (item.userName === user.userName)? 'myDate' :'date'}>
-                                {dateFormat(item).time}
+                                {dateFormat(item)}
                             </div>
                             {isEditiedMessage && <i>Edited</i>}
                             {/* <div className={ 

frontend/src/reducers/socketReducer.js

@@ -49,7 +49,6 @@ const connectToSocket = (event) => {
                                 store.dispatch(addNewMessage(data))
                                 })
                             .on('private', (data) => {
-                                console.log(data)
                                store.dispatch(addNewPrivateMessage(data))
                                    })
                             .on('ban', (data) => {