add media query and some fix

frontend/src/components/chatPage/ChatPage.jsx

@@ -8,7 +8,7 @@ import { removeToken} from '../../reducers/userDataReducer'
 import { useDispatch, useSelector } from 'react-redux';
 import {getSocket} from'../../reducers/socketReducer';
 import { sendMessage, storeMessage } from '../../reducers/messageReducer';
-
+import { editMessage } from '../../reducers/messageReducer';
 import './chatPage.scss';
 
 
@@ -21,16 +21,20 @@ export const ChatPage = () => {
     const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const socket = useSelector(state => state.getUserSocketReducer.socket)
-
+    const editOldMessage = useSelector(state => state.messageReducer.editMessage)
     const [message, setMessage] = useState({message: ''});
-
-
-
+    const isTabletorMobile = (window.screen.width < 730);
+    
+    
     useEffect(() => {
         if(token){
             SOCKET_EVENTS.map(event => dispatch(getSocket(event)))       
         }
-    }, [token])
+
+        console.log('editMessage chat', editOldMessage)
+
+    }, [token, editOldMessage])
+
 
 
     return (
@@ -48,19 +52,23 @@ export const ChatPage = () => {
                                         e.preventDefault()
                                         dispatch(sendMessage({user, socket}))
                                         dispatch(getSocket('allmessages'))
+                                        dispatch(editMessage({editMessage: ''}))
                                         setMessage({message: ''})
                                     }}
-                        sx={{
+                        sx={(isTabletorMobile)?{
+                            display: 'flex',
+                            margin: '10px 2px'}
+                        :{
                             display: 'flex',
-                            margin: '20px 5px'
-                        }}
-                    >
+                            margin: '20px 5px'}
+                           
+                        }>
             
                         <TextareaAutosize
                             id="outlined-basic" 
                             label="Type a message..." 
                             variant="outlined" 
-                            value={message.message}
+                            value={message.message || editOldMessage}
                             placeholder='type you message...'
                             minRows={3}
                             maxRows={4}
@@ -92,10 +100,14 @@ export const ChatPage = () => {
                     </Box>            
                 </Box>
 
-                <Box className='usersBox'>
+                <Box className={(isTabletorMobile)?'usersBoxMobile':'usersBox'}>
 
                     <Button 
-                        sx={{margin:'10px 5px'}}
+                        sx={(isTabletorMobile) ? 
+                            {
+                                maxHeight:'25px', 
+                                maxWidth: '20px'} 
+                            :{margin:'10px 5px'}}
                         variant="outlined"
                         onClick={()=> {
                                 localStorage.removeItem('token');

frontend/src/components/chatPage/chatPage.scss

@@ -1,11 +1,12 @@
 .rootContainer {
-    max-width: 90%;
+    max-width: 95%;
+    max-height: 95%;
     margin: 0 auto;
 }
 
 .rootBox {
     display: flex;
-    height: 100vh;
+    height: 97vh;
 }
 .rootMessageForm {
     display: flex;
@@ -56,6 +57,13 @@
     background-color: rgb(240, 231, 136);
     cursor: pointer;
 }
+.myData {
+    align-self: flex-end;
+}
+.data {
+    align-self: flex-start;
+}
+
 // .editMessage{
 //     background-color: rgb(246, 245, 235);
 //     transform:translate(-120px, -90px);
@@ -70,7 +78,7 @@
     flex-grow :2;
     flex-direction: column;
     overflow: scroll;
-    height: 100vh  
+    height: 90vh  
     
 }
 .usersBox { 
@@ -91,3 +99,24 @@
 
     }
 }
+
+.usersBoxMobile { 
+    align-content: flex-end;
+    text-align: center;
+    text-overflow: ellipsis;
+    padding: 5px;
+    width: 20%;
+    overflow: 'scroll';
+    font-size: 11px;
+    border-radius: 10px;
+    background-color:rgb(243, 243, 243);
+    .online {
+        border-radius: 5px;
+        text-overflow: ellipsis;
+        padding: 5px;
+        margin-bottom: 5px;
+        background-color:rgb(247, 233, 233);
+        font-weight: 500;
+
+    }
+}

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

@@ -3,7 +3,9 @@ import { dateFormat } from '../utils/dateFormat';
 import { useSelector } from 'react-redux';   
 import { Fragment, useRef, useEffect, useMemo} from 'react';
 import { scrollToBottom } from '../utils/scrollToBottom';
-           
+import { useDispatch } from 'react-redux';
+import { editMessage } from '../../../reducers/messageReducer';
+   
 export const MessageForm = () => {
 
     const randomColor = require('randomcolor');  
@@ -11,9 +13,9 @@ export const MessageForm = () => {
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const userColor = useMemo(() => randomColor(),[]);
-       
+    const dispatch = useDispatch();
+   
     const endMessages = useRef(null);
- 
 
     useEffect(() => {
         scrollToBottom(endMessages)
@@ -59,25 +61,33 @@ export const MessageForm = () => {
                             onClick = {(e) => {
                                 if(e.target.className.includes('myMessage')){
                                     e.currentTarget.className += ' editMessage' 
+                                    startMessages.map( item => {
+                                        if((item.userName === user.userName) && (item.text === e.target.textContent)){
+                                            console.log('edit message',e.target.textContent )
+                                            dispatch(editMessage({editMessage: e.target.textContent}))                                        
+                                        }
+                                        })
                                     }
-                                //add function to edit message
+                                  
                             }}
-
                             className={ 
                                 (item.userName === user.userName)? 'message myMessage' :'message'}
                         >
 
                             <p>{item.text}</p>  
 
-                            <div className='time'>
-                                {dateFormat(item).time}
-                            </div> 
+                        </div>
+                            <div className={ 
+                                (item.userName === user.userName)? 'myData' :'date'}>
+                                <div className='time'>
+                                    {dateFormat(item).time}
+                                </div> 
+                                
+                                <div className='date'>
+                                    {dateFormat(item).year}
+                                </div>
                             
-                            <div className='date'>
-                                {dateFormat(item).year}
                             </div>
-                        </div>
-                
                     </Fragment>
                 )}
 

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

@@ -2,6 +2,7 @@ import {Button,Avatar} from '@mui/material';
 import { useSelector } from 'react-redux';
 import { banUser } from '../service/banUser';
 import { muteUser } from '../service/muteUser';
+import './userInfo.scss';
 
 
 export const UserInfo = () => {
@@ -16,19 +17,16 @@ export const UserInfo = () => {
 
     return (
             <> 
-                {
-                isTabletorMobile ? 
-                    '' 
-                    : <Avatar sx={{ 
+                 <Avatar  sx={ (isTabletorMobile) ? {} : 
+                            {
                             bgcolor: 'grey',
                             width: '100px',
                             height: '100px',
                             fontSize: 14,
-                            margin: '20px auto'
-                            }}>
-                            {user.userName}
-                    </Avatar>
-                }
+                            margin: '20px auto',
+                            cursor: 'pointer'
+                            }} /> 
+                
 
                    
                     {user.isAdmin ? 
@@ -55,10 +53,14 @@ export const UserInfo = () => {
                                             onClick={()=>{
                                                 muteUser(item.userName, item?.isMutted, socket)
                                             }}
-                                            sx={{
+                                            sx={(isTabletorMobile) 
+                                                ? 
+                                                {height: '15px',
+                                                 maxWidth:'20px'}: 
+                                                {
                                                 margin:'3px',
-                                                height: '25px'
-                                            }}>
+                                                height: '25px'}}>
+
                                                 {item.isMutted
                                                 ? 
                                                 'unmute'
@@ -70,10 +72,14 @@ export const UserInfo = () => {
                                             onClick={()=>{ 
                                                 banUser(item.userName, item.isBanned, socket)
                                             }}
-                                            sx={{
+                                            sx={(isTabletorMobile) 
+                                                ? 
+                                                {height: '15px',
+                                                margin:'2px'} : 
+                                                {
                                                 margin:'3px',
-                                                height: '25px'
-                                            }}>
+                                                height: '25px'}}
+                                       >
                                                 {item?.isBanned ? 'unban' : 'ban'}
                                         </Button> 
                                     </>}
@@ -84,9 +90,7 @@ export const UserInfo = () => {
                                             return <span key={i} style={{color: 'green'}}>online</span>
                                         }})}
                             </div>) 
-
                     :
-
                     usersOnline.map((item, i) =>
                         <div 
                             key={i}

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

@@ -0,0 +1,7 @@
+.userAvatar {
+    background-color: grey;
+    width: 100px;
+    height: 100px;
+    font-size: 14;
+    margin: 20px auto;
+}

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

@@ -0,0 +1,14 @@
+import TimeAgo from 'react-timeago'
+import frenchStrings from 'react-timeago/lib/language-strings/fr'
+import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'
+
+
+
+export const Time = () => {
+    
+    const formatter = buildFormatter(frenchStrings)
+
+return (
+    <TimeAgo date='Feb 1, 1966' formatter={formatter} />
+    )
+}

frontend/src/reducers/messageReducer.js

@@ -2,7 +2,8 @@ import { createSlice} from '@reduxjs/toolkit';
 
 const initialState = {
     startMessages: [],
-    message:''
+    message:'',
+    editMessage: ''
 }
 
 export const sendMessageToSocket = (state, data) => {
@@ -12,11 +13,19 @@ export const sendMessageToSocket = (state, data) => {
             } 
     };
 
+
+export const editMessageToSocket = (state, data) => {
+        if (state.message && state.message.length < 200) {    
+           data.socket.emit('editmessage', {...data.user, message: state.message}); //add backend functional later find by id and edit   
+       } 
+};
+
 const messageReducerSlice = createSlice({
     name: 'messageReducer',
     initialState,
     reducers: {
         storeMessage: (state, action) => {state.message = action.payload.message},
+        editMessage: (state, action) => {state.editMessage = action.payload.editMessage},
         sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
         clearMessage: (state) => {state.message = ''}
         
@@ -31,5 +40,6 @@ export default messageReducer;
 export const {
     storeMessage, 
     sendMessage,
-    clearMessage
+    clearMessage,
+    editMessage
     } = actions;

package-lock.json

@@ -5,7 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "react-responsive": "^9.0.0-beta.10"
+        "react-responsive": "^9.0.0-beta.10",
+        "react-timeago": "^7.1.0"
       }
     },
     "node_modules/css-mediaquery": {
@@ -94,6 +95,14 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/react-timeago": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-7.1.0.tgz",
+      "integrity": "sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/shallow-equal": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
@@ -172,6 +181,12 @@
         "shallow-equal": "^1.2.1"
       }
     },
+    "react-timeago": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-7.1.0.tgz",
+      "integrity": "sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==",
+      "requires": {}
+    },
     "shallow-equal": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "react-responsive": "^9.0.0-beta.10"
+    "react-responsive": "^9.0.0-beta.10",
+    "react-timeago": "^7.1.0"
   }
 }