fix private messages sending and geting, need to fix getting own messages

backend/app.js

@@ -241,6 +241,7 @@ io.on("connection", async (socket) => {
     const dbUser = await getOneUser(userName);
     const allUsers = await getAllDbUsers(socket) // send allUsers from DB to socket user
     //need to use this ID to socket privat messges
+ 
 
     socket.emit('connected', dbUser); //socket.user
     const usersInSocket = [];
@@ -268,7 +269,9 @@ io.on("connection", async (socket) => {
 // }
 
     io.emit('usersOnline', usersInSocket); // send array online users  
+
     dbUser.populate({path:'friends'}).then(res => socket.emit('friends',res.friends)) 
+
     //send private chats for user
 
     const privateChats = await PrivateMessage.find( {$or:[ {toUser: dbUser._id}, {fromUser: dbUser._id }],foreignField: '_id'}).populate( ['fromUser','toUser'])//need to optimal way found
@@ -379,7 +382,7 @@ socket.emit('my chats', privateChats)
           })
 
         socket.on("private message", async ({ fromUser, from, message, toUser , to}) => {
-//create message and save to DB            
+//create message and save to DB      
             const privateMessage = new PrivateMessage({
                 text:  message,
                 createDate: Date.now(),
@@ -391,15 +394,60 @@ socket.emit('my chats', privateChats)
           
         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 })
-           console.log(to)
-         socket.to(to).emit('private', {...privateMessage._doc, sender: privateMessageSentUser });
+        socket.to(toUser?.socketId).emit('private', {...privateMessage._doc, sender: privateMessageSentUser });
+        //socket.to(fromUser?.socketId).emit('private', {...privateMessage._doc, sender: privateMessageSentUser });
 
 
 // fix time start and messages after private 
 
-
-
-      
+//********EXEMPLE DOCUMENTATION
+
+// Persistent messages
+// On the server-side (server/index.js), we now persist the message in our new store:
+
+// io.on("connection", (socket) => {
+//   // ...
+//   socket.on("private message", ({ content, to }) => {
+//     const message = {
+//       content,
+//       from: socket.userID,
+//       to,
+//     };
+//     socket.to(to).to(socket.userID).emit("private message", message);
+//     messageStore.saveMessage(message);
+//   });
+//   // ...
+// });
+
+// And we fetch the list of messages upon connection:
+
+// io.on("connection", (socket) => {
+//   // ...
+//   const users = [];
+//   const messagesPerUser = new Map();
+//   messageStore.findMessagesForUser(socket.userID).forEach((message) => {
+//     const { from, to } = message;
+//     const otherUser = socket.userID === from ? to : from;
+//     if (messagesPerUser.has(otherUser)) {
+//       messagesPerUser.get(otherUser).push(message);
+//     } else {
+//       messagesPerUser.set(otherUser, [message]);
+//     }
+//   });
+//   sessionStore.findAllSessions().forEach((session) => {
+//     users.push({
+//       userID: session.userID,
+//       username: session.username,
+//       connected: session.connected,
+//       messages: messagesPerUser.get(session.userID) || [],
+//     });
+//   });
+//   socket.emit("users", users);
+//   // ...
+// });
+
+
+//*********** PRIVAT EXEMPLE */      
 
 
 

frontend/src/components/chatPage/ChatPage.jsx

@@ -20,12 +20,11 @@ import getNotif from '../../assets/sendSound.mp3'
 import { PrivateChat } from './privateChat/PrivateChat';
 import { PrivatChatHeader } from './privateChat/PrivatChatHeader';
 import { socketEvents } from '../../utils/socketsEvents';
+import { addNewPrivateMessage } from '../../reducers/socketReducer';
 
 export const ChatPage = () => {
-    console.log('render')
 
     const dispatch = useDispatch();
-
     const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const socket = useSelector(state => state.getUserSocketReducer.socket)
@@ -41,7 +40,9 @@ export const ChatPage = () => {
     const [isCamActiv, setisCamActiv] = useState(false);
     const [showSpinner, setshowSpinner] = useState(false);
     const [loadingPercentage, setLoadPercentage] = useState(0)
-    
+
+    const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline);
+
     const isTabletorMobile = (window.screen.width < 730);
     const isNewMessage = newPrivateMessages.length > 0
 
@@ -74,13 +75,28 @@ export const ChatPage = () => {
     }
 
     const sendPrivateMessage = () => {
-        console.log(toUser.socketId)
+        
+        const toUserSocket = usersOnline.find(user => user._id == toUser._id)
+        const fromUserSocket = usersOnline.find(userInSocket => userInSocket._id == user._id)
+
+        ///***need to fix  sending own messages to me
+
+
+        // store.dispatch(addNewPrivateMessage({
+        //     fromUser: fromUserSocket,
+        //     message: message.message,
+        //     to: chatId,
+        //     toUser:toUserSocket
+        //   }))
+
+
         socket.emit("private message", {
-            fromUser: user,
+            fromUser: fromUserSocket,
             message: message.message,
             to: chatId,
-            toUser
+            toUser:toUserSocket
           })
+        
     }
 
     useEffect(() => {

frontend/src/components/chatPage/YoutubeMessage.jsx

@@ -0,0 +1,17 @@
+export const YoutubeMessage = (item) => {
+    
+    const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
+
+    return (
+        <iframe 
+            width="280" 
+            height="160" 
+            style={{'maxWidth': "90%"}}
+            src={`https://www.youtube.com/embed/`+ (item.text.match(regYoutube)[1])}
+            title="YouTube video player" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowFullScreen> 
+            
+        </iframe>
+    )
+}

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

@@ -41,7 +41,6 @@ export const UserInfoButton = ({item, i}) => {
             store.dispatch(selectedUser(item))
             store.dispatch(privateMessage({toUser: item}))
             setIsPrivate(false) 
-            console.log('item', item)
             socket.emit('privat chat', {
                 user,
                 to: item.socketId,

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

@@ -11,8 +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';
+import { YoutubeMessage } from '../YoutubeMessage';
 
 //need to fix update wenn message sendet and icon for new private messages
 
@@ -28,34 +27,39 @@ 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);
-
     socket.on('send privat messages', (messages)=> {
-        setStartMessages(messages)
+        setStartMessages(messages)    
     });
-  
-// bug need to fix****************
-
+    
+    
+    
 
     const [isEditing, setIsEditing] = useState(false)   
     const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
 
+    const [play] = useSound(notifSound);
     const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
 
-    const [play] = useSound(notifSound);
 
+    console.log(newPrivateMessages)
 
-    useEffect(() => {
-        if (!isEditing) {
-            
-            scrollToBottom((endMessages)) 
+
+    
+      useEffect(() => {
+        if(startMessages.length > 0){
+           setStartMessages([...startMessages, newPrivateMessages]) 
         }
-      }, [startMessages, newPrivateMessages]);
+        }, [newPrivateMessages]);
 
+
+        useEffect(() => {
+            if (!isEditing) {
+                scrollToBottom((endMessages)) 
+            }
+    
+          }, [startMessages]);
            
     return (  
 
@@ -69,7 +73,6 @@ export const PrivateChat = () => {
                         <div key={i + 1} className={ 
                             (item.fromUser === user._id)? 'message myMessage' :'message'}
                             onClick = {(e) => {
-                                console.log(e.target)
                                 if(e.target.closest("div").className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
                                     e.currentTarget.className += ' editMessage'  
                                     dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id}))  
@@ -86,18 +89,7 @@ export const PrivateChat = () => {
                                     (item.fromUser === user._id)? 'message myMessage' :'message'}>
                             
                             { 
-                            item.text.match(regYoutube) ?
-                            <iframe 
-                                    width="280" 
-                                    height="160" 
-                                    style={{'maxWidth': "90%"}}
-                                    src={`https://www.youtube.com/embed/`+ (item.text.match(regYoutube)[1])}
-                                    title="YouTube video player" 
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                    allowFullScreen> 
-                                    
-                                </iframe>
-                                :
+                            item.text.match(regYoutube) ? <YoutubeMessage item = {item} />: 
                                 (item.file && item.fileType && item.fileType.split('/')[0] !== 'image') ? 
 
                                 <div style={{'display': 'flex', 'alignItems': 'center'}} >

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

@@ -39,10 +39,7 @@ export const UserInfo = () => {
     const newMessage = useSelector(state => state.getUserSocketReducer.newMessages)
 
     const friends = useSelector(state => state.getUserSocketReducer.friends)
-
-    console.log('friends', friends)
     const friendsIds = friends.map(friend => friend._id)
-
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
     const inputHandler = (e) => {
@@ -69,9 +66,7 @@ export const UserInfo = () => {
                 
                <div
                     className={isTabletorMobile ? 'mobileUsersInfoBox' : 'pcUsersInfoBox'} 
-                    style={showUserInfoBox && isTabletorMobile ? {'transform':'translate(-100%)'}:{ 'transform':'translate(0)'}}
-                    
-                    
+                    style={showUserInfoBox && isTabletorMobile ? {'transform':'translate(-100%)'}:{ 'transform':'translate(0)'}}   
                 >
                 <input
                     type="file"
@@ -84,7 +79,8 @@ export const UserInfo = () => {
 
 
                  
-                {friends.map((item, i) =>(user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} /> )}
+                {friends.map((item, i) =>(user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} 
+                /> )}
                     
                    
                 <MainChatButtton/>     
@@ -112,9 +108,6 @@ export const UserInfo = () => {
                     }
 
                 </div>
-
-            
-
             </>
         )
 }

frontend/src/utils/socketsEvents.js

@@ -18,7 +18,6 @@ socket.on('connected',  data => {
             store.dispatch(addNewMessage(data))
             })
         .on('private', (data) => {
-            console.log(data)
             store.dispatch(addNewPrivateMessage(data))
                 })
         .on('ban', (data) => {