fix private chat header

frontend/src/components/chatPage/ChatPage.jsx

@@ -252,7 +252,7 @@ export const ChatPage = () => {
                             onKeyPress={(e) => {
                                 if (e.key === "Enter")   {
                                     e.preventDefault();
-                                    dispatch(sendMessage({user, socket}))
+                                    isPrivatChat? sendPrivateMessage() : dispatch(sendMessage({user, socket}));
                                     dispatch(getSocket('allmessages'))
                                     dispatch(editMessage({editMessage: ''}))
                                     setMessage({message: ''})

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

@@ -10,7 +10,6 @@ export const FindUserBox = () => {
     const [findUser, setfindUser] = useState('');
     const [showUsers, setShowUsers] = useState(false)
     const res = allUsers.filter(user =>  user.userName.toLowerCase().includes(findUser.toLowerCase()))
-    
  
     return (
         <>

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

@@ -26,7 +26,7 @@ export const UserInfoButton = ({item, i}) => {
         <div 
         className={(item.socketId&&isPrivatChat&&(chatId === item.socketId))? 'online active' :'online' }                       
         onClick={(e) => {
-            store.dispatch(selectedUser(item.userName))
+            store.dispatch(selectedUser(item))
             store.dispatch(privateMessage({toUser: item}))
             socket.emit('privat chat', {
                 user,

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

@@ -1,13 +1,30 @@
 import { useSelector } from "react-redux"
 import './userInfo.scss';
+import { StyledAvatar } from "../messageForm/StyledAvatar";
+import { Avatar } from "@mui/material";
+
 export const PrivatChatHeader = ({userName}) => {
 
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL
+
 //add dispatch and saving name for user to store
-const selectedUser = useSelector(state => state.dataReducer.selectedUser)
+    const selectedUser = useSelector(state => state.dataReducer.selectedUser)
 
     return (
         <div className="active" >
-            <div > Private Chat with {selectedUser.toUpperCase()} </div>
+            <StyledAvatar    
+                sx={{ marginRight:2}} 
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
+            >
+                <Avatar 
+                    src= {SERVER_URL + '/'+ selectedUser?.avatar}
+                    sx={{ alignSelf: 'flex-end'}} 
+                > 
+                    {selectedUser.userName.slice(0, 1)}
+                </Avatar>   
+            </StyledAvatar>
+              Private Chat with {selectedUser.userName.toUpperCase()}  
+           
         </div>
     )
 }

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

@@ -10,6 +10,7 @@ import imgBtn from '../../../assets/img/gg.png';
 import useSound from 'use-sound';
 import { PrivatChatHeader } from './PrivatChatHeader';
 import notifSound from '../../../assets/get.mp3'
+import { UserInfoButton } from '../generalChat/UserInfoButton';
 
 //need to fix update wenn message sendet and icon for new private messages
 
@@ -53,11 +54,13 @@ socket.on("private message", (message)=> {
     return (  
 
         <>
+       
             <PrivatChatHeader/>
                 <Box className='messageBox'>  
                 
                     {
                     startMessages.map((item, i) =>
+                    
                         <div key={i + 1} className={ 
                             (item.fromUser === user._id)? 'message myMessage' :'message'}
                             onClick = {(e) => {
@@ -70,6 +73,7 @@ socket.on("private message", (message)=> {
                             }}
                             > 
                             {storeMessageId === item._id ? <MessageEditorMenu />: ""} 
+                 
                             <span
                                 style={{'alignItems': 'center',
                                         marginLeft: 5, 

frontend/src/reducers/dataReducers.js

@@ -1,7 +1,7 @@
 import {createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-    selectedUser: ''
+    selectedUser: {}
 }
 
 export const dataReducersSlice = createSlice({