MessageForm.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import TextareaAutosize from '@mui/material/TextareaAutosize';
  2. import Button from '@mui/material/Button';
  3. import Box from '@mui/material/Box';
  4. import { useDispatch, useSelector } from 'react-redux';
  5. import { clearMessage, setMessage } from '../../../reducers/messageReducer';
  6. import { sendMessage } from '../../../reducers/messageReducer';
  7. export const MessageForm = () => {
  8. const dispatch = useDispatch();
  9. const message = useSelector(state => state.userName);
  10. const user = useSelector(state => state.getUserSocketReducer.socketUserData)
  11. const socket = useSelector(state => state.getUserSocketReducer.socket)
  12. const handelChange = () => {
  13. dispatch(clearMessage({message: ''}))
  14. }
  15. return (
  16. <Box
  17. component="form"
  18. onSubmit = {(e ) =>
  19. {
  20. e.preventDefault()
  21. dispatch(sendMessage({user, socket}))
  22. handelChange()
  23. }}
  24. sx={{
  25. display: 'flex',
  26. margin: '20px 5px'
  27. }}>
  28. <TextareaAutosize
  29. id="outlined-basic"
  30. label="Type a message..."
  31. variant="outlined"
  32. value={message}
  33. placeholder='type you message...'
  34. minRows={3}
  35. maxRows={4}
  36. onChange={e => dispatch(setMessage({message: e.target.value}))}
  37. style={{
  38. width: '80%',
  39. resize: 'none',
  40. borderRadius: '4px',
  41. }}
  42. />
  43. <Button
  44. variant="contained"
  45. type='submit'
  46. disabled={user?.isMutted}
  47. style={{
  48. width: '20%',
  49. }}
  50. >
  51. Send
  52. </Button>
  53. </Box>
  54. )
  55. }