78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import { Input, Spin } from "antd";
|
|
import { LoadingOutlined } from "@ant-design/icons";
|
|
import React, { useState, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { sendMessage } from "../../redux/messaging/messaging.actions";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { selectIsSending } from "../../redux/messaging/messaging.selectors";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
isSending: selectIsSending,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
sendMessage: (message) => dispatch(sendMessage(message)),
|
|
});
|
|
|
|
function ChatSendMessageComponent({
|
|
conversation,
|
|
bodyshop,
|
|
sendMessage,
|
|
isSending,
|
|
}) {
|
|
const [message, setMessage] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (isSending === false) {
|
|
setMessage("");
|
|
}
|
|
}, [isSending, setMessage]);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const handleEnter = () => {
|
|
sendMessage({
|
|
to: conversation.phone_num,
|
|
body: message,
|
|
messagingServiceSid: bodyshop.messagingservicesid,
|
|
conversationid: conversation.id,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: "flex " }}>
|
|
<Input.TextArea
|
|
allowClear
|
|
autoFocus
|
|
suffix={<span>a</span>}
|
|
autoSize={{ minRows: 1, maxRows: 4 }}
|
|
value={message}
|
|
disabled={isSending}
|
|
placeholder={t("messaging.labels.typeamessage")}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onPressEnter={(event) => {
|
|
event.preventDefault();
|
|
if (!!!event.shiftKey) handleEnter();
|
|
}}
|
|
/>
|
|
<Spin
|
|
style={{ display: `${isSending ? "" : "none"}` }}
|
|
indicator={
|
|
<LoadingOutlined
|
|
style={{
|
|
fontSize: 24,
|
|
}}
|
|
spin
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ChatSendMessageComponent);
|