121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
import { Button, Card, Input, Icon } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import twilio from "twilio";
|
|
import {
|
|
closeConversation,
|
|
toggleConversationVisible
|
|
} from "../../redux/messaging/messaging.actions";
|
|
import PhoneFormatter from "../../utils/PhoneFormatter";
|
|
import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
|
|
import { MdSend } from "react-icons/md";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const client = twilio(
|
|
"ACf1b1aaf0e04740828b49b6e58467d787",
|
|
"0bea5e29a6d77593183ab1caa01d23de"
|
|
);
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
//currentUser: selectCurrentUser
|
|
});
|
|
const mapDispatchToProps = dispatch => ({
|
|
toggleConversationVisible: conversationId =>
|
|
dispatch(toggleConversationVisible(conversationId)),
|
|
closeConversation: phone => dispatch(closeConversation(phone))
|
|
});
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(function ChatConversationComponent({
|
|
conversation,
|
|
toggleConversationVisible,
|
|
closeConversation
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
const [messages, setMessages] = useState([]);
|
|
|
|
useEffect(() => {
|
|
client.messages.list({ limit: 20 }, (error, items) => {
|
|
setMessages(
|
|
items.reduce((acc, value) => {
|
|
acc.push({
|
|
sid: value.sid,
|
|
direction: value.direction,
|
|
body: value.body
|
|
});
|
|
return acc;
|
|
}, [])
|
|
);
|
|
});
|
|
return () => {};
|
|
}, [setMessages]);
|
|
return (
|
|
<div>
|
|
<Card
|
|
title={
|
|
conversation.open ? (
|
|
<div style={{ display: "flex" }}>
|
|
<div
|
|
onClick={() => toggleConversationVisible(conversation.phone)}
|
|
>
|
|
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
|
|
</div>
|
|
<Button
|
|
type="danger"
|
|
shape="circle-outline"
|
|
onClick={() => closeConversation(conversation.phone)}
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
) : null
|
|
}
|
|
style={{
|
|
width: conversation.open ? "400px" : "175px",
|
|
margin: "0px 10px"
|
|
}}
|
|
size="small"
|
|
>
|
|
{conversation.open ? (
|
|
<div>
|
|
<div className="messages" style={{ height: "400px" }}>
|
|
<ul>
|
|
{messages.map(item => (
|
|
<li
|
|
key={item.sid}
|
|
className={`${
|
|
item.direction === "inbound" ? "sent" : "replies"
|
|
}`}
|
|
>
|
|
<p> {item.body}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<Input.Search
|
|
placeholder={t("messaging.labels.typeamessage")}
|
|
enterButton={<Icon component={MdSend} />}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: "flex" }}>
|
|
<div onClick={() => toggleConversationVisible(conversation.phone)}>
|
|
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
|
|
</div>
|
|
<Button
|
|
type="dashed"
|
|
shape="circle-outline"
|
|
onClick={() => closeConversation(conversation.phone)}
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
});
|