12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- import { useEffect, useRef, useState } from "react"
- import { connect } from "react-redux"
- import { actionSendMessage, actionUpsertMSG } from "../../actions/actionsMessages"
- import { InputAreaWrapper, TextArea} from "./InputArea.style";
- import Plane from "./icons8-plane.png";
- import MessageDropZone from "../DropZone/MessageDropZone/MessageDropZone";
- import { actionDeleteDraftMessageId, actionDeleteReplyMessageId, actionSetInputMessageValue, actionSetMessageEditor } from "../../reducers/chatReducer";
- import SendRoundedIcon from '@mui/icons-material/SendRounded';
- import { MessageDraftBox } from "../MessageDraft/MessageDraftBox";
- import {MessageEditor} from "../MessageDraft/MessageEditor";
- const InputAreaMessageEditor = ({chats, chatId, deleteMessageEditor, sendMessage, setInputValue}) => {
-
- const inputValue = chats[chatId]?.draft?.messageEditor?.value || '';
- const messageId = chats[chatId]?.draft?.messageEditor?.message._id;
- const message = chats[chatId]?.draft?.messageEditor?.message;
- return (
- <InputAreaWrapper>
- <MessageEditor deleteMessageEditor={deleteMessageEditor} chatId={chatId} message={message}/>
-
- <div style={{display: 'flex', alignItems: 'center', padding: '10px 0'}}>
- <MessageDropZone chatId={chatId}/>
- <TextArea
- value={inputValue}
- onChange={e=>{setInputValue(chatId, e.target.value, 'messageEditor')}}
- maxRows={8}
- placeholder="Write a message..."
- />
- {inputValue ?
- <SendRoundedIcon
- style={{margin: '0 16px', cursor: "pointer"}}
- color="primary"
- // src={Plane}
- onClick={
- async() => {
- let val = await sendMessage(messageId, null, inputValue.replace(/^\s+|\s+$/g, ''), null, null);
- val && deleteMessageEditor(chatId, null);
-
- }
- }
- /> : <div></div>}
- </div>
- </InputAreaWrapper>
- )
- }
- export default connect(state => ({chats: state.chats}), {
- sendMessage: actionSendMessage,
- setInputValue: actionSetInputMessageValue,
- deleteMessageEditor: actionSetMessageEditor
-
- })(InputAreaMessageEditor);
|