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

backend/app.js

@@ -240,11 +240,16 @@ io.on("connection", async (socket) => {
     const sockets = await io.fetchSockets();
     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
+<<<<<<< HEAD
     socket.emit('connected', dbUser); //socket.user
 
     
+=======
+ 
+
+    socket.emit('connected', dbUser); //socket.user
+>>>>>>> new-branch
     const usersInSocket = [];
         for (let [id, socket] of io.of("/").sockets) {
             
@@ -270,8 +275,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
@@ -287,6 +293,10 @@ io.on("connection", async (socket) => {
 
 socket.emit('my chats', privateChats)
 
+<<<<<<< HEAD
+=======
+  
+>>>>>>> new-branch
   
     if(socket.user.isAdmin){
          getAllDbUsers(socket); 
@@ -381,7 +391,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(),
@@ -393,15 +403,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
 
@@ -73,16 +74,29 @@ export const ChatPage = () => {
             setisCamActiv(!isCamActiv) // test camera
     }
 
+    const sendPrivateMessage = () => {
+        
+        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
+        //   }))
 
 
-    const sendPrivateMessage = () => {
-        console.log(toUser.socketId)
         socket.emit("private message", {
-            fromUser: user,
+            fromUser: fromUserSocket,
             message: message.message,
             to: chatId,
-            toUser
+            toUser:toUserSocket
           })
+        
     }
 
     useEffect(() => {
@@ -100,7 +114,7 @@ export const ChatPage = () => {
         if(token && socket){
             socketEvents(socket)
         }
-    }, [token, socket])
+    }, [token, socket, user])
 
 
 
@@ -157,9 +171,7 @@ export const ChatPage = () => {
                  ""}
                     {isPrivatChat? <PrivateChat/>   : <MessageForm/>}
                    
-
-
-                    {isUserTyping.isTyping && (isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
+                    {isUserTyping.isTyping && !isPrivatChat &&(isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
 
                     <Box 
 

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/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 (
         <>
             <div className='online'>  

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

@@ -43,7 +43,7 @@ useEffect(() => {
 
     const [isPrivate, setIsPrivate] = useState(false)
 
-    console.log('usersinfobutton Item',item)
+  //  console.log('usersinfobutton Item',item)
 
     useEffect(() => {
         if(newPrivateMessages.text && newPrivateMessages?.sender[0].userName === item.userName){
@@ -60,7 +60,6 @@ useEffect(() => {
             store.dispatch(isNewPrivateMessages(false))
             setCounter(0) 
             setIsPrivate(false) 
-            console.log('item', item)
             socket.emit('privat chat', {
                 user,
                 to: item.socketId,

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

@@ -11,8 +11,12 @@ import useSound from 'use-sound';
 import { PrivatChatHeader } from './PrivatChatHeader';
 import { privateMessage } from '../../../reducers/userDataReducer';
 import notifSound from '../../../assets/get.mp3'
+<<<<<<< HEAD
 import {isNewPrivateMessages} from "../../../reducers/dataReducers";
 import { UserInfoButton } from '../generalChat/UserInfoButton';
+=======
+import { YoutubeMessage } from '../YoutubeMessage';
+>>>>>>> new-branch
 
 //need to fix update wenn message sendet and icon for new private messages
 
@@ -28,11 +32,9 @@ 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);
+<<<<<<< HEAD
 
     socket.on('send privat messages', (messages)=> {
         setStartMessages(messages)
@@ -40,22 +42,39 @@ export const PrivateChat = () => {
   
 // bug need to fix****************
 
+=======
+    socket.on('send privat messages', (messages)=> {
+        setStartMessages(messages)    
+    });
+    
+    
+    
+>>>>>>> new-branch
 
     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 +88,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 +104,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

@@ -4,7 +4,11 @@ import { useSelector } from 'react-redux';
 import './userInfo.scss';
 import { useDispatch } from 'react-redux';
 import { getUserAvatar } from '../../../reducers/userDataReducer';
+<<<<<<< HEAD
 import { useState, useCallback } from 'react';
+=======
+import { useState } from 'react';
+>>>>>>> new-branch
 import { UserInfoButton } from '../generalChat/UserInfoButton';
 import { AdminUserInfiButton } from '../generalChat/AdminUserInfiButton';
 import { MainChatButtton } from '../generalChat/MainChatButtton';
@@ -39,10 +43,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) => {
@@ -56,8 +57,11 @@ console.log(user)
     // if(socket){
     //     socket.on('my chats', (data)=> console.log('my chats', data))
     // }
+<<<<<<< HEAD
 
 console.log(usersOnline)
+=======
+>>>>>>> new-branch
         
 
     return (
@@ -73,9 +77,7 @@ console.log(usersOnline)
                 
                <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"
@@ -88,7 +90,8 @@ console.log(usersOnline)
 
 
                  
-                {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/>     
@@ -116,9 +119,12 @@ console.log(usersOnline)
                     }
 
                 </div>
+<<<<<<< HEAD
 
             
 
+=======
+>>>>>>> new-branch
             </>
         )
 }

frontend/src/reducers/dataReducers.js

@@ -18,8 +18,6 @@ export const dataReducersSlice = createSlice({
     },
   })
   
-  // Action creators are generated for each case reducer function
-
 const {actions, reducer} = dataReducersSlice;
 const dataReducer = reducer;
 

frontend/src/reducers/messageReducer.js

@@ -1,7 +1,9 @@
 import { createSlice} from '@reduxjs/toolkit';
 import axios from 'axios';
 import { createAsyncThunk } from '@reduxjs/toolkit';
-
+import { sendMessageToSocket } from '../utils/messagesSocketEvents';
+import { deleteMessageHandler } from '../utils/messagesSocketEvents';
+import { editMessageHandler } from '../utils/messagesSocketEvents';
 
 const initialState = {
     message:'',
@@ -15,40 +17,6 @@ const initialState = {
 
 const POST_FILES_URL = process.env.REACT_APP_SERVER_URL + `/files`;
 
-
-export const sendMessageToSocket = (state, data) => {
-             if (!!state.message && state.message.length < 200) {    //remove to other file
-                data.socket.emit('message', {...data.user, message: state.message}); 
-            } 
-    };
-
-export const sendPrivateMessageToSocket = (state, data) => {
-        if (!!state.message && state.message.length < 200) {    //remove to other file
-
-            //need to check and fix data from dispatch
-            
-        // data.socket.emit("private message", {
-        //     fromUser: data.user,
-        //     message: data.message.message,
-        //     to: data.chatId,
-        //     toUser:data.toUser
-        //   })
-    
-          // data.socket.emit('message', {...data.user, message: state.message}); 
-       } 
-};
-
-export const deleteMessageHandler = (state, data) => {
-    data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token});  
-};
-
-    
-export const editMessageHandler = (state, data) => {
-    if(data.socket){
-         data.socket.emit('editmessage', {messageNewText: data.editMessage.message, messageId: data.messageId, token: data.socket.auth.token}); //add backend functional later find by id and edit 
-    }
-};
-
 export const fileMessage = createAsyncThunk(
     'messageReducer/fileMessageStatus',
     async (payload) => {
@@ -88,19 +56,15 @@ const messageReducerSlice = createSlice({
             },
         deleteMessage: (state, action) => {
             deleteMessageHandler(state, action.payload)
-           
         },
         sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
-        sendPrivateMessage:(state, action) => sendPrivateMessageToSocket(state, action.payload),
         clearMessage: (state) => {state.message = ''}
 
     },
     extraReducers: (bilder) => {
     bilder
     .addCase(fileMessage.fulfilled, (state, action) => {
-        console.log(action.payload)
-        state.files = action.payload.data?.files
-            
+        state.files = action.payload.data?.files           
     })  
     .addCase(fileMessage.pending, (state, action) => {
         console.log('pending', fileMessage.pending())

frontend/src/reducers/socketReducer.js

@@ -1,9 +1,4 @@
 import {createSlice } from '@reduxjs/toolkit';
-import {io} from 'socket.io-client';
-import { store } from '../store';
-import { removeToken } from './userDataReducer';
-import { privateMessage } from './userDataReducer';
-
 
 const initialState = {
     socketStatus: 'idle',
@@ -20,8 +15,6 @@ const initialState = {
     friends: []
 }
 
-
-
 export const getUserSocketSlice = createSlice({
     name: 'userSocket',
     initialState,

frontend/src/reducers/userDataReducer.js

@@ -17,8 +17,6 @@ const initialState = {
     toUser: {},
     avatar: ''
 }
-const SERVER_URL =  process.env.REACT_APP_SERVER_URL
-
 const POST_URL =  process.env.REACT_APP_SERVER_URL + '/login';
 const GET_AVATAR_URL = process.env.REACT_APP_SERVER_URL +  '/avatar';
 

frontend/src/utils/messagesSocketEvents.js

@@ -0,0 +1,16 @@
+export const sendMessageToSocket = (state, data) => {
+    if (!!state.message && state.message.length < 200) {    //remove to other file
+       data.socket.emit('message', {...data.user, message: state.message}); 
+   } 
+};
+
+export const deleteMessageHandler = (state, data) => {
+data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token});  
+};
+
+
+export const editMessageHandler = (state, data) => {
+if(data.socket){
+data.socket.emit('editmessage', {messageNewText: data.editMessage.message, messageId: data.messageId, token: data.socket.auth.token}); //add backend functional later find by id and edit 
+}
+};

frontend/src/utils/socketsEvents.js

@@ -3,39 +3,39 @@ import { getAllMessages, getAllUsers, addNewMessage, getUser,addNewPrivateMessag
 import { removeToken } from "../reducers/userDataReducer";
 
 export const socketEvents = (socket) => {
-
-socket.on('connected', data => {
-                            store.dispatch(getUser(data));
-                            })
-                            .on('allmessages', (data) => {
-                                store.dispatch(getAllMessages(data));
-                                    })
-                            .on('allDbUsers', (data) => {
-                                store.dispatch(getAllUsers(data));
-                                        })    
-                            .on('newmessage', (data) => {
-                                store.dispatch(addNewMessage(data))
-                                })
-                            .on('private', (data) => {
-                                console.log(data)
-                               store.dispatch(addNewPrivateMessage(data))
-                                   })
-                            .on('ban', (data) => {
-                                store.dispatch(removeToken()); 
-                                localStorage.removeItem('token');
-                                })
-                            .on('usersOnline', (data) => {
-                                    store.dispatch(getUsersOnline(data))
-                                })
-                            .on('friends', data => {
-                                    store.dispatch(friendsFromSocket(data))
-                                })
-                            .on('disconnect', (data) => {
-                                if( data === 'io server disconnect') {
-                                   // socket.disconnect();
-                                    store.dispatch(removeToken()); 
-                                }
-                            })
-                            .on('error', e => {console.log('On connected', e)}); 
+console.log('socket event...')
+socket.on('connected',  data => {
+                        store.dispatch(getUser(data));
+                        console.log('getuserdata', data)
+        })
+        .on('allmessages', (data) => {
+            store.dispatch(getAllMessages(data));
+                })
+        .on('allDbUsers', (data) => {
+            store.dispatch(getAllUsers(data));
+                    })    
+        .on('newmessage', (data) => {
+            store.dispatch(addNewMessage(data))
+            })
+        .on('private', (data) => {
+            store.dispatch(addNewPrivateMessage(data))
+                })
+        .on('ban', (data) => {
+            store.dispatch(removeToken()); 
+            localStorage.removeItem('token');
+            })
+        .on('usersOnline', (data) => {
+                store.dispatch(getUsersOnline(data))
+            })
+        .on('friends', data => {
+                store.dispatch(friendsFromSocket(data))
+            })
+        .on('disconnect', (data) => {
+            if( data === 'io server disconnect') {
+                // socket.disconnect();
+                store.dispatch(removeToken()); 
+            }
+        })
+        .on('error', e => {console.log('On connected', e)}); 
 }