new mobile version test

backend/app.js

@@ -23,7 +23,7 @@ app.use(express.static('avatars')); //folder for static files
 
 const io = require("socket.io")(server, {
     cors: {
-        origin: "http://localhost:3000" //client endpoint and port
+        origin: "http://192.168.0.107:3000" //client endpoint and port
     }
 });
 const PORT = process.env.PORT || 5000;

frontend/src/components/chatPage/ChatPage.jsx

@@ -20,7 +20,7 @@ import getNotif from '../../assets/sendSound.mp3'
 
 export const ChatPage = () => {
 
-    const SOCKET_EVENTS = process.env.REACT_APP_SERVER_URL || ['allmessages', 'usersOnline', 'allDbUsers']
+    const SOCKET_EVENTS = ['allmessages', 'usersOnline', 'allDbUsers']
 
     const dispatch = useDispatch();
 
@@ -41,7 +41,6 @@ export const ChatPage = () => {
 
     const webcamEventHandler = () => {
         setisCamActiv(!isCamActiv)
-
     }
 
     useEffect(() => {
@@ -66,12 +65,41 @@ export const ChatPage = () => {
     return (
         <div className='rootContainer'>
 
-    
+           
 
-            <Box className = 'rootBox'>
+            <Box className = {isTabletorMobile?'mobileRootBox':'rootBox'}>
+           
 
-                { isTabletorMobile ? <SwitchButton/> : null}
-                
+            <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
+                  sx = {showUserInfoBox ? {
+                        transform: "translateX(100%)",
+                        display: "none"
+                        }: { }}>      
+                    <UserInfo/> 
+                    { isTabletorMobile ? <SwitchButton/> : null}
+                    <Button 
+                        style={isTabletorMobile ? 
+                            {
+                                maxHeight:'20px', 
+                                maxWidth: '15px',
+                                fontSize: '10px',
+                                marginLeft: '25px',
+                                marginRight: '10px'} 
+                            :{margin:'10px 5px'}}
+                        variant="contained"
+                        onClick={()=> {
+                                localStorage.removeItem('token');
+                                dispatch(removeToken());
+                                socket.disconnect(); 
+                                }}>
+                        Logout
+                    </Button>
+                   
+                    
+                   
+                </Box>
+            
+               
                 <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
                 {isCamActiv ? 
                 <div>  
@@ -158,7 +186,7 @@ export const ChatPage = () => {
                             variant="outlined" 
                             value={message.message}
                             placeholder='type you message...'
-                            minRows={3}
+                            minRows={2}
                             maxRows={4}
                             className='textArea'
                             onKeyPress={(e) => {
@@ -189,29 +217,7 @@ export const ChatPage = () => {
 
                     </Box>            
                 </Box>
-                <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
-                  sx = {showUserInfoBox ? {
-                        transform: "translateX(100%)",
-                        display: "none"
-                        }: {}}>
-                    <Button 
-                        sx={isTabletorMobile ? 
-                            {
-                                maxHeight:'25px', 
-                                maxWidth: '20px'} 
-                            :{margin:'10px 5px'}}
-                        variant="outlined"
-                        onClick={()=> {
-                                localStorage.removeItem('token');
-                                dispatch(removeToken());
-                                socket.disconnect(); 
-                                }}>
-                        Logout
-                    </Button>
-
-                    <UserInfo/>
-
-                </Box>
+                
             </Box>
         </div>
     )

frontend/src/components/chatPage/SwitchButton.jsx

@@ -12,12 +12,11 @@ export const SwitchButton = () => {
     }
 
     return (
-        <div style={{bottom: 5,
-                    position:'absolute'}}>  
+        <div>  
 
-            <label>Show users infobar</label>
+            <label>Infobar</label>
 
-            <Switch {...label} size="small" defaultChecked onChange={() => handleChange()} />
+            <Switch {...label} size="small"  onChange={() => handleChange()} />
         </div>
     )
 }

frontend/src/components/chatPage/chatPage.scss

@@ -1,13 +1,21 @@
 .rootContainer {
     max-width: 95%;
-    max-height: 95%;
+    max-height: 95vh;
     margin: 0 auto;
 }
 
+
 .rootBox {
     display: flex;
-    height: 97vh;
+    height: 94vh;
+    justify-content: center;
+}
+.mobileRootBox {
+    display: block;
+
+
 }
+
 .rootMessageForm {
     display: flex;
     flex-grow:2;
@@ -98,7 +106,8 @@
     flex-grow :2;
     flex-direction: column;
     overflow: scroll;
-    height: 90vh  
+    height: 70vh;
+     
     
 }
 .usersBox { 
@@ -107,7 +116,7 @@
     padding: 20px;
     margin-left: 10px;
     width: 20%;
-    overflow: 'scroll';
+    overflow: scroll;
     border-radius: 10px;
     background-color:rgb(243, 243, 243);
     .online {
@@ -121,13 +130,11 @@
 }
 
 .usersBoxMobile { 
-    
-    align-content: flex-end;
-    text-align: center;
-    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
     padding: 5px;
-    width: 20%;
-    overflow: 'scroll';
+    text-align: center;
+    overflow: scroll;
     font-size: 11px;
     border-radius: 10px;
     background-color:rgb(243, 243, 243);

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

@@ -17,7 +17,7 @@ export const MessageForm = () => {
     const dispatch = useDispatch();
     const socket = useSelector(state => state.getUserSocketReducer.socket)
 
-    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://192.168.0.107:5000/';
 
     const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
@@ -39,7 +39,7 @@ export const MessageForm = () => {
             scrollToBottom((endMessages)) 
         }
         if(newMessages.length > 0){
-            newMessages.map(i => console.log(i.userName === user.userName))
+            newMessages.map(i => console.log('newmessage', i.userName === user.userName))
         }
       }, [startMessages, newMessages]);
            

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

@@ -34,7 +34,7 @@ export const UserInfo = () => {
             setDisplayType('none')
         }, 4000)
     }
-    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://192.168.0.107:5000/';
 
     const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
@@ -59,12 +59,14 @@ export const UserInfo = () => {
     return (
             <>  
                 <h4> Hello, {user.userName} </h4>
+               
                 <Avatar
                     sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
                     src={userAvatarUrl ? SERVER_URL + userAvatarUrl : ""}
                     >
                 </Avatar>  
+                
                 <input
                         type="file"
                         accept="image/png, image/jpeg"
@@ -74,7 +76,7 @@ export const UserInfo = () => {
                         }}
                         onChange = {e => inputHandler(e)}
                        />
-                    {user.isAdmin ? 
+                    {user.isAdmin && !isTabletorMobile ? 
                         allUsers.map((item, key) =>
                             <div 
                                 key={item._id}
@@ -132,7 +134,7 @@ export const UserInfo = () => {
                                     }
                             </div>) 
                     :
-                    usersOnline.map((item, i) =>
+                     !isTabletorMobile && usersOnline.map((item, i) =>
                         <div 
                             key={i}
                             className='online'>  

frontend/src/reducers/messageReducer.js

@@ -11,7 +11,7 @@ const initialState = {
     ref: null
 }
 
-const POST_FILES_URL = 'http://localhost:5000/files';
+const POST_FILES_URL = 'http://192.168.0.107:5000/files';
 
 
 export const sendMessageToSocket = (state, data) => {

frontend/src/reducers/socketReducer.js

@@ -17,7 +17,7 @@ const initialState = {
 }
 
 
-const SOCKET_URL =  process.env.REACT_APP_SERVER_URL || 'http://localhost:5000'; 
+const SOCKET_URL = 'http://192.168.0.107:5000'; 
 
 const connectToSocket = (event) => {
  

frontend/src/reducers/userDataReducer.js

@@ -12,12 +12,12 @@ const initialState = {
     token: '',
     socket: null, 
     responseMessage: '',
-    showUserInfoBox: true,
+    showUserInfoBox: false,
     avatar: ''
 }
 
-const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login';
-const GET_AVATAR_URL =  process.env.REACT_APP_GET_AVATAR_URL || 'http://localhost:5000/avatar';
+const POST_URL =  process.env.REACT_APP_POST_URL || 'http://192.168.0.107:5000/login';
+const GET_AVATAR_URL =  process.env.REACT_APP_GET_AVATAR_URL || 'http://192.168.0.107:5000/avatar';
 
 
 export const getUserData = createAsyncThunk(
@@ -89,7 +89,7 @@ const getUserDataSlice = createSlice({
                if(action.payload?.message){
                 state.responseMessage = action.payload.message
         }
-            state.responseMessage = 'Something went wrong...'
+            state.responseMessage = `Something went wrong...`
         })
             .addCase(getUserAvatar.fulfilled, (state, action) => {
                 state.avatar = action.payload.data?.avatarUrl