fix bugs restructure codex

frontend/src/components/chatPage/utils/Time.jsx

@@ -4,7 +4,7 @@ import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'
 
 
 
-export const Time = () => {
+export const TimeAgoMessage = () => {
     
     const formatter = buildFormatter(frenchStrings)
 

frontend/src/components/chatPage/chatPage.scss

@@ -26,6 +26,7 @@
     font-style:italic;
     color: rgb(80, 80, 80);
     font-size: 12px;
+    margin-left: 30px;
 }
 
 .date {
@@ -41,7 +42,7 @@
 
 .message {
     padding: 10px;
-    margin: 5px;
+    margin: 2px 30px;
     max-width: 50%;
     align-self: flex-start;
     border-radius: 10px;
@@ -61,15 +62,25 @@
 
 .myMessage {
     align-self: flex-end;
+    position: relative;
     max-width: 50%;
     background-color: rgb(240, 231, 136);
     cursor: pointer;
 }
-.myData {
-    align-self: flex-end;
-}
-.data {
+.myDate {
     align-self: flex-start;
+    display: flex;
+    font-style:italic;
+    color: rgb(80, 80, 80);
+    font-size: 12px;
+}
+.date {
+    display: flex;
+    align-content:center;
+    align-self: flex-end;
+    font-style:italic;
+    color: rgb(80, 80, 80);
+    font-size: 12px;
 }
 
 // .editMessage{
@@ -79,6 +90,7 @@
 
 .messageBox { 
     display: flex;
+    position: relative;
     padding: 20px;
     border-radius: 10px;
     background-color:rgb(243, 243, 243);

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

@@ -5,38 +5,39 @@ import { Fragment, useRef, useEffect, useMemo} from 'react';
 import { scrollToBottom } from '../utils/scrollToBottom';
 import { useDispatch } from 'react-redux';
 import { editMessage } from '../../../reducers/messageReducer';
-   
+import { TimeAgoMessage } from '../TimeAgoMessage';
+
 export const MessageForm = () => {
 
     const randomColor = require('randomcolor');  
+    const dispatch = useDispatch();
+
     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 dispatch = useDispatch();
+    const avatarImg = '';
    
     const endMessages = useRef(null);
 
     useEffect(() => {
         scrollToBottom(endMessages)
-      }, [startMessages]);
+      }, [startMessages, usersOnline]);
                   
     return (             
             <Box className='messageBox'>                     
                 {
                 startMessages.map((item, i) =>
-                    <Fragment key={i} >
+                    <div key={i} className={ 
+                        (item.userName === user.userName)? 'message myMessage' :'message'}>
 
                         <Avatar 
+                            src= {avatarImg || ''}
                             sx={
                                 (item.userName == user.userName)
                                 ? 
                                 {
                                     alignSelf: 'flex-end',
-                                    fontSize: 10,
-                                    width: '60px',
-                                    height: '60px',
-                                    color:'black',
                                     backgroundColor: userColor
                                 }
                                 :
@@ -45,15 +46,10 @@ export const MessageForm = () => {
                                         if(item.userName === current.userName ) {
                                             return current.color
                                         }
-                                    
                                     } )),
-                                    fontSize: 10,
-                                    width: '60px',
-                                    height: '60px',
-                                    color:'black'
                                 }
                             }> 
-                            {item.userName}
+                            {item.userName.slice(0, 1)}
                         </Avatar>   
 
                         <div 
@@ -77,18 +73,11 @@ export const MessageForm = () => {
                             <p>{item.text}</p>  
 
                         </div>
-                            <div className={ 
-                                (item.userName === user.userName)? 'myData' :'date'}>
-                                <div className='time'>
-                                    {dateFormat(item).time}
-                                </div> 
-                                
-                                <div className='date'>
-                                    {dateFormat(item).year}
-                                </div>
-                            
-                            </div>
-                    </Fragment>
+                        <div className={ 
+                                (item.userName === user.userName)? 'myDate' :'date'}>
+                                {dateFormat(item).time}
+                        </div>
+                    </div>
                 )}
 
                 <div ref={endMessages}></div>

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

@@ -1,31 +1,51 @@
 import {Button,Avatar} from '@mui/material';
 import { useSelector } from 'react-redux';
 import { banUser } from '../service/banUser';
+import Input from '@mui/material/Input';
 import { muteUser } from '../service/muteUser';
 import './userInfo.scss';
 
 
 export const UserInfo = () => {
 
+    const PC_AVATAR_STYLE =    {
+        bgcolor: 'grey',
+        width: '100px',
+        height: '100px',
+        fontSize: 14,
+        margin: '20px auto',
+        cursor: 'pointer'
+        };
+
+    const MOBILE_AVATAR_STYLE =  { margin: '5px auto'};
+  
     //add foto loading function
+      
+    let displayType = 'none';
+    const loadAvatarHandler = () => {
+        
+        console.log('load avatar')
+    }
+
+
     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);
+  
 
     return (
-            <> 
-                 <Avatar  sx={ (isTabletorMobile) ? {margin: '5px auto'} : 
-                            {
-                            bgcolor: 'grey',
-                            width: '100px',
-                            height: '100px',
-                            fontSize: 14,
-                            margin: '20px auto',
-                            cursor: 'pointer'
-                            }} /> 
+            <>  
+                <Input 
+                    type="file"
+                    accept="image/png, image/jpeg"
+                    style = {{display: displayType}}
+                    />
+                <Avatar
+                    sx={ isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} 
+                    onClick={() => loadAvatarHandler()} /> 
                    
                     {user.isAdmin ? 
                         allUsers.map((item) =>