117 lines
4.3 KiB
JavaScript
117 lines
4.3 KiB
JavaScript
import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
|
|
import { useLazyQuery, useQuery } from "@apollo/client";
|
|
import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { CONVERSATION_LIST_QUERY, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
|
|
import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
|
|
import { selectChatVisible, selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
|
|
import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
|
|
import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
|
|
import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import "./chat-popup.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
selectedConversation: selectSelectedConversation,
|
|
chatVisible: selectChatVisible
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
toggleChatVisible: () => dispatch(toggleChatVisible())
|
|
});
|
|
|
|
export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
|
|
const { t } = useTranslation();
|
|
const [pollInterval, setpollInterval] = useState(0);
|
|
|
|
const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
...(pollInterval > 0 ? { pollInterval } : {})
|
|
});
|
|
|
|
const [getConversations, { loading, data, refetch, fetchMore }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
skip: !chatVisible,
|
|
...(pollInterval > 0 ? { pollInterval } : {})
|
|
});
|
|
|
|
const fcmToken = sessionStorage.getItem("fcmtoken");
|
|
|
|
useEffect(() => {
|
|
if (fcmToken) {
|
|
setpollInterval(0);
|
|
} else {
|
|
setpollInterval(90000);
|
|
}
|
|
}, [fcmToken]);
|
|
|
|
useEffect(() => {
|
|
if (chatVisible)
|
|
getConversations({
|
|
variables: {
|
|
offset: 0
|
|
}
|
|
});
|
|
}, [chatVisible, getConversations]);
|
|
|
|
const loadMoreConversations = useCallback(() => {
|
|
if (data)
|
|
fetchMore({
|
|
variables: {
|
|
offset: data.conversations.length
|
|
}
|
|
});
|
|
}, [data, fetchMore]);
|
|
|
|
const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;
|
|
|
|
return (
|
|
<Badge count={unreadCount}>
|
|
<Card size="small">
|
|
{chatVisible ? (
|
|
<div className="chat-popup">
|
|
<Space align="center">
|
|
<Typography.Title level={4}>{t("messaging.labels.messaging")}</Typography.Title>
|
|
<ChatNewConversation />
|
|
<Tooltip title={t("messaging.labels.recentonly")}>
|
|
<InfoCircleOutlined />
|
|
</Tooltip>
|
|
<SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
|
|
{pollInterval > 0 && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
|
|
</Space>
|
|
<ShrinkOutlined
|
|
onClick={() => toggleChatVisible()}
|
|
style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
|
|
/>
|
|
|
|
<Row gutter={[8, 8]} className="chat-popup-content">
|
|
<Col span={8}>
|
|
{loading ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<ChatConversationListComponent
|
|
conversationList={data ? data.conversations : []}
|
|
loadMoreConversations={loadMoreConversations}
|
|
/>
|
|
)}
|
|
</Col>
|
|
<Col span={16}>{selectedConversation ? <ChatConversationContainer /> : null}</Col>
|
|
</Row>
|
|
</div>
|
|
) : (
|
|
<div onClick={() => toggleChatVisible()} style={{ cursor: "pointer" }}>
|
|
<MessageOutlined className="chat-popup-info-icon" />
|
|
<strong>{t("messaging.labels.messaging")}</strong>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ChatPopupComponent);
|