120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
import {
|
|
InfoCircleOutlined,
|
|
MessageOutlined,
|
|
ShrinkOutlined,
|
|
SyncOutlined,
|
|
} from "@ant-design/icons";
|
|
import { useQuery } from "@apollo/client";
|
|
import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { CONVERSATION_LIST_QUERY } 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 { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, {
|
|
...(pollInterval > 0 ? { pollInterval } : {}),
|
|
});
|
|
|
|
const fcmToken = sessionStorage.getItem("fcmtoken");
|
|
|
|
useEffect(() => {
|
|
if (fcmToken) {
|
|
setpollInterval(0);
|
|
} else {
|
|
setpollInterval(60000);
|
|
}
|
|
}, [fcmToken]);
|
|
|
|
useEffect(() => {
|
|
if (called && chatVisible) refetch();
|
|
}, [chatVisible, called, refetch]);
|
|
|
|
const unreadCount = data
|
|
? data.conversations.reduce(
|
|
(acc, val) => val.messages_aggregate.aggregate.count + acc,
|
|
0
|
|
)
|
|
: 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 : []}
|
|
/>
|
|
)}
|
|
</Col>
|
|
<Col span={16}>
|
|
{selectedConversation ? <ChatConversationContainer /> : null}
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
) : (
|
|
<div
|
|
onClick={() => toggleChatVisible()}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<MessageOutlined />
|
|
<strong>{t("messaging.labels.messaging")}</strong>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</Badge>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ChatPopupComponent);
|