96 lines
3.6 KiB
JavaScript
96 lines
3.6 KiB
JavaScript
import { Badge, Card, List, Space, Tag } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Virtuoso } from "react-virtuoso";
|
|
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 { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
|
|
import _ from "lodash";
|
|
import "./chat-conversation-list.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
selectedConversation: selectSelectedConversation
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
|
|
});
|
|
|
|
function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
|
|
// That comma is there for a reason, do not remove it
|
|
const [, forceUpdate] = useState(false);
|
|
|
|
// Re-render every minute
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
forceUpdate((prev) => !prev); // Toggle state to trigger re-render
|
|
}, 60000); // 1 minute in milliseconds
|
|
|
|
return () => clearInterval(interval); // Cleanup on unmount
|
|
}, []);
|
|
|
|
// Memoize the sorted conversation list
|
|
const sortedConversationList = React.useMemo(() => {
|
|
return _.orderBy(conversationList, ["updated_at"], ["desc"]);
|
|
}, [conversationList]);
|
|
|
|
const renderConversation = (index) => {
|
|
const item = sortedConversationList[index];
|
|
const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
|
|
const cardContentLeft =
|
|
item.job_conversations.length > 0
|
|
? item.job_conversations.map((j, idx) => <Tag key={idx}>{j.job.ro_number}</Tag>)
|
|
: null;
|
|
|
|
const names = <>{_.uniq(item.job_conversations.map((j, idx) => OwnerNameDisplayFunction(j.job)))}</>;
|
|
|
|
const cardTitle = (
|
|
<>
|
|
{item.label && <Tag color="blue">{item.label}</Tag>}
|
|
{item.job_conversations.length > 0 ? (
|
|
<Space direction="vertical">{names}</Space>
|
|
) : (
|
|
<Space>
|
|
<PhoneFormatter>{item.phone_num}</PhoneFormatter>
|
|
</Space>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
|
|
|
|
const getCardStyle = () =>
|
|
item.id === selectedConversation
|
|
? { backgroundColor: "rgba(128, 128, 128, 0.2)" }
|
|
: { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
|
|
|
|
return (
|
|
<List.Item
|
|
key={item.id}
|
|
onClick={() => setSelectedConversation(item.id)}
|
|
className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
|
|
>
|
|
<Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
|
|
<div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
|
|
<div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
|
|
</Card>
|
|
</List.Item>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="chat-list-container">
|
|
<Virtuoso
|
|
data={sortedConversationList}
|
|
itemContent={(index) => renderConversation(index)}
|
|
style={{ height: "100%", width: "100%" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationListComponent);
|