refactoring code and new components

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

@@ -0,0 +1,19 @@
+import { useSelector } from 'react-redux';
+import { generalMessage } from '../../../reducers/userDataReducer';
+import './userInfo.scss';
+import { store } from '../../../store';
+
+export const MainChatButtton = () => {
+
+    const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
+
+    return (
+        <div 
+            className={!isPrivatChat? 'online active' :'online' }                       
+            onClick={() => {store.dispatch(generalMessage())}}
+        >  
+            <div>Main Chat</div>
+            <span style={{color: 'green'}}> for all </span>
+        </div>
+    )
+}

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

@@ -6,7 +6,6 @@ import { Avatar } from "@mui/material";
 
 export const UserInfoButton = ({item, i}) => {
 
-    console.log(item, i)
 
     const SERVER_URL = process.env.REACT_APP_SERVER_URL
 
@@ -14,6 +13,9 @@ export const UserInfoButton = ({item, i}) => {
     const socket = useSelector(state => state.getUserSocketReducer.socket)
     const isPrivatChat = useSelector(state => state.userDataReducer.isPrivatChat)
     const chatId = useSelector(state => state.userDataReducer.chatId)
+    const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
+
+    let userAvatarUrl = storeUserAvatar || user.avatar;
 
 
     return (

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

@@ -1,13 +1,12 @@
-import {Button,Avatar} from '@mui/material';
+import {Avatar} from '@mui/material';
 import { useSelector } from 'react-redux';
-import { banUser } from '../service/banUser';
-import { muteUser } from '../service/muteUser';
 import './userInfo.scss';
 import { useDispatch } from 'react-redux';
 import { getUserAvatar, privateMessage } from '../../../reducers/userDataReducer';
 import { useState, useEffect } from 'react';
 import { UserInfoButton } from '../generalChat/UserInfoButton';
 import { AdminUserInfiButton } from '../generalChat/AdminUserInfiButton';
+import { MainChatButtton } from '../generalChat/MainChatButtton';
 import './userInfo.scss';
 
 
@@ -47,8 +46,6 @@ export const UserInfo = () => {
 
     let userAvatarUrl = storeUserAvatar || user.avatar;
 
-    const arrUsersOnline = usersOnline.map( i => i?.userName)
-    const userNamesOnlineSet =  new Set(arrUsersOnline)
 
     const inputHandler = (e) => {
         const file = e.target.files[0]
@@ -76,7 +73,10 @@ export const UserInfo = () => {
                         }}
                     onChange = {e => inputHandler(e)}/>
 
+                   
+                <MainChatButtton/>     
 
+                
                     {user.isAdmin && !isTabletorMobile ? 
                             allUsers.map((item, i) =>
                             (user.userName !== item?.userName) 

frontend/src/reducers/userDataReducer.js

@@ -65,6 +65,9 @@ const getUserDataSlice = createSlice({
             state.isPrivatChat = true;
             state.chatId = action.payload.chatId
         },
+        generalMessage: (state, action)=> {
+            state.isPrivatChat = false;
+        },
         setUserName: (state, action) => {state.userName = action.payload.userName},
         setUserPassword: (state, action) => {state.password = action.payload.password},
             
@@ -118,5 +121,6 @@ export const {
     removeToken,
     deleteResponseMessage,
     showUserInfoBox,
-    privateMessage
+    privateMessage,
+    generalMessage
 } = actions;