clean reducer and change socket connektion

backend/app.js

@@ -249,8 +249,8 @@ io.on("connection", async (socket) => {
             
             const dbUser = await getOneUser(socket.user.userName)
             usersInSocket.push({...dbUser._doc,socketId: id });
+            
         }
-
 // const onUser = []
 //     const usersOnlineID = usersOnline.map(users => Object.values(users)[0])
 //     const userSet = new Set(usersOnlineID)
@@ -269,6 +269,7 @@ 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
 
@@ -341,7 +342,7 @@ socket.emit('my chats', privateChats)
             const filteredUsersOnline = usersOnline.filter(user => exist.user.id !== user.id)
         
            
-           io.emit('usersOnline', filteredUsersOnline);
+        //   io.emit('usersOnline', filteredUsersOnline);
 
             // const sockets = await io.fetchSockets();
             // io.emit('usersOnline', sockets.map(sock => sock.user));
@@ -392,13 +393,15 @@ 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(to).emit("private", {...privateMessage._doc, sender: privateMessageSentUser });
 
 // fix time start and messages after private 
 
 
 
+      
 
 
 
@@ -408,7 +411,7 @@ socket.emit('my chats', privateChats)
 
             // const privateMessagesToUser = await PrivateMessage.find({toUser: {$in:[fromUser._id, toUser._id]}, fromUser: {$in:[fromUser._id, toUser._id]}}).sort({ 'createDate': 1 })
 
-            // socket.emit('send privat messages', {privateMessagesToUser, fromUser})
+            //socket.emit('private', {privateMessageSentUser, fromUser})
 
           });
 

frontend/src/App.jsx

@@ -1,11 +1,29 @@
 import { LoginForm } from './components/loginForm/LoginForm';
 import { ChatPage } from './components/chatPage/ChatPage';
 import { useSelector } from 'react-redux';
+import {io} from 'socket.io-client';
+import { useDispatch } from 'react-redux';
+import { getSocket } from './reducers/socketReducer';
+import { useEffect } from 'react';
 
 export default function App() {
-
     const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
+    const SOCKET_URL = process.env.REACT_APP_SERVER_URL;
+
+    const dispatch = useDispatch();
+
+   useEffect(() => {
+    if(token){
+        const socket = io.connect(    
+                SOCKET_URL, 
+                {auth: {token}})
+                if(socket){
+                  dispatch(getSocket(socket))  
+                }        
+    }
+ },[token])
+
     
-    return token ? <ChatPage /> : <LoginForm/>
+   return token ? <ChatPage /> : <LoginForm/>
 };
 

frontend/src/components/chatPage/ChatPage.jsx

@@ -19,10 +19,10 @@ import useSound from 'use-sound';
 import getNotif from '../../assets/sendSound.mp3'
 import { PrivateChat } from './privateChat/PrivateChat';
 import { PrivatChatHeader } from './privateChat/PrivatChatHeader';
+import { socketEvents } from '../../utils/socketsEvents';
 
 export const ChatPage = () => {
-
-    const SOCKET_EVENTS = ['allmessages', 'usersOnline', 'allDbUsers']
+    console.log('render')
 
     const dispatch = useDispatch();
 
@@ -76,6 +76,7 @@ export const ChatPage = () => {
 
 
     const sendPrivateMessage = () => {
+        console.log(toUser.socketId)
         socket.emit("private message", {
             fromUser: user,
             message: message.message,
@@ -84,34 +85,22 @@ export const ChatPage = () => {
           })
     }
 
-
-    
-
-
-
     useEffect(() => {
         if(socket) {
             socket.on('writing', (data) => { 
                     setUserTyping(data) 
                     setTimeout(() => setUserTyping([]), 500 )
                 })  
-            socket.on("private message", ({ content, from }) => {
-                    console.log(content, from)
-                
-                  });
         }
-   }, [])
-
+   }, [socket, token])
 
 
+ 
     useEffect(() => {
-   
-        if(token){
-          //  const events = ['allmessages', 'usersOnline', 'allDbUsers'] // if start page dont get users or add dispatch for this events
-            dispatch(getSocket('allmessages')) //use const SOCKETS EVENT
-            dispatch(getSocket('allDbUsers'))
+        if(token && socket){
+            socketEvents(socket)
         }
-    }, [token, editOldMessage, showUserInfoBox])
+    }, [token, socket])
 
 
 
