add new private message indicatorplus merge from newbranch

backend/app.js

@@ -210,7 +210,6 @@ io.use( async (socket, next) => {
     const usersOnline = [];
     sockets.map(sock => usersOnline.push(sock.user))
    
-   
     try {
         const user = jwt.verify(token, TOKEN_KEY);
         const userName = user.userName;

frontend/src/components/chatPage/ChatPage.jsx

@@ -125,7 +125,7 @@ export const ChatPage = () => {
             <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
                   sx = {showUserInfoBox ? {
                         transform: "translateX(100%)",
-                        display: "none"
+                        display: "block"
                         }: { }}>      
                     <UserInfo/> 
                     { isTabletorMobile ? <SwitchButton/> : null}

frontend/src/components/chatPage/SwitchButton.jsx

@@ -14,7 +14,7 @@ export const SwitchButton = () => {
     return (
         <div>  
 
-            <label>Infobar</label>
+            <label>Hide users</label>
 
             <Switch {...label} size="small"  onChange={() => handleChange()} />
         </div>

frontend/src/components/chatPage/chatPage.scss

@@ -114,7 +114,7 @@
     position: relative;
     padding: 20px;
     border-radius: 10px;
-    background-color:rgb(243, 243, 243);
+    background-color:rgb(229, 232, 233);
     display: flex;
     flex-grow :2;
     flex-direction: column;
@@ -152,7 +152,8 @@
     font-size: 11px;
     border-radius: 10px;
     border: 2px solid grey; 
-    background-color:rgb(243, 243, 243);
+    background-color:rgb(7, 42, 60);
+    color:rgb(239, 239, 233);
     transition: all 3s ease-in-out;    
     .online {
         border-radius: 5px;
@@ -160,7 +161,7 @@
         padding: 5px;
         border: 2px solid grey;
         margin-bottom: 5px;
-        background-color:rgb(247, 233, 233);
+        background-color:rgb(7, 42, 60);;
         font-weight: 500;
 
     }

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

@@ -3,7 +3,8 @@ import { privateMessage } from "../../../reducers/userDataReducer";
 import { useSelector } from "react-redux";
 import { StyledAvatar } from "../messageForm/StyledAvatar";
 import { Avatar } from "@mui/material";
-import { useEffect,useState } from "react";
+import { useState, useEffect } from "react";
+import { useDispatch } from 'react-redux';
 import {selectedUser} from "../../../reducers/dataReducers";
 import {isNewPrivateMessages} from "../../../reducers/dataReducers";
 
@@ -36,7 +37,17 @@ useEffect(() => {
  } , [newPrivateMessagesArray]);
 
 
+    const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
+    const [isPrivate, setIsPrivate] = useState(false)
+
+
+    useEffect(() => {
+        if(newPrivateMessages.text && newPrivateMessages?.sender[0].userName === item.userName){
+         setIsPrivate(!!newPrivateMessages.text)
+         }
+    },[newPrivateMessages])
+   
     return (
         <div 
         className={(item.socketId&&isPrivatChat&&(chatId === item.socketId))? 'online active' :'online' }                       
@@ -45,6 +56,7 @@ useEffect(() => {
             store.dispatch(privateMessage({toUser: item}))
             store.dispatch(isNewPrivateMessages(false))
             setCounter(0) 
+            setIsPrivate(false) 
             socket.emit('privat chat', {
                 user,
                 to: item.socketId,
@@ -53,13 +65,14 @@ useEffect(() => {
             }
         }
         >  
-        
+         {isPrivate && item.userName && <span style={{color:'red'}} > new </span>} 
             <div style={{color: item.color}}>
             <StyledAvatar  key={i}  sx={{ marginRight:2}} 
                            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
                            variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
 
 >
+    
                 <Avatar 
                     src= {SERVER_URL + '/'+ item?.avatar}
                     sx={{ alignSelf: 'flex-end'}}
@@ -68,12 +81,10 @@ useEffect(() => {
                     {item?.userName.slice(0, 1)}
                 </Avatar>   
 
-  
             </StyledAvatar>
                 <span> {item.userName}  </span>
                {isNewPrivate && newPrivateMessagesArray.length > 0 && <span style={{color:'red',position: 'fixed' }} >  {counter}  </span>} 
             </div>
-          
     </div>
     )
 }

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

@@ -25,7 +25,7 @@ export const MessageForm = () => {
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     const storeMessageId = useSelector(state => state.messageReducer.messageId)
     const newMessages = useSelector(state => state.getUserSocketReducer.newMessages)
-
+    
     let endMessages = useRef(null);
     const [isEditing, setIsEditing] = useState(false)   
     const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
@@ -36,7 +36,6 @@ export const MessageForm = () => {
     const [play] = useSound(notifSound);
 
 
-
     useEffect(() => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 

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

@@ -65,7 +65,6 @@ export const PrivateChat = () => {
                 
                     {
                     startMessages.map((item, i) =>
-                    
                         <div key={i + 1} className={ 
                             (item.fromUser === user._id)? 'message myMessage' :'message'}
                             onClick = {(e) => {

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

@@ -1,13 +1,12 @@
-.userAvatar {
-    background-color: grey;
-    width: 100px;
-    height: 100px;
-    font-size: 14;
-    margin: 20px auto;
+.hidden {
+    display: none;
+    transform: translateX(-100%);
 }
 
 .active {
-    background-color:rgb(30, 8, 62);
+    display: block;
+    transition: all 1 linear;
+    background-color:rgb(30, 45, 52);
     border-radius: 5px;
     padding: 5px;
     font-weight: 700;

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

@@ -14,17 +14,6 @@ import './userInfo.scss';
 
 export const UserInfo = () => {
 
-    const PC_AVATAR_STYLE =    {
-        bgcolor: 'grey',
-        width: '100px',
-        height: '100px',
-        fontSize: 14,
-        margin: '20px auto',
-        cursor: 'pointer'
-        };
-
-
-    const MOBILE_AVATAR_STYLE =  { margin: '5px auto'};
  
     const [displayType, setDisplayType] = useState('none');
 
@@ -45,6 +34,8 @@ export const UserInfo = () => {
     const isTabletorMobile = (window.screen.width < 730);
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
     const chatId = useSelector(state => state.userDataReducer.chatId)
+    const showUserInfoBox = useSelector(state => state.userDataReducer.showUserInfoBox)
+
 
     const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
@@ -57,10 +48,6 @@ export const UserInfo = () => {
         setDisplayType('none')
     }
 
-    // if(socket){
-    //     socket.on('my chats', (data)=> console.log('my chats', data))
-    // }
-
 console.log(user)
         
     return (
@@ -68,12 +55,18 @@ console.log(user)
                 <h4 style={{color:'white'}}> Hello, {user.userName} </h4>
                
                 <Avatar
-                    sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
+                    className={isTabletorMobile ? 'mobileAvatar' : 'pcUsersAvatar'} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
                     src={userAvatarUrl ? SERVER_URL +'/'+ userAvatarUrl : ""}
                     >
                 </Avatar>  
                 
+               <div
+                    className={isTabletorMobile ? 'mobileUsersInfoBox' : 'pcUsersInfoBox'} 
+                    style={showUserInfoBox && isTabletorMobile ? {'transform':'translate(-100%)'}:{ 'transform':'translate(0)'}}
+                    
+                    
+                >
                 <input
                     type="file"
                     accept="image/png, image/jpeg"
@@ -93,12 +86,25 @@ console.log(user)
                             (user.userName !== item?.userName) 
                                 && <AdminUserInfiButton item={item} i={i} key={i}/>) 
                         :
-                            !isTabletorMobile 
-                            && usersOnline.map((item, i) =>
-                                    (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                
+
+                            usersOnline.map((item, i) =>
+                                    (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                   
                             )
                     }
-               
+
+                    {
+                    newPrivateMessages.length > 0 
+                        && newPrivateMessages.map((item, i) => 
+                       // <UserInfoButton item = {item} i = {i}  key={i} />
+                       console.log(item)
+                        )
+
+                    }
+
+                </div>
+
+            
+
             </>
         )
 }

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

@@ -10,3 +10,27 @@
     background-color:rgb(30, 8, 62);
 }
 
+.mobileUsersInfoBox {
+    position: absolute;
+    top: 100px;
+    left: 10px;
+    z-index: 10;
+    transition: all 1s;
+    transform: translate(-100%);
+    transition: all 1s;
+    max-width: 100px;
+
+
+}
+.pcUsersAvatar {
+    background-color: grey;
+    width: 100px;
+    height: 100px;
+    font-size: 14;
+    margin: 20px auto;
+    cursor: pointer;
+}
+
+.mobileAvatar {
+     margin: 5px auto
+};

frontend/src/reducers/messageReducer.js

@@ -55,7 +55,7 @@ export const fileMessage = createAsyncThunk(
         const token = localStorage.getItem('token')
         try {
             const formData = new FormData();
-            if(files.length) {
+            if(files?.length) {
                  for (let i = 0; i < files.length; i++) {
                 formData.append('files', files[i])
                 }

frontend/src/reducers/userDataReducer.js

@@ -76,7 +76,6 @@ const getUserDataSlice = createSlice({
         deleteResponseMessage: state => {state.responseMessage = ''},
         showUserInfoBox: state => {
             state.showUserInfoBox = !state.showUserInfoBox  //replace later to other reducer file
-            console.log('reducer showUserInfoBox', state.showUserInfoBox)
           //localStorage.setItem('showBox', !state.showUserInfoBox)
         },
     },