78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import { Card } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import twilio from "twilio";
|
|
import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
|
|
import PhoneFormatter from "../../utils/PhoneFormatter";
|
|
import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
|
|
|
|
const client = twilio(
|
|
"ACf1b1aaf0e04740828b49b6e58467d787",
|
|
"0bea5e29a6d77593183ab1caa01d23de"
|
|
);
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
//currentUser: selectCurrentUser
|
|
});
|
|
const mapDispatchToProps = dispatch => ({
|
|
toggleConversationVisible: conversationId =>
|
|
dispatch(toggleConversationVisible(conversationId))
|
|
});
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(function ChatConversationComponent({
|
|
conversation,
|
|
toggleConversationVisible
|
|
}) {
|
|
const [conversations, setConversations] = useState([]);
|
|
|
|
useEffect(() => {
|
|
client.messages.list({ limit: 20 }, (error, items) => {
|
|
setConversations(
|
|
items.reduce((acc, value) => {
|
|
acc.push({
|
|
sid: value.sid,
|
|
direction: value.direction,
|
|
body: value.body
|
|
});
|
|
return acc;
|
|
}, [])
|
|
);
|
|
});
|
|
return () => {};
|
|
}, [setConversations]);
|
|
return (
|
|
<div>
|
|
<Card
|
|
style={{
|
|
width: conversation.open ? "400px" : "125px",
|
|
margin: "0px 10px"
|
|
}}
|
|
size="small"
|
|
onClick={() => toggleConversationVisible(conversation.id)}
|
|
>
|
|
{conversation.open ? (
|
|
<div className="messages" style={{ height: "400px" }}>
|
|
<ul>
|
|
{conversations.map(item => (
|
|
<li
|
|
key={item.sid}
|
|
className={`${
|
|
item.direction === "inbound" ? "replies" : "sent"
|
|
}`}
|
|
>
|
|
<p> {item.body}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
) : (
|
|
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
});
|