add deliting messages function

backend/app.js

@@ -123,6 +123,7 @@ app.post('/avatar', async (req, res) =>  {
     } catch (error) {
         res.status(500).json({message: `Error uppload file to serverp: ${error}`});
     }
+    
 })
 
 app.post('/files', async (req, res) =>  {
@@ -341,6 +342,27 @@ io.on("connection", async (socket) => {
                 let isTyping = true;
                 io.emit('writing', {userName, isTyping})
            })
+
+           socket.on('editmessage', async (data) => {
+                console.log(data)}) 
+
+           socket.on('deleteMessage', async (data) => {
+                const user = jwt.verify(data.token, TOKEN_KEY)
+                console.log(data.messageId)
+                if(!user){
+                    return
+                }
+                try {
+                    await Message.findByIdAndDelete(data.messageId)
+                
+                } catch (error) {
+                    console.log(error)
+                    
+                }
+            }) 
+
+
+
     } catch (e) {
         console.log(e);
     }

frontend/src/components/chatPage/ChatPage.jsx

@@ -149,7 +149,7 @@ export const ChatPage = () => {
                             id="outlined-basic" 
                             label="Type a message..." 
                             variant="outlined" 
-                            value={message.message || editOldMessage}
+                            value={message.message}
                             placeholder='type you message...'
                             minRows={3}
                             maxRows={4}

frontend/src/components/chatPage/MessageEditorMenu.jsx.jsx

@@ -1,26 +1,52 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector} from 'react-redux';
+import { useState } from 'react';
 import { editMessage } from '../../reducers/messageReducer';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import { storeMessage } from '../../reducers/messageReducer';
+import { deleteMessage } from '../../reducers/messageReducer';
 
 //test
 export const MessageEditorMenu = () => {
 
     const dispatch = useDispatch();
 
+    const editOldMessage = useSelector(state => state.messageReducer.editMessage)
+    const messageId = useSelector(state => state.messageReducer.messageId)
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+    const [message, setMessage] = useState({message: editOldMessage});
+
 
     return (
         <div>
             <button> Edit</button>
-            <button> Delete </button>
+            <button
+             onClick={() => {
+                dispatch(deleteMessage({socket, messageId}))  
+                dispatch(editMessage({socket: null, editMessage: '', messageId: '' })) 
+                
+            }}
+            
+            > Delete </button>
             <button
                 onClick={() => {
-                    dispatch(editMessage({editMessage: '', showButtons: false, messageId: '' }))  
+                    dispatch(editMessage({socket: null, editMessage: '', messageId: '' }))  
                 }}
             > cancel</button>
+               <TextareaAutosize
+                            id="outlined-basic" 
+                            variant="outlined" 
+                            value={message.message }
+                            placeholder='type you message...'
+                            minRows={3}
+                            maxRows={4}
+                            className='textArea'
+                            onChange={e => { 
+                                   dispatch(storeMessage({message: e.target.value}))
+                                   setMessage({message: e.target.value})
+                                }
+                            } 
+                        
+                        /> 
         </div>
     )
 }
-
-
-
-
-

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

@@ -1,7 +1,7 @@
 import { Avatar, Box, Button} from '@mui/material';
 import { dateFormat } from '../utils/dateFormat';
 import { useSelector } from 'react-redux';   
-import { useRef, useEffect} from 'react';
+import { useRef, useEffect, useState} from 'react';
 import { scrollToBottom } from '../utils/scrollToBottom';
 import { useDispatch } from 'react-redux';
 import { editMessage } from '../../../reducers/messageReducer';
@@ -13,6 +13,7 @@ import imgBtn from '../../../assets/img/gg.png';
 export const MessageForm = () => {
 
     const dispatch = useDispatch();
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
 
     const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
 
@@ -22,13 +23,15 @@ export const MessageForm = () => {
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     const storeMessageId = useSelector(state => state.messageReducer.messageId)
 
-
-    let endMessages =useRef(null);
+    let endMessages = useRef(null);
+    const [isEditing, setIsEditing] = useState(false)    
 
     const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
 
     useEffect(() => {
-        scrollToBottom(endMessages)
+        if (!isEditing) {
+            scrollToBottom((endMessages)) 
+        }
       }, [startMessages]);
                   
     return (             
@@ -40,12 +43,12 @@ export const MessageForm = () => {
                         onClick = {(e) => {
                             if(e.target.className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
                                 e.currentTarget.className += ' editMessage'  
-                                dispatch(editMessage({editMessage: e.target.textContent, messageId: item._id}))  
+                                dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id}))  
+                                setIsEditing(true)
                                 }
                         }}
                         > 
-
-                        {storeMessageId === item._id ? <MessageEditorMenu/> : ""} 
+                        {storeMessageId === item._id ? <MessageEditorMenu />: ""} 
 
                         <StyledAvatar
 

frontend/src/reducers/messageReducer.js

@@ -22,12 +22,19 @@ export const sendMessageToSocket = (state, data) => {
             } 
     };
 
-export const editMessageToSocket = (state, data) => {
-        if (state.message && state.message.length < 200) {    
-           data.socket.emit('editmessage', {...data.user, message: state.message}); //add backend functional later find by id and edit   
-       } 
+export const deleteMessageHandler = (state, data) => {
+    data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token}); 
+              
+        
 };
 
+    
+// export const editMessageHandler = (state, data) => {
+//         data.socket.emit('editmessage', {messageNewText: data.editMessage, messageId: data.messageId}); //add backend functional later find by id and edit 
+// };
+
+
+
 export const fileMessage = createAsyncThunk(
     'messageReducer/fileMessage',
     async (files) => {
@@ -65,10 +72,15 @@ const messageReducerSlice = createSlice({
     reducers: {
         storeMessage: (state, action) => {state.message = action.payload.message},
         editMessage: (state, action) => {
-            state.editMessage = action.payload.editMessage;
-            state.messageId = action.payload.messageId;
-            state.ref = action.payload.ref;
+           //  editMessageHandler(state, action.payload)
+             state.editMessage = action.payload.editMessage;
+             state.messageId = action.payload.messageId;
+             state.ref = action.payload.ref;
             },
+        deleteMessage: (state, action) => {
+            deleteMessageHandler(state, action.payload)
+           
+        },
         sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
         clearMessage: (state) => {state.message = ''},
         extraReducers: (bilder) => 
@@ -93,5 +105,6 @@ export const {
     storeMessage, 
     sendMessage,
     clearMessage,
-    editMessage
+    editMessage,
+    deleteMessage
     } = actions;