BOD-14 Added virtualization for messages with known bug. Added messages geting marked as read.

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

@@ -6,7 +6,11 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx"
 import AlertComponent from "../alert/alert.component";
 import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.component";
 
-export default function ChatConversationComponent({ subState, conversation }) {
+export default function ChatConversationComponent({
+  subState,
+  conversation,
+  handleMarkConversationAsRead,
+}) {
   const [loading, error] = subState;
 
   if (loading) return <LoadingSkeleton />;
@@ -20,12 +24,13 @@ export default function ChatConversationComponent({ subState, conversation }) {
       conversation.messages_aggregate.aggregate.count) ||
     0;
 
-  const messages =
-    (conversation && conversation.messages) ||
-    [];
+  const messages = (conversation && conversation.messages) || [];
 
   return (
-    <div className='chat-conversation'>
+    <div
+      className='chat-conversation'
+      onMouseDown={handleMarkConversationAsRead}
+      onKeyDown={handleMarkConversationAsRead}>
       <Badge count={unreadCount}>
         <Card size='small'>
           <ChatConversationTitle conversation={conversation} />

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

@@ -1,11 +1,11 @@
-import { useSubscription } from "@apollo/react-hooks";
+import { useMutation, useSubscription } from "@apollo/react-hooks";
 import React from "react";
-import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
-import ChatConversationComponent from "./chat-conversation.component";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import { MARK_MESSAGES_AS_READ_BY_CONVERSATION } from "../../graphql/messages.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
+import ChatConversationComponent from "./chat-conversation.component";
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
 });
@@ -13,10 +13,6 @@ const mapStateToProps = createStructuredSelector({
 export default connect(mapStateToProps, null)(ChatConversationContainer);
 
 export function ChatConversationContainer({ selectedConversation }) {
-  console.log(
-    "ChatConversationContainer -> selectedConversation",
-    selectedConversation
-  );
   const { loading, error, data } = useSubscription(
     CONVERSATION_SUBSCRIPTION_BY_PK,
     {
@@ -24,12 +20,33 @@ export function ChatConversationContainer({ selectedConversation }) {
     }
   );
 
+  const [markConversationRead] = useMutation(
+    MARK_MESSAGES_AS_READ_BY_CONVERSATION,
+    {
+      variables: { conversationId: selectedConversation },
+    }
+  );
+
+  const unreadCount =
+    (data &&
+      data.conversations_by_pk &&
+      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;
+
+  const handleMarkConversationAsRead = () => {
+    if (unreadCount > 0 && !!selectedConversation) {
+      markConversationRead();
+    }
+  };
+
   return (
     <ChatConversationComponent
       subState={[loading, error]}
       conversation={data ? data.conversations_by_pk : {}}
-        
-
+      handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );
 }