fix send message

backend/app.js

@@ -135,7 +135,6 @@ io.use( async (socket, next) => {
 
 io.on("connection", async (socket) => {
     const userName = socket.user.userName;
-
     const sockets = await io.fetchSockets();
     const dbUser = await getOneUser(userName);
     
@@ -171,10 +170,13 @@ io.on("connection", async (socket) => {
             });
             try {
                 await message.save(); 
+                
+
             } catch (error) {
                 console.log('Message save to db error', error);   
             }
-            io.emit('message', message);
+           // const newMessagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20);
+            io.emit('newmessage', message);
         // }
         // } 
     });

frontend/src/components/chatPage/ChatPage.js

@@ -7,11 +7,13 @@ import './chatPage.scss';
 import { scrollToBottom } from './utils/scrollToBottom';
 import { banUser } from './service/banUser';
 import { muteUser } from './service/muteUser';
-import {sendMessage} from './service/sendMessage';
 import { store } from '../../store';
 import { removeToken} from '../../reducers/userDataReducer'
 import { useDispatch, useSelector } from 'react-redux';
 import {getSocket} from'../../reducers/socketReducer';
+import { useState } from 'react';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import { sendMessage, storeMessage } from '../../reducers/messageReducer';
 
 export const ChatPage = () => {
 
@@ -24,18 +26,23 @@ export const ChatPage = () => {
     const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
     const socket = useSelector(state => state.getUserSocketReducer.socket)
 
+    const events = ['allmessages', 'usersOnline', 'allDbUsers']
+
+    const [message, setMessage] = useState({message: ''});
+
 
     const randomColor = require('randomcolor'); 
     const endMessages = useRef(null);
     
     useEffect(() => {
         if(token){
-            dispatch(getSocket())
+            events.map(event => dispatch(getSocket(event)))       
         }
     }, [])
 
 
     useEffect(() => {
+        console.log('useEffect chat page')
         scrollToBottom(endMessages)
       }, [startMessages]);
 
@@ -74,7 +81,7 @@ export const ChatPage = () => {
                                     :
                                     {
                                         backgroundColor:  (usersOnline.map(current => {
-                                            if(item.userName == current.userName ) {
+                                            if(item.userName === current.userName ) {
                                                 return current.color
                                             }
                                           
@@ -123,7 +130,57 @@ export const ChatPage = () => {
                         <div ref={endMessages}></div>
     
                         </Box>
-                            <MessageForm />
+                        <Box 
+            component="form" 
+            onSubmit = {e  =>
+                {
+                    e.preventDefault()
+                     dispatch(sendMessage({user, socket}))
+                     dispatch(getSocket('allmessages'))
+                     setMessage({message: ''})
+                }}
+                
+                sx={{
+                    display: 'flex',
+                    margin: '20px 5px'
+                }}>
+        
+                    <TextareaAutosize
+                        id="outlined-basic" 
+                        label="Type a message..." 
+                        variant="outlined" 
+                        value={message.message}
+                        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(storeMessage({message: e.target.value}))
+                            setMessage({message: e.target.value})}
+                        } 
+                        style={{
+                            width: '80%',
+                            resize: 'none',
+                            borderRadius: '4px',
+                        }}
+                        /> 
+                    <Button 
+                        variant="contained" 
+                        type='submit'
+                        disabled={user?.isMutted}
+                        style={{
+                            width: '20%',
+                        }}
+                    >
+                        Send
+                    </Button>
+        </Box>            
                         </Box>
 
                         <Box
@@ -153,7 +210,7 @@ export const ChatPage = () => {
                                     key={item._id}
                                     className='online'>
                                     <div style={
-                                        {color: (usersOnline.map(current =>{
+                                        {color: (usersOnline.map(current => {
                                                 if(item.userName == current.userName ) {
                                                     return current.color
                                                 }

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

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { useDispatch, useSelector } from 'react-redux';
 import { sendMessage, storeMessage } from '../../../reducers/messageReducer';
-import {  useState} from 'react';
+import { useState } from 'react';
 
 
 export const MessageForm = () => {
@@ -12,11 +12,9 @@ export const MessageForm = () => {
       
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const socket = useSelector(state => state.getUserSocketReducer.socket)
-
     const [message, setMessage] = useState({message: ''});
 
 
-
     return (
         <Box 
             component="form" 

frontend/src/reducers/messageReducer.js

@@ -1,6 +1,7 @@
 import { createSlice} from '@reduxjs/toolkit';
 
 const initialState = {
+    startMessages: [],
     message:''
 }
 
@@ -18,6 +19,7 @@ const messageReducerSlice = createSlice({
         storeMessage: (state, action) => {state.message = action.payload.message},
         sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
         clearMessage: (state) => {state.message = ''}
+        
     },
 });
 

frontend/src/reducers/socketReducer.js

@@ -15,7 +15,7 @@ const initialState = {
 
 const SOCKET_URL =  process.env.REACT_APP_SERVER_URL || 'http://localhost:5000'; 
 
-const connectToSocket = () => {
+const connectToSocket = (event) => {
         try {
             const token = localStorage.getItem('token');
             if(token){
@@ -25,15 +25,25 @@ const connectToSocket = () => {
                     socket.on('connected', data => {
                                 store.dispatch(getUser(data));
                             })
-                            .on('allmessages', (data) => {
-                                store.dispatch(getAllMessages(data));
-                            })
-                            .on('usersOnline', (data) => {
-                                store.dispatch(getUsersOnline(data));
-                            })
-                            .on('allDbUsers', (data) => {
-                                store.dispatch(getAllUsers(data));
-                            })
+                            .on(event, (data) => {
+                                   switch (event){
+                                    case 'allmessages':
+                                        store.dispatch(getAllMessages(data));
+                                        break;
+                            
+                                    case 'usersOnline':
+                                        console.log(data)
+                                        store.dispatch(getUsersOnline(data));
+                                        break;
+
+                                    case 'allDbUsers':
+                                        store.dispatch(getAllUsers(data));
+                                        break;
+                                }
+                                })
+                            .on('newmessage', (data) => {
+                                store.dispatch(addNewMessage(data))
+                                })
                             .on('disconnect', (data) => {
                                 if(data === 'io server disconnect') {
                                     socket.disconnect();
@@ -56,14 +66,15 @@ export const getUserSocketSlice = createSlice({
         removeSocket: state => {
             state.socket = null
             state.socketStatus = 'disconnected'},
-        getSocket: state => {
-            state.socket = connectToSocket();
+        getSocket: (state, action) => {
+            state.socket = connectToSocket(action.payload);
             state.socketStatus = 'connected';
         },
         getUser: (state, action) => {state.socketUserData = action.payload},
         getAllMessages: (state, action) => {state.startMessages = action.payload},
         getUsersOnline: (state, action) => {state.usersOnline = action.payload},
-        getAllUsers: (state, action) => {state.allUsers = action.payload}
+        getAllUsers: (state, action) => {state.allUsers = action.payload},
+        addNewMessage: (state, action) => {state.startMessages.push(action.payload)}
         }
     }
 );
@@ -79,5 +90,6 @@ export const {
     getUser,
     getAllMessages,
     getUsersOnline,
+    addNewMessage,
     getAllUsers
 } = actions;