BOD-14 Cleanup and re-org of some components for messaging.

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

@@ -21,8 +21,8 @@ function ChatConversationClosedComponent({
   closeConversation
 }) {
   return (
-    <div className='chat-overlay-closed'>
-      <div onClick={() => toggleConversationVisible(conversation.phone_num)}>
+    <div>
+      <div onClick={() => toggleConversationVisible(conversation.id)}>
         <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
       </div>
       <Button

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

@@ -1,18 +1,9 @@
 import { useSubscription } from "@apollo/react-hooks";
 import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { MESSAGES_SUBSCRIPTION } from "../../graphql/messages.queries";
 import ChatConversationComponent from "./chat-conversation.component";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
-const mapDispatchToProps = dispatch => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-
-export function ChatConversationContainer({ conversation }) {
+export default function ChatConversationContainer({ conversation }) {
   const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
     variables: { conversationId: conversation.id }
   });
@@ -26,7 +17,3 @@ export function ChatConversationContainer({ conversation }) {
   );
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChatConversationContainer);

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import AlertComponent from "../alert/alert.component";
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { CheckOutlined, CheckCircleOutlined } from "@ant-design/icons";
+import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
 
 export default function ChatConversationOpenComponent({
   conversation,
@@ -10,49 +10,13 @@ export default function ChatConversationOpenComponent({
   subState
 }) {
   const [loading, error] = subState;
-  const messagesEndRef = useRef(null);
-
-  const scrollToBottom = () => {
-    console.log("use");
-    !!messagesEndRef.current &&
-      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-  };
-
-  useEffect(scrollToBottom, [messages]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
 
-  const StatusRender = status => {
-    switch (status) {
-      case "sent":
-        return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
-      case "delivered":
-        return (
-          <CheckCircleOutlined style={{ margin: "2px", float: "right" }} />
-        );
-      default:
-        return null;
-    }
-  };
-
   return (
     <div className='chat-overlay-open'>
-      <div className='messages'>
-        <ul>
-          {messages.map(item => (
-            <li
-              key={item.id}
-              className={`${item.isoutbound ? "replies" : "sent"}`}>
-              <p>
-                {item.text}
-                {StatusRender(item.status)}
-              </p>
-            </li>
-          ))}
-          <li ref={messagesEndRef} />
-        </ul>
-      </div>
+      <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>
   );