add find users component and function

backend/app.js

@@ -281,9 +281,9 @@ io.on("connection", async (socket) => {
 // })
 ///
 // console.log(myChats)
-// console.log(users)
+ //console.log(privateChats)
 
-socket.emit('my chats', myChats)
+socket.emit('my chats', privateChats)
 
     socket.emit('connected', dbUser); //socket.user
   

frontend/src/components/chatPage/ChatPage.jsx

@@ -18,6 +18,7 @@ import WebcamCapture from './service/webCam/WebcamCapture';
 import useSound from 'use-sound';
 import getNotif from '../../assets/sendSound.mp3'
 import { PrivateChat } from './privateChat/PrivateChat';
+import { PrivatChatHeader } from './privateChat/PrivatChatHeader';
 
 export const ChatPage = () => {
 
@@ -162,8 +163,10 @@ export const ChatPage = () => {
                  </div> 
                  :
                  ""}
-                    {isPrivatChat?<PrivateChat/> : <MessageForm/>}
-                    
+                    {isPrivatChat? <PrivateChat/>   : <MessageForm/>}
+                   
+
+
                     {isUserTyping.isTyping && (isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
 
                     <Box 

frontend/src/components/chatPage/generalChat/FindUserBox.jsx

@@ -12,9 +12,9 @@ export const FindUserBox = () => {
     
  
     return (
+        <>
         <div 
             className={'online'}                       
-            onClick={() => {console.log(allUsers, "find user in array - allUsers")}}
         >  
             <div>Find users to write</div>
             <input style={{width:'80%'}}
@@ -26,8 +26,11 @@ export const FindUserBox = () => {
                 
             </input>
 
-            { showUsers && findUser.length > 0  && res.map(( item, i) => <UserInfoButton item = {item} i = {i}  key={i}/>  )}
+           
 
         </div>
+        { showUsers && findUser.length > 0  && res.map((item, i) => <UserInfoButton item = {item} i = {i}  key={i}/>  )}
+
+    </>
     )
 }

frontend/src/components/chatPage/generalChat/UserInfoButton.jsx

@@ -3,6 +3,7 @@ import { privateMessage } from "../../../reducers/userDataReducer";
 import { useSelector } from "react-redux";
 import { StyledAvatar } from "../messageForm/StyledAvatar";
 import { Avatar } from "@mui/material";
+import { useState } from "react";
 
 export const UserInfoButton = ({item, i}) => {
 
@@ -14,27 +15,36 @@ export const UserInfoButton = ({item, i}) => {
     const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
     const chatId = useSelector(state => state.userDataReducer.toUser.socketId)
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
-
+    const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
+    const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
 
     return (
         <div 
-        className={isPrivatChat&&(chatId === item.socketId)? 'online active' :'online' }                       
-        onClick={() => {
-            console.log(item.socketId, chatId)
+        className={(item.socketId&&isPrivatChat&&(chatId === item.socketId))? 'online active' :'online' }                       
+        onClick={(e) => {
+            console.log(e.target.lastChild.textContent)
+            // if (item.userName == e.target.lastChild.textContent){
+            //     e.target.lastChild.textContent.add('arrow')}
+            //     else {
+            //         e.target.classList.remove('arrow')
+            //     };
             store.dispatch(privateMessage({toUser: item}))
             socket.emit('privat chat', {
                 user,
                 to: item.socketId,
                 toUser: item
               })
-        }
+            }
         }
         >  
         
             <div style={{color: item.color}}>
-            <StyledAvatar  key={i}  sx={{ marginRight:2}}
+            <StyledAvatar  key={i}  sx={{ marginRight:2}} 
+                           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
+                           variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
+
 >
                 <Avatar 
                     src= {SERVER_URL + '/'+ item?.avatar}
@@ -48,9 +58,6 @@ export const UserInfoButton = ({item, i}) => {
             </StyledAvatar>
                 {item.userName}  
             </div>
-            <span style={{color: 'green'}}>
-                online
-            </span>
     </div>
     )
 }

frontend/src/components/chatPage/privateChat/PrivatChatHeader.jsx

@@ -0,0 +1,10 @@
+export const PrivatChatHeader = ({userName}) => {
+
+//add dispatch and saving name for user to store
+
+    return (
+        <>
+            <span> You and {userName} </span>
+        </>
+    )
+}

frontend/src/components/chatPage/privateChat/PrivateChat.jsx

@@ -9,6 +9,7 @@ import { MessageEditorMenu } from '../MessageEditorMenu.jsx';
 import imgBtn from '../../../assets/img/gg.png';
 import useSound from 'use-sound';
 import notifSound from '../../../assets/get.mp3'
+import { PrivatChatHeader } from './PrivatChatHeader';
 
 
 export const PrivateChat = () => {
@@ -25,11 +26,9 @@ export const PrivateChat = () => {
     let endMessages = useRef(null);
 
 socket.on('send privat messages', (messages)=> {
-    console.log(messages)
     setStartMessages(messages)
   });
 
-
   ///need to test not working
 socket.on("private message", (message)=> {
     startMessages.push(message)
@@ -50,8 +49,10 @@ socket.on("private message", (message)=> {
       }, [startMessages]);
            
 
-    return (             
+    return (  
+        
             <Box className='messageBox'>  
+                
                 {
                 startMessages.map((item, i) =>
                     <div key={i + 1} className={ 
@@ -141,6 +142,7 @@ socket.on("private message", (message)=> {
                 <div ref={endMessages}></div>
 
             </Box>
+        
     )
 
     

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

@@ -1,4 +1,5 @@
 import {Avatar} from '@mui/material';
+import { StyledAvatar } from '../messageForm/StyledAvatar';
 import { useSelector } from 'react-redux';
 import './userInfo.scss';
 import { useDispatch } from 'react-redux';
@@ -53,8 +54,6 @@ export const UserInfo = () => {
         setDisplayType('none')
     }
 
-console.log(allUsers)
-
 
 if(socket){
     socket.on('my chats', (data)=> console.log('my chats', data))