Styling changes for messaging.

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

@@ -4,7 +4,7 @@ import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conv
 
 export default function ChatConversationTitle({ conversation }) {
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       {conversation.phone_num}
       <ChatConversationTitleTags
         jobConversations={conversation.job_conversations || []}

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

@@ -1,10 +1,10 @@
-import { Badge, Card } from "antd";
 import React from "react";
+import AlertComponent from "../alert/alert.component";
+import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.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";
+import "./chat-conversation.styles.scss";
-import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.component";
 
 export default function ChatConversationComponent({
   subState,
@@ -14,30 +14,27 @@ export default function ChatConversationComponent({
   const [loading, error] = subState;
 
   if (loading) return <LoadingSkeleton />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
-  const unreadCount =
+  // const unreadCount =
-    (conversation &&
+  //   (conversation &&
-      conversation &&
+  //     conversation &&
-      conversation.messages_aggregate &&
+  //     conversation.messages_aggregate &&
-      conversation.messages_aggregate.aggregate &&
+  //     conversation.messages_aggregate.aggregate &&
-      conversation.messages_aggregate.aggregate.count) ||
+  //     conversation.messages_aggregate.aggregate.count) ||
-    0;
+  //   0;
 
   const messages = (conversation && conversation.messages) || [];
 
   return (
     <div
-      className='chat-conversation'
+      className="chat-conversation"
       onMouseDown={handleMarkConversationAsRead}
-      onKeyDown={handleMarkConversationAsRead}>
+      onKeyDown={handleMarkConversationAsRead}
-      <Badge count={unreadCount}>
+    >
-        <Card size='small'>
+      <ChatConversationTitle conversation={conversation} />
-          <ChatConversationTitle conversation={conversation} />
+      <ChatMessageListComponent messages={messages} />
-          <ChatMessageListComponent messages={messages} />
+      <ChatSendMessage conversation={conversation} />
-          <ChatSendMessage conversation={conversation} />
-        </Card>
-      </Badge>
     </div>
   );
 }

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

@@ -0,0 +1,5 @@
+.chat-conversation {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,7 +1,7 @@
 import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
 import "./chat-message-list.styles.scss";
-import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtualizedListRef = useRef(null);
@@ -29,7 +29,8 @@ export default function ChatMessageListComponent({ messages }) {
           <li
             ref={registerChild}
             style={style}
-            className={`${messages[index].isoutbound ? "replies" : "sent"}`}>
+            className={`${messages[index].isoutbound ? "replies" : "sent"}`}
+          >
             <p onLoad={measure}>
               {messages[index].text}
               {StatusRender(messages[index].status)}
@@ -41,16 +42,20 @@ export default function ChatMessageListComponent({ messages }) {
   };
 
   return (
-    <div className='messages'>
+    <div className="messages">
       <ul>
-        <List
+        <AutoSizer>
-          ref={virtualizedListRef}
+          {({ height, width }) => (
-          width={300}
+            <List
-          height={300}
+              ref={virtualizedListRef}
-          rowHeight={_cache.rowHeight}
+              width={width}
-          rowRenderer={_rowRenderer}
+              height={height}
-          rowCount={messages.length}
+              rowHeight={_cache.rowHeight}
-        />
+              rowRenderer={_rowRenderer}
+              rowCount={messages.length}
+            />
+          )}
+        </AutoSizer>
       </ul>
     </div>
   );

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,10 +1,13 @@
-// .messages {
+.messages {
-//   height: 300px;
+  //flex-grow: 1;
-//   min-height: calc(100% - 10px);
+  flex: 1;
-//   max-height: calc(100% - 93px);
+  //   height: 100%;
-//   overflow-y: scroll;
+  //   min-height: calc(100% - 10px);
-//   overflow-x: hidden;
+  //   max-height: calc(100% - 93px);
-// }
+  //   // overflow-y: scroll;
+  //   // overflow-x: hidden;
+}
+
 // @media screen and (max-width: 735px) {
 //   .messages {
 //     max-height: calc(100% - 105px);
@@ -17,13 +20,16 @@
 // .messages::-webkit-scrollbar-thumb {
 //   background-color: rgba(0, 0, 0, 0.3);
 // }
+.messages ul {
+  height: 100%;
+}
 .messages ul li {
   display: inline-block;
-  clear: both;
+  // clear: both;
   //float: left;
-  margin: 5px;
+  // margin: 5px;
-  width: calc(100% - 25px);
+  //width: calc(100% - 25px);
-  font-size: 0.9em;
+  // font-size: 0.9em;
 }
 .messages ul li:nth-last-child(1) {
   margin-bottom: 20px;

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

@@ -1,15 +1,15 @@
 import { MessageFilled } from "@ant-design/icons";
 import React from "react";
 import { connect } from "react-redux";
-
+import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 const mapDispatchToProps = (dispatch) => ({
-  //openConversation: (phone) => dispatch(openConversation(phone)),
+  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
 });
-export function ChatOpenButton({ phone }) {
+export function ChatOpenButton({ phone, openChatByPhone }) {
   return (
     <MessageFilled
       style={{ margin: 4 }}
-      onClick={() => alert("TODO FIX ME" + phone)}
+      onClick={() => openChatByPhone(phone)}
     />
   );
 }

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

@@ -24,7 +24,7 @@ export function ChatPopupComponent({
 }) {
   const { t } = useTranslation();
   return (
-    <div className='chat-popup'>
+    <div className="chat-popup">
       <div style={{ overflow: "auto" }}>
         <strong style={{ float: "left" }}>
           {t("messaging.labels.messaging")}
@@ -35,7 +35,7 @@ export function ChatPopupComponent({
         />
       </div>
 
-      <Row>
+      <Row className="chat-popup-content">
         <Col span={8}>
           <ChatConversationListComponent conversationList={conversationList} />
         </Col>

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

@@ -2,3 +2,7 @@
   width: 40vw;
   height: 50vh;
 }
+
+.chat-popup-content {
+  height: 100%;
+}

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -42,7 +42,7 @@ function ChatSendMessageComponent({
   };
 
   return (
-    <div style={{ display: "flex " }}>
+    <div style={{ display: "flex ", padding: "1em" }}>
       <Input.TextArea
         allowClear
         autoFocus

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -8,7 +8,6 @@ import { useTranslation } from "react-i18next";
 import { PlusOutlined } from "@ant-design/icons";
 
 export default function ChatTagRoContainer({ conversation }) {
-  console.log("ChatTagRoContainer -> conversation", conversation);
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
   const searchQueryState = useState("");

client/src/redux/messaging/messaging.actions.js

@@ -23,3 +23,8 @@ export const setSelectedConversation = (conversationId) => ({
   type: MessagingActionTypes.SET_SELECTED_CONVERSATION,
   payload: conversationId,
 });
+
+export const openChatByPhone = (phoneNumber) => ({
+  type: MessagingActionTypes.OPEN_CHAT_BY_PHONE,
+  payload: phoneNumber,
+});

client/src/redux/messaging/messaging.sagas.js

@@ -3,7 +3,14 @@ import { sendMessageFailure, sendMessageSuccess } from "./messaging.actions";
 import MessagingActionTypes from "./messaging.types";
 import axios from "axios";
 import { sendEmailFailure } from "../email/email.actions";
+import { withApollo } from "react-apollo";
 
+export function* onOpenChatByPhone() {
+  yield takeLatest(MessagingActionTypes.OPEN_CHAT_BY_PHONE, openChatByPhone);
+}
+export function* openChatByPhone({ payload: phone, client }) {
+  console.log("Payload: Phone, Client", phone, client);
+}
 export function* onSendMessage() {
   yield takeLatest(MessagingActionTypes.SEND_MESSAGE, sendMessage);
 }
@@ -22,5 +29,5 @@ export function* sendMessage({ payload }) {
 }
 
 export function* messagingSagas() {
-  yield all([call(onSendMessage)]);
+  yield all([call(onSendMessage), call(onOpenChatByPhone)]);
 }

client/src/redux/messaging/messaging.types.js

@@ -3,6 +3,7 @@ const MessagingActionTypes = {
   SEND_MESSAGE: "SEND_MESSAGE",
   SEND_MESSAGE_SUCCESS: "SEND_MESSAGE_SUCCESS",
   SEND_MESSAGE_FAILURE: "SEND_MESSAGE_FAILURE",
-  SET_SELECTED_CONVERSATION: 'SET_SELECTED_CONVERSATION'
+  SET_SELECTED_CONVERSATION: "SET_SELECTED_CONVERSATION",
+  OPEN_CHAT_BY_PHONE: "OPEN_CHAT_BY_PHONE",
 };
 export default MessagingActionTypes;

client/src/serviceWorker.js

@@ -55,7 +55,7 @@ export function register(config) {
 
   if ("serviceWorker" in navigator) {
     navigator.serviceWorker
-      .register("./firebase-messaging-sw.js")
+      .register("/firebase-messaging-sw.js")
       .then(function (registration) {
         console.log(
           "FCM Registration successful, scope is:",