@@ -179,7 +168,7 @@ export const ChatPage = () => {
                                         e.preventDefault()
                                         if (message.message.length){
                                             isPrivatChat? sendPrivateMessage() : dispatch(sendMessage({user, socket}));
-                                            isPrivatChat && dispatch(getSocket('allmessages'))
+                                           // isPrivatChat && dispatch(getSocket('allmessages'))
                                             isPrivatChat &&dispatch(editMessage({editMessage: ''}))
                                             setMessage({message: ''})
                                             play()
@@ -255,14 +244,14 @@ export const ChatPage = () => {
                                 if (e.key === "Enter")   {
                                     e.preventDefault();
                                     isPrivatChat? sendPrivateMessage() : dispatch(sendMessage({user, socket}));
-                                    dispatch(getSocket('allmessages'))
+                                    //dispatch(getSocket('allmessages'))
                                     dispatch(editMessage({editMessage: ''}))
                                     setMessage({message: ''})
                                 }
                             }}
                             onChange={e => { 
                                 dispatch(storeMessage({message: e.target.value}))
-                                socket.emit('userWriting');
+                               !isPrivatChat &&socket.emit('userWriting');
                                 setMessage({message: e.target.value})}
                             } 
                             // onFocus={ e => {

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

@@ -2,7 +2,6 @@ import { useSelector } from 'react-redux';
 import { generalMessage } from '../../../reducers/userDataReducer';
 import './userInfo.scss';
 import { store } from '../../../store';
-import { getSocket } from '../../../reducers/socketReducer';
 
 export const MainChatButtton = () => {
 
@@ -12,7 +11,7 @@ export const MainChatButtton = () => {
         <div 
             className={!isPrivatChat? 'online active' :'online' }                       
             onClick={() => {
-                store.dispatch(getSocket('allmessages'))
+              //  store.dispatch(getSocket('allmessages'))
                 store.dispatch(generalMessage())
             }}
         >  

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

@@ -43,6 +43,7 @@ useEffect(() => {
 
     const [isPrivate, setIsPrivate] = useState(false)
 
+    console.log('usersinfobutton Item',item)
 
     useEffect(() => {
         if(newPrivateMessages.text && newPrivateMessages?.sender[0].userName === item.userName){
@@ -59,6 +60,7 @@ 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

@@ -28,6 +28,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([])   
 
@@ -37,8 +38,7 @@ export const PrivateChat = () => {
         setStartMessages(messages)
     });
   
-
-// bug need to fix
+// bug need to fix****************
 
 
     const [isEditing, setIsEditing] = useState(false)   
@@ -48,6 +48,7 @@ export const PrivateChat = () => {
 
     const [play] = useSound(notifSound);
 
+
     useEffect(() => {
         if (!isEditing) {
             

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

@@ -36,8 +36,12 @@ export const UserInfo = () => {
     const chatId = useSelector(state => state.userDataReducer.chatId)
     const showUserInfoBox = useSelector(state => state.userDataReducer.showUserInfoBox)
     const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
+    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;
 
@@ -52,6 +56,10 @@ console.log(user)
     // if(socket){
     //     socket.on('my chats', (data)=> console.log('my chats', data))
     // }
+
+console.log(usersOnline)
+        
+
     return (
             <>  
                 <h4 style={{color:'white'}}> Hello, {user.userName} </h4>
@@ -94,7 +102,7 @@ console.log(user)
                         :
 
                             usersOnline.map((item, i) =>
-                                    (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                   
+                                    (user.userName !== item.userName && !friendsIds.includes(item._id) ) && <UserInfoButton item = {item} i = {i}  key={i} />                   
                             )
                     }
 

frontend/src/index.js

@@ -6,6 +6,8 @@ import {Provider} from 'react-redux';
 import {store} from './store'
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
+
+
 ReactDOM.render(
     <Provider store={store}> 
         <App/>

frontend/src/reducers/messageReducer.js

@@ -13,7 +13,7 @@ const initialState = {
     ref: null
 }
 
-const POST_FILES_URL = `http://localhost:5000/files`;
+const POST_FILES_URL = process.env.REACT_APP_SERVER_URL + `/files`;
 
 
 export const sendMessageToSocket = (state, data) => {

frontend/src/reducers/socketReducer.js

@@ -23,71 +23,6 @@ const initialState = {
 >>>>>>> new-branch
 }
 
-const SOCKET_URL = process.env.REACT_APP_SERVER_URL;
-
-
-const connectToSocket = (event) => {
-        try {
-            const token = localStorage.getItem('token');
-            if(token){
-                const socket = io.connect(    //need to add other function for connecting
-                    SOCKET_URL, 
-                    {auth: {token}})
-                    socket.on('connected', data => {
-                                store.dispatch(getUser(data));
-                               // socketEventsDispatch(socket)
-                            })
-                            .on(event, (data) => {
-                                   switch (event){
-                                    case 'allmessages':
-                                        store.dispatch(getAllMessages(data));
-                                        break;
-                                    case 'allDbUsers':
-                                        store.dispatch(getAllUsers(data));
-                                        break;
-                                    default: 
-                                        break;
-                                    }
-                                })
-                                
-                            .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)}); 
-                            
-                return socket;       
-            }   
-        } catch (error) {
-            console.log('error connecting to socket ', error)
-        } 
-    };
-
-// const socketEventsDispatch = (socket) => {
-//     socket
-//         .on('writing', (data) => {
-//                 console.log(data)
-//                 store.dispatch(writing(data));   
-//      })
-// }
 
 
 export const getUserSocketSlice = createSlice({
@@ -98,7 +33,7 @@ export const getUserSocketSlice = createSlice({
             state.socket = null
             state.socketStatus = 'disconnected'},
         getSocket: (state, action) => {
-            state.socket = connectToSocket(action.payload);
+            state.socket = action.payload
             state.socketStatus = 'connected';
         },
         getUser: (state, action) => {state.socketUserData = action.payload},

frontend/src/utils/socketsEvents.js

@@ -0,0 +1,41 @@
+import { store } from "../store";
+import { getAllMessages, getAllUsers, addNewMessage, getUser,addNewPrivateMessage,getUsersOnline,friendsFromSocket } from "../reducers/socketReducer";
+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)}); 
+}
+