BOD-14 Functional 2 way messaging from app.

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

@@ -0,0 +1,60 @@
+import { ShrinkOutlined } from "@ant-design/icons";
+import { Avatar, Badge, Col, List, Row } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { openConversation, toggleChatVisible } from "../../redux/messaging/messaging.actions";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  toggleChatVisible: () => dispatch(toggleChatVisible()),
+  openConversation: number => dispatch(openConversation(number))
+});
+
+export function ChatConversationListComponent({
+  toggleChatVisible,
+  conversationList,
+  openConversation
+}) {
+  console.log("conversationList", conversationList);
+
+  return (
+    <div>
+      <Row>
+        <Col span={12}>Title</Col>
+        <Col span={2} offset={10}>
+          <ShrinkOutlined onClick={() => toggleChatVisible()} />
+        </Col>
+      </Row>
+      <Row>
+        <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>
+          )}
+        />
+      </Row>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ChatConversationListComponent);