fix start messages array, fix editing messages selector

backend/app.js

@@ -293,6 +293,7 @@ io.on("connection", async (socket) => {
                 console.log('Message save to db error', error);   
             }
             const newMessages = await message.populate( {path:'user'})   
+            console.log(newMessages)
             io.emit('newmessage', newMessages);        
             // }
         // } 

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

@@ -24,8 +24,7 @@ export const MessageForm = () => {
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     const storeMessageId = useSelector(state => state.messageReducer.messageId)
-
-  
+    const newMessages = useSelector(state => state.getUserSocketReducer.newMessages)
 
     let endMessages = useRef(null);
     const [isEditing, setIsEditing] = useState(false)   
@@ -39,16 +38,19 @@ export const MessageForm = () => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 
         }
-      }, [startMessages]);
-                  
+      }, [startMessages, newMessages]);
+           
+    const messages = startMessages.concat(newMessages)  
+
     return (             
             <Box className='messageBox'>  
                 {
-                startMessages.map((item, i) =>
+                messages.map((item, i) =>
                     <div key={i + 1} className={ 
                         (item.userName === user.userName)? 'message myMessage' :'message'}
                         onClick = {(e) => {
-                            if(e.target.className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
+                            console.log(e.target)
+                            if(e.target.closest("div").className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
                                 e.currentTarget.className += ' editMessage'  
                                 dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id}))  
                                 setIsEditing(true)
@@ -56,7 +58,6 @@ export const MessageForm = () => {
                         }}
                         > 
                         {storeMessageId === item._id ? <MessageEditorMenu />: ""} 
-                        {console.log(startMessages.length)}
                         <StyledAvatar
 
                             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
@@ -125,8 +126,9 @@ export const MessageForm = () => {
                                 <p style={{'marginLeft': '15px'}}  >{item.text}</p>  
                             </div>
                         : 
-                                                       
-                            <p>{item.text}</p>  
+                        <><p>{i}</p>  
+                            <p>{item.text}</p> </>
+                          
                            }
 
                         { 

frontend/src/reducers/messageReducer.js

@@ -17,7 +17,6 @@ const POST_FILES_URL = 'http://localhost:5000/files';
 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}); 
-                   
             } 
     };
 

frontend/src/reducers/socketReducer.js

@@ -46,7 +46,6 @@ const connectToSocket = (event) => {
                                 
                             .on('newmessage', (data) => {
                                 store.dispatch(addNewMessage(data))
-
                                 })
                             .on('ban', (data) => {
                                 store.dispatch(removeToken()); 
@@ -94,10 +93,7 @@ export const getUserSocketSlice = createSlice({
         getAllMessages: (state, action) => {state.startMessages = action.payload},
         getUsersOnline: (state, action) => {state.usersOnline = action.payload},
         getAllUsers: (state, action) => {state.allUsers = action.payload},
-        addNewMessage: (state, action) => {
-            state.newMessages.push(action.payload)
-
-        }, 
+        addNewMessage: (state, action) => {state.newMessages.push(action.payload)}, 
 
         // writing: (state, action) => {
         //                             state.writing = true;