BOD-14 More CSS issues for messaging.

client/src/components/chat-conversation/chat-conversation.open.component.jsx

@@ -1,13 +1,22 @@
 import React from "react";
+import { connect } from "react-redux";
+import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
 import AlertComponent from "../alert/alert.component";
+import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
+import { ShrinkOutlined } from "@ant-design/icons";
 
-export default function ChatConversationOpenComponent({
+const mapDispatchToProps = dispatch => ({
+  toggleConversationVisible: conversation =>
+    dispatch(toggleConversationVisible(conversation))
+});
+
+export function ChatConversationOpenComponent({
   conversation,
   messages,
-  subState
+  subState,
+  toggleConversationVisible
 }) {
   const [loading, error] = subState;
 
@@ -15,9 +24,13 @@ export default function ChatConversationOpenComponent({
   if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
-    <div className='chat-overlay-open'>
+    <div className='chat-conversation-open'>
+      <ShrinkOutlined
+        onClick={() => toggleConversationVisible(conversation.id)}
+      />
       <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>
   );
 }
+export default connect(null, mapDispatchToProps)(ChatConversationOpenComponent);