backend/app.js

@@ -11,6 +11,8 @@ const bcrypt = require('bcrypt');
 require('dotenv').config(); // add dotnv for config
 const Uuid = require('uuid'); //lib for unic id generate
 const fileupload = require('express-fileupload');
+const fs = require('fs');
+
 
 
 const server = http.createServer(app);
@@ -74,7 +76,8 @@ app.post('/login', async (req, res) => {
                 isAdmin: !await User.count().exec(),
                 isBanned: false,
                 isMutted: false, 
-                avatar: ''
+                avatar: '',
+                messages: []
             });
 
             await user.save()
@@ -108,7 +111,12 @@ app.post('/avatar', async (req, res) =>  {
         const user = jwt.verify(req.body.token, TOKEN_KEY);
         const avatarFileName = Uuid.v4() + '.jpeg';
         file.mv(STATIC_PATH + '\/' + avatarFileName)
-        const userFromDb = await User.findOneAndUpdate({userName: user.userName},{ $set: {'avatar': avatarFileName}},   {
+        const userFromDb = await getOneUser(user.userName);
+        if(userFromDb.avatar){
+            const oldAvatar = userFromDb.avatar;
+            fs.unlinkSync(STATIC_PATH + '\/' + oldAvatar)
+        }
+        await User.findOneAndUpdate({userName: user.userName},{ $set: {'avatar': avatarFileName}},   {
             new: true
           });
         return res.json({ message:'Avatar was uploud succesfully...', avatarUrl: avatarFileName})
@@ -173,7 +181,7 @@ io.on("connection", async (socket) => {
          getAllDbUsers(socket); 
     }//sent all users from db to admin
 
-    const messagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20);
+    const messagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20).populate( {path:'user'});   
     socket.emit('allmessages', messagesToShow.reverse());
     socket.on("message", async (data) => {
         const dateNow = Date.now(); // for correct working latest post 
@@ -196,18 +204,20 @@ io.on("connection", async (socket) => {
                 userName: userName,
                 createDate: Date.now(),
                 user: oneUser.id, //add link to other collection by id
-                userAvatar: oneUser.avatar
             });
             try {
-                await message.save(); 
-                
-
+                await message.save();
+                if(!oneUser.messages){
+                    await oneUser.update({ $set: {'messages': []}});
+                }
+                await oneUser.messages.push(message)
+                await oneUser.save()
             } catch (error) {
                 console.log('Message save to db error', error);   
             }
-           // const newMessagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20);
-            io.emit('newmessage', message);
-        // }
+            const newMessages = await message.populate( {path:'user'})   
+            io.emit('newmessage', newMessages);        
+            // }
         // } 
     });
     

backend/db/models/Message.js

@@ -4,8 +4,7 @@ const Message = new Schema({
     text: {type: String, required: true},
     userName : {type: String, required: true},
     createDate: {type: Date, required: true},
-    user: [{ type: Schema.Types.ObjectId, ref: 'User' }], //not using 
-    userAvatar: {type: String, required: false} // change to agregation
+    user: { type: Schema.Types.ObjectId, ref: 'User' } //not using 
 })
 
 module.exports = model('Message', Message)

backend/db/models/User.js

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

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -17,8 +17,11 @@ export const MessageForm = () => {
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const userColor = useMemo(() => randomColor(),[]);
+
     const endMessages = useRef(null);
 
+    
+
     useEffect(() => {
         scrollToBottom(endMessages)
       }, [startMessages, usersOnline]);
@@ -28,10 +31,11 @@ export const MessageForm = () => {
                 {
                 startMessages.map((item, i) =>
                     <div key={i} className={ 
-                        (item.userName === user.userName)? 'message myMessage' :'message'}>
-                                {console.log(item)}
+                        (item.userName === user.userName)? 'message myMessage' :'message'}>    
+                        {console.log(item)}
                         <Avatar 
-                            src= {SERVER_URL + item.userAvatar}
+                      
+                            src= {SERVER_URL + item?.user?.avatar}
                             sx={
                                 (item.userName == user.userName)
                                 ? 

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

@@ -6,7 +6,7 @@ import { muteUser } from '../service/muteUser';
 import './userInfo.scss';
 import { useDispatch } from 'react-redux';
 import { getUserAvatar } from '../../../reducers/userDataReducer';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { store } from '../../../store';
 
 
@@ -41,13 +41,17 @@ export const UserInfo = () => {
     const usersOnline = [...new Set(useSelector(state => state.getUserSocketReducer.usersOnline))];//Set?
     const socket = useSelector(state => state.getUserSocketReducer.socket)
     const isTabletorMobile = (window.screen.width < 730);
-    let userAvatarUrl = SERVER_URL + user.avatar;
+    const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
+
+    let userAvatarUrl = SERVER_URL + (storeUserAvatar || user.avatar);
+
     const inputHandler = (e) => {
         const file = e.target.files[0]
         dispatch(getUserAvatar(file))
         setDisplayType('none')
-       
     }
+    //add delete avatar function later 
+
 
     return (
             <>  

frontend/src/reducers/userDataReducer.js

@@ -84,7 +84,7 @@ const getUserDataSlice = createSlice({
                 state.userLoadingStatus = 'error';
             }
         })
-           .addCase(getUserData.rejected, (state, action) => {
+            .addCase(getUserData.rejected, (state, action) => {
                state.userLoadingStatus = 'error';
                if(action.payload?.message){
                 state.responseMessage = action.payload.message
@@ -92,7 +92,7 @@ const getUserDataSlice = createSlice({
             state.responseMessage = 'Something went wrong...'
         })
             .addCase(getUserAvatar.fulfilled, (state, action) => {
-                state.avatar = action.payload.data.avatarUrl
+                state.avatar = action.payload.data?.avatarUrl
                 
         })
             .addCase(getUserAvatar.rejected, (state, action) => {