Refactored Messaging as a part of BOD-14. Breaking changes remain.

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

@@ -0,0 +1,43 @@
+import { MessageOutlined } from "@ant-design/icons";
+import { Badge, Card } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
+import ChatPopupComponent from '../chat-popup/chat-popup.component'
+
+const mapStateToProps = createStructuredSelector({
+  chatVisible: selectChatVisible,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleChatVisible: () => dispatch(toggleChatVisible()),
+});
+
+export function ChatAffixComponent({
+  chatVisible,
+  toggleChatVisible,
+  conversationList,
+  unreadCount,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Badge count={unreadCount}>
+      <Card size='small'>
+        {chatVisible ? (
+          <ChatPopupComponent conversationList={conversationList} />
+        ) : (
+          <div
+            onClick={() => toggleChatVisible()}
+            style={{ cursor: "pointer" }}>
+            <MessageOutlined />
+            <strong>{t("messaging.labels.messaging")}</strong>
+          </div>
+        )}
+      </Card>
+    </Badge>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ChatAffixComponent);

client/src/components/chat-affix/chat-affix.container.jsx

@@ -0,0 +1,32 @@
+import { useSubscription } from "@apollo/react-hooks";
+import React from "react";
+import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import ChatAffixComponent from "./chat-affix.component";
+import { Affix } from "antd";
+
+export default function ChatAffixContainer() {
+  const { loading, error, data } = useSubscription(
+    CONVERSATION_LIST_SUBSCRIPTION
+  );
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return (
+    <Affix offsetBottom={5}>
+      <div>
+        <ChatAffixComponent
+          conversationList={(data && data.conversations) || []}
+          unreadCount={
+            (data &&
+              data.conversations.reduce((acc, val) => {
+                return (acc = acc + val.messages_aggregate.aggregate.count);
+              }, 0)) ||
+            0
+          }
+        />
+      </div>
+    </Affix>
+  );
+}