add user names for messages

frontend/src/components/chatPage/ChatPage.jsx

@@ -36,9 +36,7 @@ export const ChatPage = () => {
     
     const isTabletorMobile = (window.screen.width < 730);
 
-    const [play] = useSound(getNotif);
-
-
+    const [play] = useSound(getNotif, {volume: 0.2});
 
     const webcamEventHandler = async () => {
             let stream = null;

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

@@ -39,7 +39,7 @@ export const MessageForm = () => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 
         } 
-      }, [startMessages]);
+      }, [startMessages, newMessages]);
            
     const messages = startMessages.concat(newMessages)  
 
@@ -88,8 +88,16 @@ export const MessageForm = () => {
                                 {item?.userName.slice(0, 1)}
                             </Avatar>   
 
-                        
+
                         </StyledAvatar>
+                        <span
+                            style={{'alignItems': 'center',
+                                    marginLeft: 5, 
+                                    fontStyle: 'italic', 
+                                    fontWeight: 800
+                                }}
+
+                        > {item.userName}</span>
                         <div 
                             key={i}
                         
@@ -108,11 +116,10 @@ export const MessageForm = () => {
                                 
                             </iframe>
                             :
-                           
                             (item.file && item.fileType && item.fileType.split('/')[0] !== 'image') ? 
 
                             <div style={{'display': 'flex', 'alignItems': 'center'}} >
-                          
+
                                 <a href={SERVER_URL + item.file} download> 
                                     <Button
                                         variant="contained" 

frontend/src/reducers/messageReducer.js

@@ -8,15 +8,14 @@ const initialState = {
     editMessage: '',
     messageId: '', 
     files: [],
+    percentage: 0,
     ref: null
 }
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 
-
 const POST_FILES_URL = SERVER_URL + '/files';
 
-
 export const sendMessageToSocket = (state, data) => {
              if (!!state.message && state.message.length < 200) {    //remove to other file
                 data.socket.emit('message', {...data.user, message: state.message}); 
@@ -48,12 +47,16 @@ export const fileMessage = createAsyncThunk(
                 formData.append('files', files)
             }
             formData.append('token', token)
-            const response = await axios.post(POST_FILES_URL, formData,
-                {
+            const response = await axios.post(POST_FILES_URL, formData,{
+                onUploadProgress: (progress) => {
+                    const {loaded, total} = progress;
+                    const persentage = Math.floor(loaded * 100 / total);
+                },
                     headers: {
                       "Content-type": "multipart/form-data",
                     }
                   });
+                  
             return await response;
             
         } catch (err) {

frontend/src/reducers/userDataReducer.js

@@ -19,7 +19,6 @@ const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 
 const POST_URL =  SERVER_URL + '/login';
 const GET_AVATAR_URL =  SERVER_URL + '/avatar';
-console.log(POST_URL)
 
 export const getUserData = createAsyncThunk(
     'userData/getUser',