fix some bugs v1

backend/app.js

@@ -391,12 +391,10 @@ socket.emit('my chats', privateChats)
             await privateMessage.save()
           //emit event 
           
-        
-          const privateMessagesToUser = await PrivateMessage.find({toUser: {$in:[fromUser._id, toUser._id]}, fromUser: {$in:[fromUser._id,toUser._id]}}).sort({ 'createDate': 1 })
-
-            socket.to(to).emit("private", privateMessagesToUser);
-
+        const privateMessageSentUser = await User.find({_id: fromUser }) // send from user what messaged
+        //const privateMessagesToUser = await PrivateMessage.find({toUser: {$in:[fromUser._id, toUser._id]}, fromUser: {$in:[fromUser._id,toUser._id]}}).sort({ 'createDate': 1 })
 
+            socket.to(to).emit("private", {...privateMessage._doc, sender: privateMessageSentUser });
 
 // fix time start and messages after private 
 

frontend/src/components/chatPage/ChatPage.jsx

@@ -34,6 +34,7 @@ export const ChatPage = () => {
     const toUser = useSelector(state => state.userDataReducer.toUser)
     const chatId = useSelector(state => state.userDataReducer.toUser.socketId)
     const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
+    const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
     const [message, setMessage] = useState({message: ''});
     const [isUserTyping, setUserTyping] = useState([]);
@@ -42,10 +43,11 @@ export const ChatPage = () => {
     const [loadingPercentage, setLoadPercentage] = useState(0)
     
     const isTabletorMobile = (window.screen.width < 730);
+    const isNewMessage = newPrivateMessages.length > 0
 
     const [play] = useSound(getNotif, {volume: 0.005});
 
-
+console.log(newPrivateMessages)
     const axiosConfig =   {
         headers: {
             "Content-type": "multipart/form-data"
@@ -102,6 +104,7 @@ export const ChatPage = () => {
    }, [])
 
 
+
     useEffect(() => {
    
         if(token){

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

@@ -3,7 +3,7 @@ import './userInfo.scss';
 import { StyledAvatar } from "../messageForm/StyledAvatar";
 import { Avatar } from "@mui/material";
 
-export const PrivatChatHeader = ({userName}) => {
+export const PrivatChatHeader = () => {
 
     const SERVER_URL = process.env.REACT_APP_SERVER_URL
 
@@ -23,7 +23,7 @@ export const PrivatChatHeader = ({userName}) => {
                     {selectedUser.userName.slice(0, 1)}
                 </Avatar>   
             </StyledAvatar>
-              Private Chat with {selectedUser.userName.toUpperCase()}  
+              Private Chat with {selectedUser.userName}  
            
         </div>
     )

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

@@ -27,7 +27,7 @@ export const PrivateChat = () => {
     const selectedUser = useSelector(state => state.dataReducer.selectedUser)
     const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
-
+    const isNewMessage = newPrivateMessages.length > 0
     const [startMessages, setStartMessages] = useState([])   
 
     let endMessages = useRef(null);
@@ -35,9 +35,10 @@ export const PrivateChat = () => {
 socket.on('send privat messages', (messages)=> {
     setStartMessages(messages)
   });
+  
+
+// bug need to fix
 
-  ///need to test not working
-const allMessages = startMessages.concat(newPrivateMessages)
 
     const [isEditing, setIsEditing] = useState(false)   
     const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
@@ -51,7 +52,7 @@ const allMessages = startMessages.concat(newPrivateMessages)
             
             scrollToBottom((endMessages)) 
         }
-      }, [startMessages,allMessages]);
+      }, [startMessages, newPrivateMessages]);
 
            
     return (  
@@ -62,7 +63,7 @@ const allMessages = startMessages.concat(newPrivateMessages)
                 <Box className='messageBox'>  
                 
                     {
-                    allMessages.map((item, i) =>
+                    startMessages.map((item, i) =>
                     
                         <div key={i + 1} className={ 
                             (item.fromUser === user._id)? 'message myMessage' :'message'}
@@ -77,14 +78,6 @@ const allMessages = startMessages.concat(newPrivateMessages)
                             > 
                             {storeMessageId === item._id ? <MessageEditorMenu />: ""} 
                  
-                            <span
-                                style={{'alignItems': 'center',
-                                        marginLeft: 5, 
-                                        fontStyle: 'italic', 
-                                        fontWeight: 800
-                                    }}
-
-                            > {item.fromUser}</span>
                             <div 
                                 key={i}
                             
@@ -141,6 +134,11 @@ const allMessages = startMessages.concat(newPrivateMessages)
                             }
 
                             </div>
+
+                            <div className={ 
+                                (item.userName === user.userName)? 'myDate' :'date'}>
+                                {dateFormat(item).time}
+                            </div>
                             {isEditiedMessage && <i>Edited</i>}
                             {/* <div className={ 
                                     (item.fromUser === user._id)? 'myDate' :'date'}>

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

@@ -46,6 +46,9 @@ export const UserInfo = () => {
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
     const chatId = useSelector(state => state.userDataReducer.chatId)
 
+    const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
+
+
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
     const inputHandler = (e) => {
@@ -54,6 +57,7 @@ export const UserInfo = () => {
         setDisplayType('none')
     }
 
+    console.log(newPrivateMessages)
 
     // if(socket){
     //     socket.on('my chats', (data)=> console.log('my chats', data))
@@ -94,6 +98,15 @@ export const UserInfo = () => {
                                     (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/reducers/socketReducer.js

@@ -15,7 +15,7 @@ const initialState = {
     writing: false,
     usersWriting: [],
     newMessages : [],
-    newPrivateMessages: []
+    newPrivateMessages: {}
 }
 
 const SOCKET_URL = process.env.REACT_APP_SERVER_URL;
@@ -49,6 +49,7 @@ const connectToSocket = (event) => {
                                 store.dispatch(addNewMessage(data))
                                 })
                             .on('private', (data) => {
+                                console.log(data)
                                store.dispatch(addNewPrivateMessage(data))
                                    })
                             .on('ban', (data) => {