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

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

@@ -0,0 +1,49 @@
+import { ShrinkOutlined } from "@ant-design/icons";
+import { Col, Row } 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 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 "./chat-popup.styles.scss";
+
+const mapStateToProps = createStructuredSelector({
+  selectedConversation: selectSelectedConversation,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleChatVisible: () => dispatch(toggleChatVisible()),
+});
+
+export function ChatPopupComponent({
+  conversationList,
+  selectedConversation,
+  toggleChatVisible,
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className='chat-popup'>
+      <div style={{ overflow: "auto" }}>
+        <strong style={{ float: "left" }}>
+          {t("messaging.labels.messaging")}
+        </strong>
+        <ShrinkOutlined
+          onClick={() => toggleChatVisible()}
+          style={{ float: "right" }}
+        />
+      </div>
+
+      <Row>
+        <Col span={8}>
+          <ChatConversationListComponent conversationList={conversationList} />
+        </Col>
+        <Col span={16}>
+          {selectedConversation ? <ChatConversationContainer /> : null}
+        </Col>
+      </Row>
+    </div>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ChatPopupComponent);

client/src/components/chat-popup/chat-popup.styles.scss

@@ -0,0 +1,4 @@
+.chat-popup {
+  width: 40vw;
+  height: 50vh;
+}