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

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

@@ -1,38 +0,0 @@
-import { CloseCircleFilled } from "@ant-design/icons";
-import React from "react";
-import { connect } from "react-redux";
-import {
-  closeConversation,
-  sendMessage,
-  toggleConversationVisible
-} from "../../redux/messaging/messaging.actions";
-import PhoneFormatter from "../../utils/PhoneFormatter";
-
-const mapDispatchToProps = dispatch => ({
-  toggleConversationVisible: conversationId =>
-    dispatch(toggleConversationVisible(conversationId)),
-  closeConversation: phone => dispatch(closeConversation(phone)),
-  sendMessage: message => dispatch(sendMessage(message))
-});
-
-function ChatConversationClosedComponent({
-  conversation,
-  toggleConversationVisible,
-  closeConversation
-}) {
-  return (
-    <div
-      className='chat-conversation-closed'
-      onClick={() => toggleConversationVisible(conversation.id)}>
-      <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
-      <CloseCircleFilled
-        onClick={() => closeConversation(conversation.phone_num)}
-      />
-    </div>
-  );
-}
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(ChatConversationClosedComponent);

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

@@ -1,27 +1,27 @@
 import { Badge, Card } from "antd";
 import React from "react";
-import ChatConversationClosedComponent from "./chat-conversation.closed.component";
-import ChatConversationOpenComponent from "./chat-conversation.open.component";
+import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
+import ChatSendMessage from "../chat-send-message/chat-send-message.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
+import AlertComponent from "../alert/alert.component";
 
 export default function ChatConversationComponent({
-  conversation,
   messages,
   subState,
-  unreadCount
+  conversation,
+  unreadCount,
 }) {
+  const [loading, error] = subState;
+
+  if (loading) return <LoadingSkeleton />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
   return (
     <div className='chat-conversation'>
       <Badge count={unreadCount}>
+        <ChatSendMessage conversation={conversation} />
         <Card size='small'>
-          {conversation.open ? (
-            <ChatConversationOpenComponent
-              messages={messages}
-              conversation={conversation}
-              subState={subState}
-            />
-          ) : (
-            <ChatConversationClosedComponent conversation={conversation} />
-          )}
+          <ChatMessageListComponent messages={messages} />
         </Card>
       </Badge>
     </div>

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

@@ -3,18 +3,30 @@ import React from "react";
 import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
 import ChatConversationComponent from "./chat-conversation.component";
 
-export default function ChatConversationContainer({ conversation }) {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
+const mapStateToProps = createStructuredSelector({
+  selectedConversation: selectSelectedConversation,
+});
+
+export default connect(mapStateToProps, null)(ChatConversationContainer);
+
+export function ChatConversationContainer({ selectedConversation }) {
+  console.log(
+    "ChatConversationContainer -> selectedConversation",
+    selectedConversation
+  );
   const { loading, error, data } = useSubscription(
     CONVERSATION_SUBSCRIPTION_BY_PK,
     {
-      variables: { conversationId: conversation.id }
+      variables: { conversationId: selectedConversation },
     }
   );
 
   return (
     <ChatConversationComponent
       subState={[loading, error]}
-      conversation={conversation}
       unreadCount={
         (data &&
           data.conversations_by_pk &&
@@ -23,6 +35,14 @@ export default function ChatConversationContainer({ conversation }) {
           data.conversations_by_pk.messages_aggregate.aggregate.count) ||
         0
       }
+      conversation={{
+        conversationId: selectedConversation,
+        phone_num:
+          (data &&
+            data.conversations_by_pk &&
+            data.conversations_by_pk.phone_num) ||
+          "",
+      }}
       messages={
         (data &&
           data.conversations_by_pk &&

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

@@ -1,36 +0,0 @@
-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 { ShrinkOutlined } from "@ant-design/icons";
-
-const mapDispatchToProps = dispatch => ({
-  toggleConversationVisible: conversation =>
-    dispatch(toggleConversationVisible(conversation))
-});
-
-export function ChatConversationOpenComponent({
-  conversation,
-  messages,
-  subState,
-  toggleConversationVisible
-}) {
-  const [loading, error] = subState;
-
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
-
-  return (
-    <div className='chat-conversation-open'>
-      <ShrinkOutlined
-        onClick={() => toggleConversationVisible(conversation.id)}
-      />
-      <ChatMessageListComponent messages={messages} />
-      <ChatSendMessage conversation={conversation} />
-    </div>
-  );
-}
-export default connect(null, mapDispatchToProps)(ChatConversationOpenComponent);