General formatting for messaging + reshaping of messaging components and their structure.

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

@@ -0,0 +1,49 @@
+import { Affix, Button, Badge } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import {
+  selectChatVisible,
+  selectConversations
+} from "../../redux/messaging/messaging.selectors";
+import ChatOverlayComponent from "./chat-overlay.component";
+import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
+
+const mapStateToProps = createStructuredSelector({
+  chatVisible: selectChatVisible,
+  conversations: selectConversations
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleChatVisible: () => dispatch(toggleChatVisible())
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatWindowContainer({
+  chatVisible,
+  toggleChatVisible,
+  conversations
+}) {
+  console.log("conversations", conversations);
+  return (
+    <Affix offsetBottom={25} style={{ padding: "10px, 10px, 10px, 10px" }}>
+      <div>
+        <Badge count={10}>
+          <ChatOverlayComponent
+            chatVisible={chatVisible}
+            toggleChatVisible={toggleChatVisible}
+          />
+        </Badge>
+        {conversations
+          ? conversations.map((conversation, idx) => (
+              <Badge count={5}>
+                <ChatConversationContainer conversation={conversation} />
+              </Badge>
+            ))
+          : null}
+      </div>
+    </Affix>
+  );
+});