MessageEditorMenu.jsx.jsx 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import { useDispatch, useSelector} from 'react-redux';
  2. import { useState } from 'react';
  3. import { editMessage } from '../../reducers/messageReducer';
  4. import TextareaAutosize from '@mui/material/TextareaAutosize';
  5. import { storeMessage } from '../../reducers/messageReducer';
  6. import { deleteMessage } from '../../reducers/messageReducer';
  7. //test
  8. export const MessageEditorMenu = () => {
  9. const dispatch = useDispatch();
  10. const editOldMessage = useSelector(state => state.messageReducer.editMessage)
  11. const messageId = useSelector(state => state.messageReducer.messageId)
  12. const socket = useSelector(state => state.getUserSocketReducer.socket)
  13. const [message, setMessage] = useState({message: editOldMessage});
  14. return (
  15. <div>
  16. <button
  17. onClick={() => {
  18. if (!message.message.length) {
  19. dispatch(deleteMessage({socket, messageId}))
  20. }
  21. dispatch(editMessage({socket, editMessage: message, messageId }))
  22. dispatch(editMessage({socket: null, editMessage: '', messageId: '' }))
  23. }}
  24. > Edit</button>
  25. <button
  26. onClick={() => {
  27. dispatch(deleteMessage({socket, messageId}))
  28. dispatch(editMessage({socket: null, editMessage: '', messageId: '' }))
  29. }}
  30. > Delete </button>
  31. <button
  32. onClick={() => {
  33. dispatch(editMessage({socket: null, editMessage: '', messageId: '' }))
  34. }}
  35. > cancel</button>
  36. <TextareaAutosize
  37. id="outlined-basic"
  38. variant="outlined"
  39. value={message.message }
  40. placeholder='type you message...'
  41. minRows={3}
  42. maxRows={4}
  43. className='textArea'
  44. onChange={e => {
  45. dispatch(storeMessage({message: e.target.value}))
  46. setMessage({message: e.target.value})
  47. }
  48. }
  49. />
  50. </div>
  51. )
  52. }