121 lines
3.5 KiB
JavaScript
121 lines
3.5 KiB
JavaScript
import { Badge, List, Tag } from "antd";
|
|
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import {
|
|
AutoSizer,
|
|
CellMeasurer,
|
|
CellMeasurerCache,
|
|
List as VirtualizedList,
|
|
} from "react-virtualized";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
|
|
import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
|
|
import { TimeAgoFormatter } from "../../utils/DateFormatter";
|
|
import PhoneFormatter from "../../utils/PhoneFormatter";
|
|
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
|
|
|
|
import "./chat-conversation-list.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
selectedConversation: selectSelectedConversation,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setSelectedConversation: (conversationId) =>
|
|
dispatch(setSelectedConversation(conversationId)),
|
|
});
|
|
|
|
function ChatConversationListComponent({
|
|
conversationList,
|
|
selectedConversation,
|
|
setSelectedConversation,
|
|
loadMoreConversations,
|
|
}) {
|
|
const cache = new CellMeasurerCache({
|
|
fixedWidth: true,
|
|
defaultHeight: 60,
|
|
});
|
|
|
|
const rowRenderer = ({ index, key, style, parent }) => {
|
|
const item = conversationList[index];
|
|
|
|
return (
|
|
<CellMeasurer
|
|
key={key}
|
|
cache={cache}
|
|
parent={parent}
|
|
columnIndex={0}
|
|
rowIndex={index}
|
|
>
|
|
<List.Item
|
|
onClick={() => setSelectedConversation(item.id)}
|
|
className={`chat-list-item ${
|
|
item.id === selectedConversation
|
|
? "chat-list-selected-conversation"
|
|
: null
|
|
}`}
|
|
style={style}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "inline-block",
|
|
}}
|
|
>
|
|
{item.label && <div className="chat-name">{item.label}</div>}
|
|
{item.job_conversations.length > 0 ? (
|
|
<div className="chat-name">
|
|
{item.job_conversations.map((j, idx) => (
|
|
<div key={idx}>
|
|
<OwnerNameDisplay ownerObject={j.job} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<PhoneFormatter>{item.phone_num}</PhoneFormatter>
|
|
)}
|
|
</div>
|
|
<div style={{ display: "inline-block" }}>
|
|
<div>
|
|
{item.job_conversations.length > 0
|
|
? item.job_conversations.map((j, idx) => (
|
|
<Tag key={idx} className="ro-number-tag">
|
|
{j.job.ro_number}
|
|
</Tag>
|
|
))
|
|
: null}
|
|
</div>
|
|
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
|
|
</div>
|
|
<Badge count={item.messages_aggregate.aggregate.count || 0} />
|
|
</List.Item>
|
|
</CellMeasurer>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="chat-list-container">
|
|
<AutoSizer>
|
|
{({ height, width }) => (
|
|
<VirtualizedList
|
|
height={height}
|
|
width={width}
|
|
rowCount={conversationList.length}
|
|
rowHeight={cache.rowHeight}
|
|
rowRenderer={rowRenderer}
|
|
onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
|
|
if (scrollTop + clientHeight === scrollHeight) {
|
|
loadMoreConversations();
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</AutoSizer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ChatConversationListComponent);
|