finish first part

frontend/src/components/chatPage/ChatPage.jsx

@@ -26,6 +26,7 @@ export const ChatPage = () => {
     let showUserInfoBox = useSelector(state => state.messageReducer.showUserInfoBox)// || localStorage.getItem('showBox');
 
     const [message, setMessage] = useState({message: ''});
+    
     const isTabletorMobile = (window.screen.width < 730);
 
     useEffect(() => {

frontend/src/components/chatPage/SwitchButton.jsx

@@ -1,12 +1,9 @@
 import Switch from '@mui/material/Switch';
 import { useDispatch } from 'react-redux';
 import { showUserInfoBox } from '../../reducers/userDataReducer';
-import { useSelector } from 'react-redux';
 
 export const SwitchButton = () => {
     
-    let showUserInfo = useSelector(state => state.messageReducer.showUserInfoBox)// || localStorage.getItem('showBox');
-
     const label = { inputProps: { 'aria-label': 'Switch demo' } };
     const dispatch = useDispatch();
 
@@ -20,7 +17,7 @@ export const SwitchButton = () => {
 
             <label>Show users infobar</label>
 
-            <Switch {...label} size="small" defaultChecked onChange={handleChange} />
+            <Switch {...label} size="small" defaultChecked onChange={() => handleChange()} />
         </div>
     )
 }

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

@@ -62,13 +62,10 @@ export const MessageForm = () => {
                                             console.log('edit message',e.target.textContent )
                                             dispatch(editMessage({editMessage: e.target.textContent}))                                        
                                         }
-                                        })
-                                    }
-                                  
+                                        })}
                             }}
                             className={ 
-                                (item.userName === user.userName)? 'message myMessage' :'message'}
-                        >
+                                (item.userName === user.userName)? 'message myMessage' :'message'}>
 
                             <p>{item.text}</p>  
 

frontend/src/reducers/userDataReducer.js

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