send message reserved variant not updateble chat

frontend/src/components/chatPage/ChatPage.js

@@ -38,7 +38,7 @@ export const ChatPage = () => {
     useEffect(() => {
         scrollToBottom(endMessages)
       }, [startMessages]);
-      
+
     const userColor = useMemo(() => randomColor(),[]);//color for myavatar
 
     return (

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

@@ -2,31 +2,29 @@ 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 { clearMessage, setMessage } from '../../../reducers/messageReducer';
-import { sendMessage } from '../../../reducers/messageReducer';
+import { sendMessage, storeMessage } from '../../../reducers/messageReducer';
+import {  useState} from 'react';
 
 
 export const MessageForm = () => {
 
-    const dispatch = useDispatch();    
-    const message = useSelector(state => state.userName);
+    const dispatch = useDispatch();  
+      
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const socket = useSelector(state => state.getUserSocketReducer.socket)
-    
 
-    const handelChange = () => {
-        dispatch(clearMessage({message: ''}))
-    }
+    const [message, setMessage] = useState({message: ''});
+
 
 
     return (
         <Box 
             component="form" 
-            onSubmit = {(e )  =>
+            onSubmit = {e  =>
                 {
                     e.preventDefault()
-                    dispatch(sendMessage({user, socket})) 
-                    handelChange()
+                     dispatch(sendMessage({user, socket}))
+                     setMessage({message: ''})
                 }}
                 
                 sx={{
@@ -38,11 +36,21 @@ export const MessageForm = () => {
                         id="outlined-basic" 
                         label="Type a message..." 
                         variant="outlined" 
-                        value={message}
+                        value={message.message}
                         placeholder='type you message...'
                         minRows={3}
                         maxRows={4}
-                        onChange={e => dispatch(setMessage({message: e.target.value}))} 
+                        // onKeyPress={(e) => {
+                        //     if (e.key === "Enter")   {
+                        //         e.preventDefault();
+                        //         dispatch(sendStoreMessage())
+                        //         dispatch(setMessage({message: ''}));// add localstorage save message later
+                        //     }
+                        // }}
+                        onChange={e => { 
+                            dispatch(storeMessage({message: e.target.value}))
+                            setMessage({message: e.target.value})}
+                        } 
                         style={{
                             width: '80%',
                             resize: 'none',

frontend/src/reducers/messageReducer.js

@@ -6,7 +6,8 @@ const initialState = {
 
 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}); 
+                   
             } 
     };
 
@@ -14,7 +15,7 @@ const messageReducerSlice = createSlice({
     name: 'messageReducer',
     initialState,
     reducers: {
-        setMessage: (state, action) => {state.message = action.payload.message},
+        storeMessage: (state, action) => {state.message = action.payload.message},
         sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
         clearMessage: (state) => {state.message = ''}
     },
@@ -26,7 +27,7 @@ const messageReducer = reducer;
 export default messageReducer;
 
 export const {
-    setMessage, 
+    storeMessage, 
     sendMessage,
     clearMessage
     } = actions;

frontend/src/store.js

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