add friends functions and emits on server

backend/app.js

@@ -412,11 +412,30 @@ socket.emit('my chats', privateChats)
 
           });
 
+//add and remove friends functions
+
+          socket.on('addToFriends', async (data) => {
+            const isFriend  =  await User.find({userName:userName,friends: {'_id':data.user._id}})
+            if(!!isFriend.length){
+                    await User.findOneAndUpdate({userName: userName},{$set: {'friends':  []}}, {new: true })
+                } 
+            await dbUser.friends.push({'_id':data.user._id})
+            await dbUser.save()
+            await User.findOne({userName}).populate({path:'friends'}).then(res => socket.emit('friends',res.friends) )
+            
+        }) 
+          
+        socket.on('removeFromFriends', async(user) => {
+            const res = await User.updateOne({ userName}, {
+                $pullAll: {
+                    friends: [{_id: user.user._id}],
+                },
+            });
+         await User.findOne({userName}).populate({path:'friends'}).then(res => socket.emit('friends',res.friends)) 
 
+    })
     
-
-    
-
+//admin functions 
 
         socket.on("banUser",async (data) => {
             if(!socket.user.isAdmin){
@@ -437,11 +456,16 @@ socket.emit('my chats', privateChats)
             // }
            });
 
+
+
+
            socket.on('userWriting', async () => {
                 let isTyping = true;
                 io.emit('writing', {userName, isTyping})
            })
 
+// edit and remove messages
+
            socket.on('editmessage', async (data) => {
             console.log(data.messageNewText)
             const user = jwt.verify(data.token, TOKEN_KEY)

backend/avatars/PrivateMessage.js

@@ -0,0 +1,13 @@
+const {model, Schema} = require('mongoose');
+
+const PrivateMessage = new Schema({
+    text: {type: String, required: true},
+    createDate: {type: Date, required: true},
+    fromUser:{ type: Schema.Types.ObjectId, ref: 'User' },
+    toUser:{ type: Schema.Types.ObjectId, ref: 'User' },
+    file: {type: String} , // not in use
+    fileType: {type: String} //not in use
+
+})
+
+module.exports = model('PrivateMessage', PrivateMessage)

backend/db/models/User.js

@@ -7,7 +7,8 @@ const User = new Schema({
     isBanned: {type: Boolean, default: false},
     isMutted: {type: Boolean, default: false},
     avatar: {type: String, unique: true, required: false},
-    messages: [{type: Schema.Types.ObjectId, ref: 'Message' }]
+    messages: [{type: Schema.Types.ObjectId, ref: 'Message' }],
+    friends: [{ type: Schema.Types.ObjectId, ref: 'User' }]
 })
 
 module.exports = model('User', User)

frontend/src/components/chatPage/chatPage.scss

@@ -132,6 +132,7 @@
     border: 2px solid grey; 
     background-color:rgb(30, 45, 52);
     .online {
+        position: relative;
         border-radius: 3px;
         padding: 5px;
         border:2px solid rgb(255, 255, 255); 
@@ -156,6 +157,7 @@
     color:rgb(239, 239, 233);
     transition: all 3s ease-in-out;    
     .online {
+        position: relative;
         border-radius: 5px;
         text-overflow: ellipsis;
         padding: 5px;

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

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { useSelector } from 'react-redux';
+
+
+export const AddToFriends = (user) => {
+
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+
+    const isTabletorMobile = (window.screen.width < 730);
+
+    const [isFriend, setIsFreind] = useState(false)
+
+    socket.on('friends', data =>  console.log(data))
+   
+    return (
+        <div onClick={() => {
+                            setIsFreind(!isFriend)
+                            isFriend ? socket.emit('removeFromFriends', user) : socket.emit('addToFriends', user)       
+            }} >
+            <div className= {isTabletorMobile ?'mobileButton addToFriendsButton': "addToFriendsButton" } 
+               style ={{backgroundColor:(isFriend ? 'red': '#1976d3' )}}
+            >
+                
+            </div>
+        </div>
+      
+    )
+}

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

@@ -4,10 +4,12 @@ import { useSelector } from "react-redux";
 import { StyledAvatar } from "../messageForm/StyledAvatar";
 import { Avatar } from "@mui/material";
 import { useState, useEffect } from "react";
-import { useDispatch } from 'react-redux';
 import {selectedUser} from "../../../reducers/dataReducers";
+
 import {isNewPrivateMessages} from "../../../reducers/dataReducers";
 
+import { AddToFriends } from "./AddToFriends";
+
 export const UserInfoButton = ({item, i}) => {
 
 
@@ -85,6 +87,8 @@ useEffect(() => {
                 <span> {item.userName}  </span>
                {isNewPrivate && newPrivateMessagesArray.length > 0 && <span style={{color:'red',position: 'fixed' }} >  {counter}  </span>} 
             </div>
+            <AddToFriends user = {item}/>
+
     </div>
     )
 }

frontend/src/components/chatPage/generalChat/userInfo.scss

@@ -10,3 +10,39 @@
     background-color:rgb(30, 8, 62);
 }
 
+.addToFriendsButton {
+        width: 15px; 
+        height: 15px;
+        top: 8px;
+        background-color: #1976d3;
+        transform: rotate(45deg);
+        position: absolute; 
+        left: 8px;
+        cursor:pointer;
+      
+}  
+.mobileButton {   
+            width: 15px; 
+            height: 15px;
+            top: 0px;
+            left: -5px; 
+        }
+.addToFriendsButton::before,
+    .addToFriendsButton::after {
+        content : ''; 
+        display: block;
+        width: 15px;
+        height: 15px;
+        background-color:inherit;
+        border-radius: 50%; 
+        position: absolute;
+    }
+    .addToFriendsButton::before {
+        top: -8px;
+        left: 0;
+    }
+    .addToFriendsButton::after {
+        top: 0;
+        left: -8px;
+    }  
+

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

@@ -35,8 +35,6 @@ export const UserInfo = () => {
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
     const chatId = useSelector(state => state.userDataReducer.chatId)
     const showUserInfoBox = useSelector(state => state.userDataReducer.showUserInfoBox)
-
-
     const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
 
@@ -49,7 +47,10 @@ export const UserInfo = () => {
     }
 
 console.log(user)
-        
+
+    // if(socket){
+    //     socket.on('my chats', (data)=> console.log('my chats', data))
+    // }
     return (
             <>  
                 <h4 style={{color:'white'}}> Hello, {user.userName} </h4>

frontend/src/components/chatPage/userInfo/userInfo.scss

@@ -24,9 +24,8 @@
 }
 .pcUsersAvatar {
     background-color: grey;
-    width: 100px;
-    height: 100px;
-    font-size: 14;
+    width: 80px !important;
+    height: 80px !important; //need to change in classlist styles
     margin: 20px auto;
     cursor: pointer;
 }

frontend/src/reducers/messageReducer.js

@@ -13,7 +13,8 @@ const initialState = {
     ref: null
 }
 
-const POST_FILES_URL = process.env.REACT_APP_SERVER_URL+`/files`;
+const POST_FILES_URL = `http://localhost:5000/files`;
+
 
 export const sendMessageToSocket = (state, data) => {
              if (!!state.message && state.message.length < 200) {    //remove to other file
@@ -56,7 +57,7 @@ export const fileMessage = createAsyncThunk(
         try {
             const formData = new FormData();
             if(files?.length) {
-                 for (let i = 0; i < files.length; i++) {
+                 for (let i = 0; i < files?.length; i++) {
                 formData.append('files', files[i])
                 }
             } else {
@@ -97,7 +98,7 @@ const messageReducerSlice = createSlice({
     extraReducers: (bilder) => {
     bilder
     .addCase(fileMessage.fulfilled, (state, action) => {
-        console.log('send', action)
+        console.log(action.payload)
         state.files = action.payload.data?.files
             
     })  

frontend/src/reducers/socketReducer.js

@@ -59,6 +59,9 @@ const connectToSocket = (event) => {
                             .on('usersOnline', (data) => {
                                     store.dispatch(getUsersOnline(data))
                                 })
+                            .on('friends', data => {
+                                    console.log('friends from server', data)
+                                })
                             .on('disconnect', (data) => {
                                 if( data === 'io server disconnect') {
                                     socket.disconnect();