feature/IO-3000-messaging-sockets-migration2 - Handle some of the PR notes

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -5,8 +5,17 @@ import ChatMessageListComponent from "../chat-messages-list/chat-message-list.co
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import "./chat-conversation.styles.scss";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
 
-export default function ChatConversationComponent({
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = () => ({});
+
+export function ChatConversationComponent({
   subState,
   conversation,
   messages,
@@ -31,3 +40,5 @@ export default function ChatConversationComponent({
     </div>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationComponent);

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

@@ -1,6 +1,6 @@
 import { useApolloClient, useQuery } from "@apollo/client";
 import axios from "axios";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import SocketContext from "../../contexts/SocketIO/socketContext";
@@ -14,8 +14,6 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-export default connect(mapStateToProps, null)(ChatConversationContainer);
-
 export function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const client = useApolloClient();
   const { socket } = useContext(SocketContext);
@@ -30,38 +28,40 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
     fetchPolicy: "network-only"
   });
 
-  // Utility to update Apollo cache
-  const updateCacheWithReadMessages = (conversationId, messageIds) => {
-    if (!conversationId || !messageIds || messageIds.length === 0) return;
+  const updateCacheWithReadMessages = useCallback(
+    (conversationId, messageIds) => {
+      if (!conversationId || !messageIds || messageIds.length === 0) return;
 
-    messageIds.forEach((messageId) => {
+      // Mark individual messages as read
+      messageIds.forEach((messageId) => {
+        client.cache.modify({
+          id: client.cache.identify({ __typename: "messages", id: messageId }),
+          fields: {
+            read() {
+              return true; // Mark message as read
+            }
+          }
+        });
+      });
+
+      // Update aggregate unread count for the conversation
       client.cache.modify({
-        id: client.cache.identify({ __typename: "messages", id: messageId }),
+        id: client.cache.identify({ __typename: "conversations", id: conversationId }),
         fields: {
-          read() {
-            return true; // Mark message as read
+          messages_aggregate(existingAggregate) {
+            return {
+              ...existingAggregate,
+              aggregate: {
+                ...existingAggregate.aggregate,
+                count: 0 // No unread messages remaining
+              }
+            };
           }
         }
       });
-    });
-
-    // Optionally update aggregate unread count
-    client.cache.modify({
-      id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-      fields: {
-        messages_aggregate(existingAggregate) {
-          const updatedAggregate = {
-            ...existingAggregate,
-            aggregate: {
-              ...existingAggregate.aggregate,
-              count: 0 // No unread messages remaining
-            }
-          };
-          return updatedAggregate;
-        }
-      }
-    });
-  };
+    },
+    [client.cache]
+  );
 
   // Handle WebSocket events
   useEffect(() => {
@@ -80,7 +80,7 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
     return () => {
       socket.off("conversation-changed", handleConversationChange);
     };
-  }, [socket, client]);
+  }, [socket, client, updateCacheWithReadMessages]);
 
   // Handle joining/leaving conversation
   useEffect(() => {
@@ -143,7 +143,8 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
       conversation={convoData ? convoData.conversations_by_pk : {}}
       messages={convoData ? convoData.conversations_by_pk.messages : []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
-      bodyshop={bodyshop}
     />
   );
 }
+
+export default connect(mapStateToProps, null)(ChatConversationContainer);