feat: add visual display for users online

frontend/src/components/chatPage/ChatPage.js

@@ -19,6 +19,7 @@ export const ChatPage = ({ onExit, token }) => {
     const [socket, setSocket] = useState(null);
     const [messages, setMessages] = useState([])
     const [user, setUser] = useState({})
+    const [usersOnline, setUsersOnline] = useState([])
 
      
     useEffect(() => {
@@ -58,6 +59,7 @@ export const ChatPage = ({ onExit, token }) => {
             }); 
             socket.on('usersOnline', (data) => {
                 console.log( data , 'online');
+                setUsersOnline(data)
                 }).on('error', (e) => {
                 console.log(e)
             });  
@@ -93,49 +95,71 @@ export const ChatPage = ({ onExit, token }) => {
             <Box 
             sx={{
                 display: 'flex',
-                padding: '20px'
+                height: '100vh'
             }}>
                 <Box
-                className='messageBox'
                 sx={{
                     display: 'flex',
                     flexGrow:'2',
-                    flexDirection: 'column',
-                    
+                    flexDirection: 'column',                    
                 }}
                 >
-                {
-                messages.map((item) =>
-                    <div 
-                        key={item._id}
-                        className={ (item.userName == user.userName)? 
-                        'message myMessage' :
-                         'message'}>
-                       <span>{item.userName}</span>
-                       <p>{item.text}</p>  
-                      <div>{item.createDate}</div>
-                    </div>
-
-                )}
+                    <Box                 
+                    className='messageBox'
+                    sx={{
+                        display: 'flex',
+                        flexGrow:'2',
+                        flexDirection: 'column',
+                        overflow: 'scroll',
+                        height: '100vh'
+                        
+                    }}
+>
+                        {
+                        messages.map((item) =>
+                            <div 
+                                key={item._id}
+                                className={ (item.userName == user.userName)? 
+                                'message myMessage' :
+                                'message'}>
+                            <span>{item.userName}</span>
+                            <p>{item.text}</p>  
+                            <div>{item.createDate}</div>
+                            </div>
+
+                        )}
+                    </Box>
+            
                 
                 <MessageForm sendMessage = {(data) => {
                         sendMessage(data)
                     }}></MessageForm>
-                <Button variant="contained"
-                            onClick={(e)=> {
-                            socket.disconnect()
-                            onExit()
-                            }}>Logout</Button>
+                
                 </Box>
                 <Box
-                    sx={{
-                    
-                        display: 'flex',
-                        flexDirection: 'column',
-                        
-                }}
+                   className='usersBox'
                 >
+                    <Button 
+                       sx={{
+                        margin:'10px 5px'
+                    }}
+                    variant="contained"
+                    onClick={(e)=> {
+                    socket.disconnect()
+                    onExit()
+                    }}>Logout</Button>
+
+
+                    {usersOnline.map((item) =>
+                     <div 
+                        key={item._id}
+                        className='online'>
+                       <div>{item.userName}</div>
+                       <span style={{color: 'red'}}>Online</span>
+                    </div>)}
+
                     
+                            
                     <Userslist></Userslist>
                  
 

frontend/src/components/chatPage/chatPage.scss

@@ -1,6 +1,6 @@
 .message {
     padding: 10px;
-    margin: 10px;
+    margin: 5px;
     max-width: 50%;
     border-radius: 10px;
     box-shadow: 21px -16px 11px -9px rgba(34, 60, 80, 0.29);
@@ -11,7 +11,7 @@
     span {
         display: block;
         padding: 5px;
-        height: 35px;
+        height: 25px;
         border-radius: 20px;
         background-color:rgb(187, 223, 235);
         color: rgb(13, 12, 17);  
@@ -31,4 +31,20 @@
     box-shadow: 21px -26px 11px -23px rgba(20, 43, 51, 0.22);
     background-color:rgb(243, 243, 243)
 }
+.usersBox { 
+    align-content: flex-end;
+    text-align: center;
+    padding: 20px;
+    margin-left: 10px;
+    width: 20%;
+    border-radius: 10px;
+    box-shadow: 21px -26px 11px -23px rgba(20, 43, 51, 0.22);
+    background-color:rgb(243, 243, 243);
+    .online {
+        border-radius: 5px;
+        margin-bottom: 5px;
+        box-shadow: 21px -26px 11px -23px rgba(0, 0, 0, 0.22);
+        background-color:rgb(211, 204, 204)
 
+    }
+}