BOD-14 WIP. CSS issues present with 2 way texting, but working live.

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

@@ -21,12 +21,13 @@ function ChatConversationClosedComponent({
   closeConversation
 }) {
   return (
-    <div style={{ display: "flex" }}>
+    <div className='chat-overlay-closed'>
       <div onClick={() => toggleConversationVisible(conversation.phone_num)}>
         <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
       </div>
       <Button
         type='dashed'
+        style={{ alignSelf: "right" }}
         shape='circle-outline'
         onClick={() => closeConversation(conversation.phone_num)}>
         X

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

@@ -1,60 +1,17 @@
-import { Button, Card, Badge } from "antd";
+import { Badge, Card } from "antd";
 import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import {
-  closeConversation,
-  sendMessage,
-  toggleConversationVisible
-} from "../../redux/messaging/messaging.actions";
-import PhoneFormatter from "../../utils/PhoneFormatter";
+import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 import ChatConversationOpenComponent from "./chat-conversation.open.component";
 import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
-import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
-const mapDispatchToProps = dispatch => ({
-  toggleConversationVisible: conversationId =>
-    dispatch(toggleConversationVisible(conversationId)),
-  closeConversation: phone => dispatch(closeConversation(phone)),
-  sendMessage: message => dispatch(sendMessage(message))
-});
-
-export function ChatConversationComponent({
+export default function ChatConversationComponent({
   conversation,
-  toggleConversationVisible,
-  closeConversation,
   messages,
   subState
 }) {
   return (
     <Badge count={messages.length}>
-      <Card
-        title={
-          conversation.open ? (
-            <div style={{ display: "flex" }}>
-              <div
-                onClick={() =>
-                  toggleConversationVisible(conversation.phone_num)
-                }>
-                <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
-              </div>
-              <Button
-                type='danger'
-                shape='circle-outline'
-                onClick={() => closeConversation(conversation.phone_num)}>
-                X
-              </Button>
-            </div>
-          ) : null
-        }
-        style={{
-          width: conversation.open ? "400px" : "175px",
-          margin: "0px 10px"
-        }}
-        size='small'>
+      <Card className='chat-overlay' size='small'>
         {conversation.open ? (
           <ChatConversationOpenComponent
             messages={messages}
@@ -68,8 +25,3 @@ export function ChatConversationComponent({
     </Badge>
   );
 }
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChatConversationComponent);

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

@@ -13,7 +13,6 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export function ChatConversationContainer({ conversation }) {
-  console.log("conversation", conversation);
   const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
     variables: { conversationId: conversation.id }
   });

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

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useEffect, useRef } 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";
 
 export default function ChatConversationOpenComponent({
   conversation,
@@ -9,24 +10,47 @@ 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>
-      <div className='messages' style={{ height: "400px" }}>
+    <div className='chat-overlay-open'>
+      <div className='messages'>
         <ul>
           {messages.map(item => (
             <li
               key={item.id}
               className={`${item.isoutbound ? "replies" : "sent"}`}>
-              <div>
-                <p>
-                  {item.text} <br /> <i>{item.status}</i>
-                </p>
-              </div>
+              <p>
+                {item.text}
+                {StatusRender(item.status)}
+              </p>
             </li>
           ))}
+          <li ref={messagesEndRef} />
         </ul>
       </div>
       <ChatSendMessage conversation={conversation} />

client/src/components/chat-conversation/chat-conversation.styles.scss

@@ -1,6 +1,77 @@
+.chat-overlay-wrapper {
+  width: 95vw;
+}
+.chat-overlay-scroller {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  vertical-align: bottom;
+}
+.chat-overlay {
+  margin: 0px 12px;
+  display: inline-block;
+}
+.chat-overlay-open {
+  width: 400px;
+  height: 33vh;
+  display: flex;
+  flex-flow: column;
+}
+.chat-overlay-closed {
+  display: flex;
+  justify-content: space-between;
+  vertical-align: middle;
+  width: 150px;
+  cursor: pointer;
+}
+
+// .chat-messages {
+//   height: 80%;
+//   overflow-x: hidden;
+//   overflow-y: scroll;
+//   flex-grow: 1;
+
+//   ul {
+//     list-style: none;
+//     margin: 0;
+//     padding: 0;
+//   }
+
+//   ul li {
+//     display: inline-block;
+//     clear: both;
+//     padding: 3px 10px;
+//     border-radius: 30px;
+//     margin-bottom: 2px;
+//   }
+
+//   .inbound {
+//     background: #eee;
+//     float: left;
+//   }
+
+//   .outbound {
+//     float: right;
+//     background: #0084ff;
+//     color: #fff;
+//   }
+
+//   .inbound + .outbound {
+//     border-bottom-right-radius: 5px;
+//   }
+
+//   .outbound + .outbound {
+//     border-top-right-radius: 5px;
+//     border-bottom-right-radius: 5px;
+//   }
+
+//   .outbound:last-of-type {
+//     border-bottom-right-radius: 30px;
+//   }
+// }
+
 .messages {
   height: auto;
-  min-height: calc(100% - 93px);
+  min-height: calc(100% - 10px);
   max-height: calc(100% - 93px);
   overflow-y: scroll;
   overflow-x: hidden;
@@ -21,7 +92,7 @@
   display: inline-block;
   clear: both;
   //float: left;
-  margin: 5px 15px 5px 15px;
+  margin: 5px;
   width: calc(100% - 25px);
   font-size: 0.9em;
 }