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