BOD-14 More refactoring for messaging. Styles removed.

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

@@ -7,10 +7,11 @@ import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
 export default function ChatConversationComponent({
   conversation,
   messages,
-  subState
+  subState,
+  unreadCount
 }) {
   return (
-    <Badge count={messages.length}>
+    <Badge count={unreadCount}>
       <Card className='chat-overlay' size='small'>
         {conversation.open ? (
           <ChatConversationOpenComponent

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

@@ -1,19 +1,34 @@
 import { useSubscription } from "@apollo/react-hooks";
 import React from "react";
-import { MESSAGES_SUBSCRIPTION } from "../../graphql/messages.queries";
+import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
 import ChatConversationComponent from "./chat-conversation.component";
 
 export default function ChatConversationContainer({ conversation }) {
-  const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
-    variables: { conversationId: conversation.id }
-  });
+  const { loading, error, data } = useSubscription(
+    CONVERSATION_SUBSCRIPTION_BY_PK,
+    {
+      variables: { conversationId: conversation.id }
+    }
+  );
 
   return (
     <ChatConversationComponent
       subState={[loading, error]}
       conversation={conversation}
-      messages={(data && data.messages) || []}
+      unreadCount={
+        (data &&
+          data.conversations_by_pk &&
+          data.conversations_by_pk.messages_aggregate &&
+          data.conversations_by_pk.messages_aggregate.aggregate &&
+          data.conversations_by_pk.messages_aggregate.aggregate.count) ||
+        0
+      }
+      messages={
+        (data &&
+          data.conversations_by_pk &&
+          data.conversations_by_pk.messages) ||
+        []
+      }
     />
   );
 }
-

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

@@ -1,28 +1,28 @@
-.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-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%;