add friends functions to front

backend/app.js

@@ -268,7 +268,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
 
     const privateChats = await PrivateMessage.find( {$or:[ {toUser: dbUser._id}, {fromUser: dbUser._id }],foreignField: '_id'}).populate( ['fromUser','toUser'])//need to optimal way found
@@ -423,6 +423,8 @@ socket.emit('my chats', privateChats)
             await User.findOne({userName}).populate({path:'friends'}).then(res => socket.emit('friends',res.friends) )
             
         }) 
+
+        //need to fix - removed all users from frend only clicked not removed
           
         socket.on('removeFromFriends', async(user) => {
             const res = await User.updateOne({ userName}, {

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

@@ -8,9 +8,14 @@ export const AddToFriends = (user) => {
 
     const isTabletorMobile = (window.screen.width < 730);
 
-    const [isFriend, setIsFreind] = useState(false)
+    const usersFriends = useSelector(state => state.getUserSocketReducer.socketUserData).friends
+
+    let isMyFriend = false;
+    if(usersFriends) {
+        isMyFriend = usersFriends.find(friend => friend._id === user.user._id)
+    }
 
-    socket.on('friends', data =>  console.log(data))
+    const [isFriend, setIsFreind] = useState(false)
    
     return (
         <div onClick={() => {
@@ -18,7 +23,7 @@ export const AddToFriends = (user) => {
                             isFriend ? socket.emit('removeFromFriends', user) : socket.emit('addToFriends', user)       
             }} >
             <div className= {isTabletorMobile ?'mobileButton addToFriendsButton': "addToFriendsButton" } 
-               style ={{backgroundColor:(isFriend ? 'red': '#1976d3' )}}
+               style ={{backgroundColor:(isFriend || isMyFriend? 'red': '#1976d3' )}}
             >
                 
             </div>

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

@@ -19,6 +19,7 @@ export const UserInfoButton = ({item, i}) => {
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
+    
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
     const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)

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

@@ -36,6 +36,7 @@ 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 friends = useSelector(state => state.getUserSocketReducer.friends)
 
 
     let userAvatarUrl = storeUserAvatar || user.avatar;
@@ -76,6 +77,10 @@ export const UserInfo = () => {
                         }}
                     onChange = {e => inputHandler(e)}/>
 
+
+                 
+                {friends.map((item, i) =>(user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} /> )}
+                    
                    
                 <MainChatButtton/>     
 

frontend/src/reducers/socketReducer.js

@@ -15,7 +15,8 @@ const initialState = {
     writing: false,
     usersWriting: [],
     newMessages : [],
-    newPrivateMessages: {}
+    newPrivateMessages: {},
+    friends: []
 }
 
 const SOCKET_URL = process.env.REACT_APP_SERVER_URL;
@@ -59,7 +60,7 @@ const connectToSocket = (event) => {
                                     store.dispatch(getUsersOnline(data))
                                 })
                             .on('friends', data => {
-                                    console.log('friends from server', data)
+                                    store.dispatch(friendsFromSocket(data))
                                 })
                             .on('disconnect', (data) => {
                                 if( data === 'io server disconnect') {
@@ -102,6 +103,7 @@ export const getUserSocketSlice = createSlice({
         getAllUsers: (state, action) => {state.allUsers = action.payload},
         addNewMessage: (state, action) => {state.newMessages.push(action.payload)}, 
         addNewPrivateMessage: (state, action) => {state.newPrivateMessages = action.payload}, 
+        friendsFromSocket:(state, action) => {state.friends = action.payload}
         }
     }
 );
@@ -120,5 +122,6 @@ export const {
     addNewMessage,
     addNewPrivateMessage,
     getAllUsers,
+    friendsFromSocket,
     writing
     } = actions;