Refactored Messaging as a part of BOD-14. Breaking changes remain.

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

@@ -1,41 +1,45 @@
-import { ShrinkOutlined } from "@ant-design/icons";
-import { Badge } from "antd";
+import { Badge, List } from "antd";
 import React from "react";
 import { connect } from "react-redux";
-import {
-  openConversation,
-  toggleChatVisible
-} from "../../redux/messaging/messaging.actions";
-import PhoneNumberFormatter from "../../utils/PhoneFormatter";
+import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
+import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
+import { createStructuredSelector } from "reselect";
+import "./chat-conversation-list.styles.scss";
 
-const mapDispatchToProps = dispatch => ({
-  toggleChatVisible: () => dispatch(toggleChatVisible()),
-  openConversation: number => dispatch(openConversation(number))
+const mapStateToProps = createStructuredSelector({
+  selectedConversation: selectSelectedConversation,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setSelectedConversation: (conversationId) =>
+    dispatch(setSelectedConversation(conversationId)),
 });
 
 export function ChatConversationListComponent({
-  toggleChatVisible,
   conversationList,
-  openConversation
+  selectedConversation,
+  setSelectedConversation,
 }) {
   return (
-    <div className='chat-overlay-open'>
-      <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>
+    <List
+      bordered
+      dataSource={conversationList}
+      renderItem={(item) => (
+        <List.Item
+          onClick={() => setSelectedConversation(item.id)}
+          className={`chat-list-item ${
+            item.id === selectedConversation
+              ? "chat-list-selected-conversation"
+              : null
+          }`}>
+          {item.phone_num}
+          <Badge count={item.messages_aggregate.aggregate.count || 0} />
+        </List.Item>
+      )}
+    />
   );
 }
-export default connect(null, mapDispatchToProps)(ChatConversationListComponent);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ChatConversationListComponent);