send message need to add update chatl

frontend/src/components/chatPage/ChatPage.js

@@ -22,6 +22,8 @@ export const ChatPage = () => {
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+
 
     const randomColor = require('randomcolor'); 
     const endMessages = useRef(null);
@@ -36,8 +38,8 @@ export const ChatPage = () => {
     useEffect(() => {
         scrollToBottom(endMessages)
       }, [startMessages]);
-
-    let userColor = useMemo(() => randomColor(),[]);//color for myavatar
+      
+    const userColor = useMemo(() => randomColor(),[]);//color for myavatar
 
     return (
         <div className='rootContainer'>
@@ -95,7 +97,7 @@ export const ChatPage = () => {
                                 }}
 
                                 className={ 
-                                (item.userName ==user.userName)
+                                (item.userName === user.userName)
                                 ? 
                                 'message myMessage' 
                                 :
@@ -134,7 +136,7 @@ export const ChatPage = () => {
                                 variant="outlined"
                                 onClick={()=> {
                                         localStorage.removeItem('token');
-                                       // socket.disconnect(); 
+                                        socket.disconnect(); 
                                         dispatch(removeToken());
                                             }}>
                                 Logout

frontend/src/components/chatPage/messageForm/MessageForm.js

@@ -2,7 +2,7 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { useDispatch, useSelector } from 'react-redux';
-import { setMessage } from '../../../reducers/messageReducer';
+import { clearMessage, setMessage } from '../../../reducers/messageReducer';
 import { sendMessage } from '../../../reducers/messageReducer';
 
 
@@ -14,14 +14,19 @@ export const MessageForm = () => {
     const socket = useSelector(state => state.getUserSocketReducer.socket)
     
 
+    const handelChange = () => {
+        dispatch(clearMessage({message: ''}))
+    }
+
+
     return (
         <Box 
             component="form" 
-            onSubmit = {e  =>
+            onSubmit = {(e )  =>
                 {
                     e.preventDefault()
-                     dispatch(sendMessage({user, socket}))
-                    
+                    dispatch(sendMessage({user, socket})) 
+                    handelChange()
                 }}
                 
                 sx={{
@@ -37,13 +42,6 @@ export const MessageForm = () => {
                         placeholder='type you message...'
                         minRows={3}
                         maxRows={4}
-                        // onKeyPress={(e) => {
-                        //     if (e.key === "Enter")   {
-                        //         e.preventDefault();
-                        //         dispatch(sendStoreMessage())
-                        //         dispatch(setMessage({message: ''}));// add localstorage save message later
-                        //     }
-                        // }}
                         onChange={e => dispatch(setMessage({message: e.target.value}))} 
                         style={{
                             width: '80%',

frontend/src/reducers/messageReducer.js

@@ -1,13 +1,12 @@
 import { createSlice} from '@reduxjs/toolkit';
 
 const initialState = {
-    message:'',
-    time: ''
+    message:''
 }
 
 export const sendMessageToSocket = (state, data) => {
              if (state.message && state.message.length < 200) {    //remove to other file
-                data.socket.emit('message', {...data.user, message: state.message}); 
+                data.socket.emit('message', {...data.user, message: state.message});                   
             } 
     };
 
@@ -28,6 +27,6 @@ export default messageReducer;
 
 export const {
     setMessage, 
-   sendMessage,
+    sendMessage,
     clearMessage
     } = actions;

frontend/src/store.js

@@ -7,7 +7,7 @@ import { configureStore } from '@reduxjs/toolkit';
 
 
 export  const store = configureStore({
-    reducer: {userDataReducer, getUserSocketReducer, messageReducer},
+    reducer: {userDataReducer,messageReducer, getUserSocketReducer },
     middleware: getDefaultMiddleware => getDefaultMiddleware({
         serializableCheck: false
       }),