IO-1551 Refactor messaging.

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

@@ -9,6 +9,7 @@ import "./chat-conversation.styles.scss";
 export default function ChatConversationComponent({
   subState,
   conversation,
+  messages,
   handleMarkConversationAsRead,
 }) {
   const [loading, error] = subState;
@@ -16,8 +17,6 @@ export default function ChatConversationComponent({
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  const messages = (conversation && conversation.messages) || [];
-
   return (
     <div
       className="chat-conversation"

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

@@ -1,18 +1,32 @@
-import { useMutation, useSubscription } from "@apollo/client";
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import {
+  CONVERSATION_SUBSCRIPTION_BY_PK,
+  GET_CONVERSATION_DETAILS,
+} 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";
+import axios from "axios";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
+  bodyshop: selectBodyshop,
 });
 
 export default connect(mapStateToProps, null)(ChatConversationContainer);
 
-export function ChatConversationContainer({ selectedConversation }) {
+export function ChatConversationContainer({ bodyshop, selectedConversation }) {
+  const {
+    loading: convoLoading,
+    error: convoError,
+    data: convoData,
+  } = useQuery(GET_CONVERSATION_DETAILS, {
+    variables: { conversationId: selectedConversation },
+  });
+
   const { loading, error, data } = useSubscription(
     CONVERSATION_SUBSCRIPTION_BY_PK,
     {
@@ -26,30 +40,46 @@ export function ChatConversationContainer({ selectedConversation }) {
     MARK_MESSAGES_AS_READ_BY_CONVERSATION,
     {
       variables: { conversationId: selectedConversation },
+      update(cache) {
+        cache.modify({
+          id: cache.identify({
+            __typename: "conversations",
+            id: selectedConversation,
+          }),
+          fields: {
+            messages_aggregate(cached) {
+              return { aggregate: { count: 0 } };
+            },
+          },
+        });
+      },
     }
   );
 
   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;
+    data &&
+    data.messages &&
+    data.messages.reduce((acc, val) => {
+      return !val.read && !val.isoutbound ? acc + 1 : acc;
+    }, 0);
 
   const handleMarkConversationAsRead = async () => {
     if (unreadCount > 0 && !!selectedConversation && !markingAsReadInProgress) {
       setMarkingAsReadInProgress(true);
-      await markConversationRead();
+      await markConversationRead({});
+      await axios.post("/sms/markConversationRead", {
+        conversationid: selectedConversation,
+        imexshopid: bodyshop.imexshopid,
+      });
       setMarkingAsReadInProgress(false);
     }
   };
 
   return (
     <ChatConversationComponent
-      subState={[loading, error]}
-      conversation={data ? data.conversations_by_pk : {}}
+      subState={[loading || convoLoading, error || convoError]}
+      conversation={convoData ? convoData.conversations_by_pk : {}}
+      messages={data ? data.messages : []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );