add mobile ver for usersbox need to fix

frontend/src/components/chatPage/ChatPage.jsx

@@ -9,6 +9,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import {getSocket} from'../../reducers/socketReducer';
 import { sendMessage, storeMessage } from '../../reducers/messageReducer';
 import { editMessage } from '../../reducers/messageReducer';
+import { SwitchButton } from './SwitchButton';
 import './chatPage.scss';
 
 
@@ -22,27 +23,26 @@ export const ChatPage = () => {
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const socket = useSelector(state => state.getUserSocketReducer.socket)
     const editOldMessage = useSelector(state => state.messageReducer.editMessage)
+    let showUserInfoBox = useSelector(state => state.messageReducer.showUserInfoBox)// || localStorage.getItem('showBox');
+
     const [message, setMessage] = useState({message: ''});
     const isTabletorMobile = (window.screen.width < 730);
-    
-    
+
     useEffect(() => {
         if(token){
             SOCKET_EVENTS.map(event => dispatch(getSocket(event)))       
         }
-
-        console.log('editMessage chat', editOldMessage)
-
-    }, [token, editOldMessage])
-
-
-
+    }, [token, editOldMessage, showUserInfoBox])
+ 
     return (
         <div className='rootContainer'>
 
             <Box className = 'rootBox'>
 
-                <Box className = 'rootMessageForm'>
+
+                { isTabletorMobile ? <SwitchButton/> : null}
+                
+                <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
                     
                     <MessageForm/>
 
@@ -78,6 +78,7 @@ export const ChatPage = () => {
                                     e.preventDefault();
                                     dispatch(sendMessage({user, socket}))
                                     dispatch(getSocket('allmessages'))
+                                    dispatch(editMessage({editMessage: ''}))
                                     setMessage({message: ''})
                                 }
                             }}
@@ -99,11 +100,13 @@ export const ChatPage = () => {
 
                     </Box>            
                 </Box>
-
-                <Box className={(isTabletorMobile)?'usersBoxMobile':'usersBox'}>
-
+                <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
+                  sx = {showUserInfoBox ? {
+                        transform: "translateX(100%)",
+                        display: "none"
+                        }: {}}>
                     <Button 
-                        sx={(isTabletorMobile) ? 
+                        sx={isTabletorMobile ? 
                             {
                                 maxHeight:'25px', 
                                 maxWidth: '20px'} 

frontend/src/components/chatPage/SwitchButton.jsx

@@ -0,0 +1,26 @@
+import Switch from '@mui/material/Switch';
+import { useDispatch } from 'react-redux';
+import { showUserInfoBox } from '../../reducers/userDataReducer';
+import { useSelector } from 'react-redux';
+
+export const SwitchButton = () => {
+    
+    let showUserInfo = useSelector(state => state.messageReducer.showUserInfoBox)// || localStorage.getItem('showBox');
+
+    const label = { inputProps: { 'aria-label': 'Switch demo' } };
+    const dispatch = useDispatch();
+
+    const handleChange = () => {
+        dispatch(showUserInfoBox())
+    }
+
+    return (
+        <div style={{bottom: 5,
+                    position:'absolute'}}>  
+
+            <label>Show users infobar</label>
+
+            <Switch {...label} size="small" defaultChecked onChange={handleChange} />
+        </div>
+    )
+}

frontend/src/components/chatPage/chatPage.scss

@@ -12,8 +12,16 @@
     display: flex;
     flex-grow:2;
     max-width: 75%;
-    flex-direction: column;                    
+    flex-direction: column;                 
 }
+.rootMessageFormMobile {
+    display: flex;
+    flex-grow:2;
+    max-width: 100%;
+    flex-direction: column;                 
+}
+
+
 .time {
     font-style:italic;
     color: rgb(80, 80, 80);
@@ -101,6 +109,7 @@
 }
 
 .usersBoxMobile { 
+    
     align-content: flex-end;
     text-align: center;
     text-overflow: ellipsis;
@@ -110,6 +119,7 @@
     font-size: 11px;
     border-radius: 10px;
     background-color:rgb(243, 243, 243);
+    transition: all 3s ease-in-out;    
     .online {
         border-radius: 5px;
         text-overflow: ellipsis;
@@ -119,4 +129,8 @@
         font-weight: 500;
 
     }
+    .on {
+        transform: translateX(100%);
+        display: none;
+    }
 }

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

@@ -17,7 +17,7 @@ export const UserInfo = () => {
 
     return (
             <> 
-                 <Avatar  sx={ (isTabletorMobile) ? {} : 
+                 <Avatar  sx={ (isTabletorMobile) ? {margin: '5px auto'} : 
                             {
                             bgcolor: 'grey',
                             width: '100px',
@@ -26,8 +26,6 @@ export const UserInfo = () => {
                             margin: '20px auto',
                             cursor: 'pointer'
                             }} /> 
-                
-
                    
                     {user.isAdmin ? 
                         allUsers.map((item) =>

frontend/src/reducers/userDataReducer.js

@@ -9,7 +9,8 @@ const initialState = {
     userLoadingStatus: 'idle',
     token: '',
     socket: null, 
-    responseMessage: ''
+    responseMessage: '',
+    showUserInfoBox: true
 }
 
 const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login';
@@ -42,6 +43,10 @@ const getUserDataSlice = createSlice({
             state.token = ''
         },
         deleteResponseMessage: state => {state.responseMessage = ''},
+        showUserInfoBox: state => {
+            state.showUserInfoBox = !state.showUserInfoBox  //replace later to other reducer file
+            localStorage.setItem('showBox', !state.showUserInfoBox)
+        },
     },
     extraReducers: (builder) => { 
        builder
@@ -76,4 +81,5 @@ export const {
     setUserPassword,
     removeToken,
     deleteResponseMessage,
+    showUserInfoBox
 } = actions;