BOD-14 More CSS issues for messaging.

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

@@ -1,8 +1,12 @@
 import { ShrinkOutlined } from "@ant-design/icons";
-import { Avatar, Badge, Col, List, Row } from "antd";
+import { Badge } from "antd";
 import React from "react";
 import { connect } from "react-redux";
-import { openConversation, toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import {
+  openConversation,
+  toggleChatVisible
+} from "../../redux/messaging/messaging.actions";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const mapDispatchToProps = dispatch => ({
   toggleChatVisible: () => dispatch(toggleChatVisible()),
@@ -14,40 +18,23 @@ export function ChatConversationListComponent({
   conversationList,
   openConversation
 }) {
-
   return (
     <div className='chat-overlay-open'>
-      <Row>
-        <Col span={12}>Title</Col>
-        <Col span={2} offset={10}>
-          <ShrinkOutlined onClick={() => toggleChatVisible()} />
-        </Col>
-      </Row>
-      <Row>
-        <Col span={24}>
-          <List
-            dataSource={conversationList}
-            renderItem={item => (
-              <Badge count={item.messages_aggregate.aggregate.count || 0}>
-                <List.Item
-                  key={item.id}
-                  style={{ cursor: "pointer" }}
-                  onClick={() =>
-                    openConversation({ phone_num: item.phone_num, id: item.id })
-                  }>
-                  <List.Item.Meta
-                    avatar={
-                      <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
-                    }
-                    title={item.phone_num}
-                    description='Some sort of RO info? '
-                  />
-                </List.Item>
-              </Badge>
-            )}
-          />
-        </Col>
-      </Row>
+      <ShrinkOutlined onClick={() => toggleChatVisible()} />
+      {conversationList.map(item => (
+        <Badge count={item.messages_aggregate.aggregate.count || 0}>
+          <div
+            key={item.id}
+            style={{ cursor: "pointer", display: "block" }}
+            onClick={() =>
+              openConversation({ phone_num: item.phone_num, id: item.id })
+            }>
+            <div>
+              <PhoneNumberFormatter>{item.phone_num}</PhoneNumberFormatter>
+            </div>
+          </div>
+        </Badge>
+      ))}
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { CloseCircleFilled } from "@ant-design/icons";
 import React from "react";
 import { connect } from "react-redux";
 import {
@@ -21,17 +21,13 @@ function ChatConversationClosedComponent({
   closeConversation
 }) {
   return (
-    <div>
-      <div onClick={() => toggleConversationVisible(conversation.id)}>
-        <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
-      </div>
-      <Button
-        type='dashed'
-        style={{ alignSelf: "right" }}
-        shape='circle-outline'
-        onClick={() => closeConversation(conversation.phone_num)}>
-        X
-      </Button>
+    <div
+      className='chat-conversation-closed'
+      onClick={() => toggleConversationVisible(conversation.id)}>
+      <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
+      <CloseCircleFilled
+        onClick={() => closeConversation(conversation.phone_num)}
+      />
     </div>
   );
 }

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

@@ -2,7 +2,6 @@ import { Badge, Card } from "antd";
 import React from "react";
 import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 import ChatConversationOpenComponent from "./chat-conversation.open.component";
-import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
 
 export default function ChatConversationComponent({
   conversation,
@@ -11,18 +10,20 @@ export default function ChatConversationComponent({
   unreadCount
 }) {
   return (
-    <Badge count={unreadCount}>
-      <Card className='chat-overlay' size='small'>
-        {conversation.open ? (
-          <ChatConversationOpenComponent
-            messages={messages}
-            conversation={conversation}
-            subState={subState}
-          />
-        ) : (
-          <ChatConversationClosedComponent conversation={conversation} />
-        )}
-      </Card>
-    </Badge>
+    <div className='chat-conversation'>
+      <Badge count={unreadCount}>
+        <Card size='small'>
+          {conversation.open ? (
+            <ChatConversationOpenComponent
+              messages={messages}
+              conversation={conversation}
+              subState={subState}
+            />
+          ) : (
+            <ChatConversationClosedComponent conversation={conversation} />
+          )}
+        </Card>
+      </Badge>
+    </div>
   );
 }

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);

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

@@ -4,7 +4,8 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectConversations } from "../../redux/messaging/messaging.selectors";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
-import ChatMessagesButtoContainer from "../chat-messages-button/chat-messages-button.container";
+import ChatMessagesButtonContainer from "../chat-messages-button/chat-messages-button.container";
+import "./chat-dock.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   activeConversations: selectConversations
@@ -14,8 +15,7 @@ export function ChatOverlayContainer({ activeConversations }) {
   return (
     <Affix offsetBottom={0}>
       <div className='chat-dock'>
-        <ChatMessagesButtoContainer />
-
+        <ChatMessagesButtonContainer />
         {activeConversations
           ? activeConversations.map(conversation => (
               <ChatConversationContainer

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

@@ -1,29 +1,19 @@
-// .chat-overlay-wrapper {
-//   width: 95vw;
-// }
-// .chat-overlay-scroller {
-//   overflow-x: scroll;
-//   overflow-y: hidden;
-//   vertical-align: bottom;
-// }
-// .chat-overlay {
-//   margin: 0px 12px;
-//   display: inline-block;
-// }
-// .chat-overlay-open {
-//   width: 400px;
-//   height: 33vh;
-//   display: flex;
-//   flex-flow: column;
-// }
-// .chat-overlay-closed {
-//   display: flex;
-//   justify-content: space-between;
-//   vertical-align: middle;
-//   width: 150px;
-//   cursor: pointer;
-// }
+.chat-dock {
+  z-index: 5;
+  //overflow-x: scroll;
+  // overflow-y: hidden;
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+}
 
+.chat-conversation {
+  margin: 2em 1em 0em 1em;
+}
+
+.chat-conversation-open {
+  height: 500px;
+}
 // .chat-messages {
 //   height: 80%;
 //   overflow-x: hidden;

client/src/components/chat-messages-button/chat-messages-button.component.jsx

@@ -23,18 +23,22 @@ export function ChatWindowComponent({
 }) {
   const { t } = useTranslation();
   return (
-    <Badge count={unreadCount}>
-      <Card size='small'>
-        {chatVisible ? (
-          <ChatConversationListComponent conversationList={conversationList} />
-        ) : (
-          <div onClick={() => toggleChatVisible()}>
-            <MessageFilled />
-            <strong>{t("messaging.labels.messaging")}</strong>
-          </div>
-        )}
-      </Card>
-    </Badge>
+    <div className='chat-conversation'>
+      <Badge count={unreadCount}>
+        <Card size='small'>
+          {chatVisible ? (
+            <ChatConversationListComponent
+              conversationList={conversationList}
+            />
+          ) : (
+            <div onClick={() => toggleChatVisible()}>
+              <MessageFilled />
+              <strong>{t("messaging.labels.messaging")}</strong>
+            </div>
+          )}
+        </Card>
+      </Badge>
+    </div>
   );
 }
 export default connect(