IO-1551 Refactor messaging.

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,54 +1,108 @@
-import { ShrinkOutlined, InfoCircleOutlined } from "@ant-design/icons";
-import { Col, Row, Tooltip, Typography } from "antd";
-import React from "react";
+import {
+  ShrinkOutlined,
+  InfoCircleOutlined,
+  SyncOutlined,
+} from "@ant-design/icons";
+
+import { Col, Row, Tooltip, Space, Typography, Badge, Card } from "antd";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
-import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
+import {
+  selectChatVisible,
+  selectSelectedConversation,
+} from "../../redux/messaging/messaging.selectors";
 import "./chat-popup.styles.scss";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
+import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
+import { useQuery } from "@apollo/client";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { MessageOutlined } from "@ant-design/icons";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
+  chatVisible: selectChatVisible,
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible()),
 });
 
 export function ChatPopupComponent({
-  conversationList,
+  chatVisible,
   selectedConversation,
   toggleChatVisible,
 }) {
   const { t } = useTranslation();
-  return (
-    <div className="chat-popup">
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <Typography.Title level={4}>
-          {t("messaging.labels.messaging")}
-        </Typography.Title>
-        <ChatNewConversation />
-        <Tooltip title={t("messaging.labels.recentonly")}>
-          <InfoCircleOutlined />
-        </Tooltip>
-      </div>
-      <ShrinkOutlined
-        onClick={() => toggleChatVisible()}
-        style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
-      />
 
-      <Row gutter={[8, 8]} className="chat-popup-content">
-        <Col span={8}>
-          <ChatConversationListComponent conversationList={conversationList} />
-        </Col>
-        <Col span={16}>
-          {selectedConversation ? <ChatConversationContainer /> : null}
-        </Col>
-      </Row>
-    </div>
+  const { loading, data, refetch, called } = useQuery(
+    CONVERSATION_LIST_QUERY,
+    {}
+  );
+
+  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()}
+              />
+            </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);