add private messages counter labe

backend/app.js

@@ -267,7 +267,8 @@ io.on("connection", async (socket) => {
 //      const siPrivate = await PrivateMessage.find({toUser: socket.user.id})
 //      console.log(!!siPrivate)
 // }
-console.log(usersInSocket.userName)
+console.log(usersInSocket)
+
 
     io.emit('usersOnline', usersInSocket); // send array online users  
 
@@ -286,7 +287,7 @@ console.log(usersInSocket.userName)
 
 socket.emit('my chats', privateChats)
 
-    socket.emit('connected', dbUser); //socket.user
+    //socket.emit('connected', dbUser); //socket.user
   
     if(socket.user.isAdmin){
          getAllDbUsers(socket); 

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

@@ -3,9 +3,9 @@ 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 { useDispatch } from 'react-redux';
+import { useEffect,useState } from "react";
 import {selectedUser} from "../../../reducers/dataReducers";
+import {isNewPrivateMessages} from "../../../reducers/dataReducers";
 
 export const UserInfoButton = ({item, i}) => {
 
@@ -18,9 +18,24 @@ export const UserInfoButton = ({item, i}) => {
     const chatId = useSelector(state => state.userDataReducer.toUser.socketId)
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
+
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
+
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
+    
+    const newPrivateMessagesArray = useSelector(state => state.getUserSocketReducer.newPrivateMessagesArray)
+    const isNewPrivate = useSelector(state => state.dataReducer.isNewPrivateMessages)
+
+
+const [counter, setCounter] = useState(newPrivateMessagesArray.length)
+
+useEffect(() => {
+    store.dispatch(isNewPrivateMessages(true))
+    console.log('true')
+ } , [newPrivateMessagesArray]);
+
+
 
     return (
         <div 
@@ -28,6 +43,8 @@ export const UserInfoButton = ({item, i}) => {
         onClick={(e) => {
             store.dispatch(selectedUser(item))
             store.dispatch(privateMessage({toUser: item}))
+            store.dispatch(isNewPrivateMessages(false))
+            setCounter(0) 
             socket.emit('privat chat', {
                 user,
                 to: item.socketId,
@@ -51,10 +68,12 @@ export const UserInfoButton = ({item, i}) => {
                     {item?.userName.slice(0, 1)}
                 </Avatar>   
 
-
+  
             </StyledAvatar>
-                {item.userName}  
+                <span> {item.userName}  </span>
+               {isNewPrivate && newPrivateMessagesArray.length > 0 && <span style={{color:'red',position: 'fixed' }} >  {counter}  </span>} 
             </div>
+          
     </div>
     )
 }

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

@@ -11,6 +11,7 @@ import useSound from 'use-sound';
 import { PrivatChatHeader } from './PrivatChatHeader';
 import { privateMessage } from '../../../reducers/userDataReducer';
 import notifSound from '../../../assets/get.mp3'
+import {isNewPrivateMessages} from "../../../reducers/dataReducers";
 import { UserInfoButton } from '../generalChat/UserInfoButton';
 
 //need to fix update wenn message sendet and icon for new private messages
@@ -32,9 +33,9 @@ export const PrivateChat = () => {
 
     let endMessages = useRef(null);
 
-socket.on('send privat messages', (messages)=> {
-    setStartMessages(messages)
-  });
+    socket.on('send privat messages', (messages)=> {
+        setStartMessages(messages)
+    });
   
 
 // bug need to fix
@@ -137,7 +138,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/components/chatPage/userInfo/UserInfo.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import './userInfo.scss';
 import { useDispatch } from 'react-redux';
 import { getUserAvatar } from '../../../reducers/userDataReducer';
-import { useState, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { UserInfoButton } from '../generalChat/UserInfoButton';
 import { AdminUserInfiButton } from '../generalChat/AdminUserInfiButton';
 import { MainChatButtton } from '../generalChat/MainChatButtton';
@@ -57,11 +57,14 @@ export const UserInfo = () => {
         setDisplayType('none')
     }
 
-    console.log(newPrivateMessages)
+   console.log('render userinfo component')
+
 
     // if(socket){
     //     socket.on('my chats', (data)=> console.log('my chats', data))
     // }
+
+
         
     return (
             <>  
@@ -86,7 +89,7 @@ export const UserInfo = () => {
                    
                 <MainChatButtton/>     
 
-                <FindUserBox/>        
+                <FindUserBox/>     
                 
                     { user.isAdmin && !isTabletorMobile ? 
                             allUsers.map((item, i) =>
@@ -95,18 +98,10 @@ export const UserInfo = () => {
                         :
                             !isTabletorMobile 
                             && usersOnline.map((item, i) =>
-                                    (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                   
+                                    (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                
                             )
                     }
-
-                    {
-                    newPrivateMessages.length > 0 
-                        && newPrivateMessages.map((item, i) => 
-                       // <UserInfoButton item = {item} i = {i}  key={i} />
-                       console.log(item)
-                        )
-
-                    }
+               
             </>
         )
 }

frontend/src/components/chatPage/utils/dateFormat.js

@@ -13,18 +13,10 @@ export const dateFormat = (item) => {
 
     const divisor = indexTime ? secondTimeMarkers[indexTime - 1] : 1 //for seconds if index 0 then seconds 
 
-    const test = rtf.format(Math.floor(dateSecDelta/divisor),literalTimeMarkers[indexTime])
+    const time = rtf.format(Math.floor(dateSecDelta/divisor),literalTimeMarkers[indexTime])
 
-
-// //need to change on  Moment js
-//     const res = item.createDate.split('T');
-//     const date = {
-//         year : res[0],
-//         time : res[1].slice(-13, -5)
-//     }
-    return test;
+    return time;
 }  
 
-        //date formating
 
    

frontend/src/reducers/dataReducers.js

@@ -1,7 +1,8 @@
 import {createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-    selectedUser: {}
+    selectedUser: {},
+    isNewPrivateMessages: true
 }
 
 export const dataReducersSlice = createSlice({
@@ -10,7 +11,10 @@ export const dataReducersSlice = createSlice({
     reducers: {
         selectedUser: (state, action) => {
                 state.selectedUser = action.payload  
-      }
+      },
+        isNewPrivateMessages: (state, action) => {
+                state.isNewPrivateMessages = action.payload  
+      },
     },
   })
   
@@ -22,5 +26,6 @@ const dataReducer = reducer;
 export default dataReducer;
 
 export const {
-        selectedUser
+        selectedUser,
+        isNewPrivateMessages
         } = actions;

frontend/src/reducers/socketReducer.js

@@ -15,7 +15,8 @@ const initialState = {
     writing: false,
     usersWriting: [],
     newMessages : [],
-    newPrivateMessages: {}
+    newPrivateMessages: {},
+    newPrivateMessagesArray: []
 }
 
 const SOCKET_URL = process.env.REACT_APP_SERVER_URL;
@@ -49,7 +50,6 @@ const connectToSocket = (event) => {
                                 store.dispatch(addNewMessage(data))
                                 })
                             .on('private', (data) => {
-                                console.log(data)
                                store.dispatch(addNewPrivateMessage(data))
                                    })
                             .on('ban', (data) => {
@@ -99,7 +99,10 @@ export const getUserSocketSlice = createSlice({
         getUsersOnline: (state, action) => {state.usersOnline = action.payload},
         getAllUsers: (state, action) => {state.allUsers = action.payload},
         addNewMessage: (state, action) => {state.newMessages.push(action.payload)}, 
-        addNewPrivateMessage: (state, action) => {state.newPrivateMessages = action.payload}, 
+        addNewPrivateMessage: (state, action) => {
+            state.newPrivateMessages = action.payload
+            state.newPrivateMessagesArray.push(action.payload)
+        }, 
         }
     }
 );