add avatars for messages and users need to refresh

backend/app.js

@@ -174,7 +174,6 @@ io.on("connection", async (socket) => {
     }//sent all users from db to admin
 
     const messagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20);
-
     socket.emit('allmessages', messagesToShow.reverse());
     socket.on("message", async (data) => {
         const dateNow = Date.now(); // for correct working latest post 
@@ -191,10 +190,13 @@ io.on("connection", async (socket) => {
 
         // if(!oneUser.isMutted && post){
         // if(((Date.now() - Date.parse(post.createDate)) > 150)){//change later 15000  
+        
         const message = new Message({
                 text: data.message,
                 userName: userName,
-                createDate: Date.now()
+                createDate: Date.now(),
+                user: oneUser.id, //add link to other collection by id
+                userAvatar: oneUser.avatar
             });
             try {
                 await message.save(); 

backend/db/models/Message.js

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

frontend/src/components/chatPage/ChatPage.jsx

@@ -33,7 +33,7 @@ export const ChatPage = () => {
         if(token){
             SOCKET_EVENTS.map(event => dispatch(getSocket(event)))       
         }
-    }, [token, editOldMessage, showUserInfoBox])
+    }, [token, editOldMessage, showUserInfoBox, ])
  
     return (
         <div className='rootContainer'>

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

@@ -11,13 +11,12 @@ export const MessageForm = () => {
 
     const randomColor = require('randomcolor');  
     const dispatch = useDispatch();
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
 
     const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const userColor = useMemo(() => randomColor(),[]);
-    const avatarImg = '';
-   
     const endMessages = useRef(null);
 
     useEffect(() => {
@@ -30,9 +29,9 @@ export const MessageForm = () => {
                 startMessages.map((item, i) =>
                     <div key={i} className={ 
                         (item.userName === user.userName)? 'message myMessage' :'message'}>
-
+                                {console.log(item)}
                         <Avatar 
-                            src= {avatarImg || ''}
+                            src= {SERVER_URL + item.userAvatar}
                             sx={
                                 (item.userName == user.userName)
                                 ? 
@@ -49,7 +48,7 @@ export const MessageForm = () => {
                                     } )),
                                 }
                             }> 
-                            {item.userName.slice(0, 1)}
+                            {item?.userName.slice(0, 1)}
                         </Avatar>   
 
                         <div 

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 } from 'react';
+import { useEffect, useState } from 'react';
 import { store } from '../../../store';
 
 
@@ -21,50 +21,50 @@ export const UserInfo = () => {
         cursor: 'pointer'
         };
 
+
     const MOBILE_AVATAR_STYLE =  { margin: '5px auto'};
+ 
+    const [displayType, setDisplayType] = useState('none');
 
     const dispatch = useDispatch();
-  
-    //add foto loading function
-    const avatarImg = useSelector(state => state.getUserSocketReducer.avatar)
-  
-    let displayType = 'block';
-
 
     const loadAvatarHandler = () => {
-
-     
+        setDisplayType('block')
+        setTimeout(() => {
+            setDisplayType('none')
+        }, 4000)
     }
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
 
     const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     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 inputHandler = (e) => {
         const file = e.target.files[0]
         dispatch(getUserAvatar(file))
-        console.log(avatarImg)
+        setDisplayType('none')
+       
     }
 
-
     return (
             <>  
-                <Input 
-                    type="file"
-                    accept="image/png, image/jpeg"
-                    name='file'
-                    style = {{display: displayType}}
-                    onChange = {e => inputHandler(e)}
-                    />
                 <Avatar
-                    sx={ isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} 
+                    sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
-                    src="/static/images/avatar/2.jpg"  /> 
-                   
+                    src={userAvatarUrl} >
+                </Avatar>  
+                <input
+                        type="file"
+                        accept="image/png, image/jpeg"
+                        name='file'
+                        style = {{
+                            display: displayType
+                        }}
+                        onChange = {e => inputHandler(e)}
+                       />
                     {user.isAdmin ? 
                         allUsers.map((item) =>
                             <div 

frontend/src/reducers/userDataReducer.js

@@ -93,6 +93,7 @@ const getUserDataSlice = createSlice({
         })
             .addCase(getUserAvatar.fulfilled, (state, action) => {
                 state.avatar = action.payload.data.avatarUrl
+                
         })
             .addCase(getUserAvatar.rejected, (state, action) => {
                 console.log('get avatar rejected', action.payload)