1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- import TextareaAutosize from '@mui/material/TextareaAutosize';
- 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';
- export const MessageForm = () => {
- const dispatch = useDispatch();
-
- const user = useSelector(state => state.getUserSocketReducer.socketUserData)
- const socket = useSelector(state => state.getUserSocketReducer.socket)
- const [message, setMessage] = useState({message: ''});
- return (
- <Box
- component="form"
- onSubmit = {e =>
- {
- e.preventDefault()
- dispatch(sendMessage({user, socket}))
- 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>
- )
- }
|