feature/IO-3000-messaging-sockets-migrations2 -

- testing and edge cases

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

client/src/components/chat-affix/registerMessagingSocketHandlers.js

@@ -12,61 +12,164 @@ const logLocal = (message, ...args) => {
 export const registerMessagingHandlers = ({ socket, client }) => {
   if (!(socket && client)) return;
 
-  const handleNewMessageSummary = (message) => {
+  const handleNewMessageSummary = async (message) => {
     const { conversationId, newConversation, existingConversation, isoutbound } = message;
-
     logLocal("handleNewMessageSummary", message);
 
-    if (!existingConversation && newConversation?.phone_num) {
-      const queryResults = client.cache.readQuery({
-        query: CONVERSATION_LIST_QUERY,
-        variables: { offset: 0 }
-      });
+    const queryVariables = { offset: 0 };
 
-      client.cache.writeQuery({
-        query: CONVERSATION_LIST_QUERY,
-        variables: { offset: 0 },
-        data: {
-          conversations: [
-            {
-              ...newConversation,
-              updated_at: newConversation.updated_at || new Date().toISOString(),
-              unreadcnt: newConversation.unreadcnt || 0,
-              archived: newConversation.archived || false,
-              label: newConversation.label || null,
-              job_conversations: newConversation.job_conversations || [],
-              messages_aggregate: newConversation.messages_aggregate || {
-                aggregate: { count: isoutbound ? 0 : 1 }
-              }
-            },
-            ...(queryResults?.conversations || [])
-          ]
-        }
-      });
-    } else {
-      client.cache.modify({
-        id: client.cache.identify({
-          __typename: "conversations",
-          id: conversationId
-        }),
-        fields: {
-          updated_at: () => new Date().toISOString(),
-          archived(cached) {
-            // Unarchive the conversation if it was previously marked as archived
-            if (cached) {
-              return false;
+    // Handle new conversation
+    if (!existingConversation && newConversation?.phone_num) {
+      try {
+        const queryResults = client.cache.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: queryVariables
+        });
+
+        const enrichedConversation = {
+          ...newConversation,
+          updated_at: newConversation.updated_at || new Date().toISOString(),
+          unreadcnt: newConversation.unreadcnt || 0,
+          archived: newConversation.archived || false,
+          label: newConversation.label || null,
+          job_conversations: newConversation.job_conversations || [],
+          messages_aggregate: newConversation.messages_aggregate || {
+            __typename: "messages_aggregate",
+            aggregate: {
+              __typename: "messages_aggregate_fields",
+              count: isoutbound ? 0 : 1
             }
-            return cached;
           },
-          messages_aggregate(cached) {
-            // Increment unread count only if the message is inbound
-            if (!isoutbound) {
-              return { aggregate: { count: cached.aggregate.count + 1 } };
-            }
-            return cached;
+          __typename: "conversations"
+        };
+
+        client.cache.writeQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: queryVariables,
+          data: {
+            conversations: [enrichedConversation, ...(queryResults?.conversations || [])]
           }
+        });
+      } catch (error) {
+        console.error("Error updating cache for new conversation:", error);
+      }
+      return;
+    }
+
+    // Handle existing conversation
+    if (existingConversation) {
+      let conversationDetails;
+
+      // Fetch or read the conversation details
+      try {
+        conversationDetails = client.cache.readFragment({
+          id: client.cache.identify({
+            __typename: "conversations",
+            id: conversationId
+          }),
+          fragment: gql`
+            fragment ExistingConversation on conversations {
+              id
+              phone_num
+              updated_at
+              archived
+              label
+              unreadcnt
+              job_conversations {
+                jobid
+                conversationid
+              }
+              messages_aggregate {
+                aggregate {
+                  count
+                }
+              }
+              __typename
+            }
+          `
+        });
+      } catch (error) {
+        console.warn("Conversation not found in cache, querying server...");
+      }
+
+      if (!conversationDetails) {
+        try {
+          const { data } = await client.query({
+            query: GET_CONVERSATION_DETAILS,
+            variables: { conversationId },
+            fetchPolicy: "network-only"
+          });
+          conversationDetails = data?.conversations_by_pk;
+        } catch (error) {
+          console.error("Failed to fetch conversation details from server:", error);
+          return;
         }
-      });
+      }
+
+      if (!conversationDetails) {
+        console.error("Unable to retrieve conversation details. Skipping cache update.");
+        return;
+      }
+
+      try {
+        const queryResults = client.cache.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: queryVariables
+        });
+
+        const isAlreadyInCache = queryResults?.conversations.some((conv) => conv.id === conversationId);
+
+        if (!isAlreadyInCache) {
+          const enrichedConversation = {
+            ...conversationDetails,
+            archived: false,
+            __typename: "conversations",
+            messages_aggregate: {
+              __typename: "messages_aggregate",
+              aggregate: {
+                __typename: "messages_aggregate_fields",
+                count:
+                  conversationDetails.messages?.filter(
+                    (message) => !message.read && !message.isoutbound // Count unread, inbound messages
+                  ).length || 0
+              }
+            }
+          };
+
+          client.cache.writeQuery({
+            query: CONVERSATION_LIST_QUERY,
+            variables: queryVariables,
+            data: {
+              conversations: [enrichedConversation, ...(queryResults?.conversations || [])]
+            }
+          });
+        }
+        // Update existing conversation fields
+        client.cache.modify({
+          id: client.cache.identify({
+            __typename: "conversations",
+            id: conversationId
+          }),
+          fields: {
+            updated_at: () => new Date().toISOString(),
+            archived: () => false,
+            messages_aggregate(cached) {
+              if (!isoutbound) {
+                return {
+                  __typename: "messages_aggregate",
+                  aggregate: {
+                    __typename: "messages_aggregate_fields",
+                    count: cached.aggregate.count + 1
+                  }
+                };
+              }
+              return cached;
+            }
+          }
+        });
+      } catch (error) {
+        console.error("Error updating cache for existing conversation:", error);
+      }
     }
   };
 
@@ -300,7 +403,7 @@ export const registerMessagingHandlers = ({ socket, client }) => {
   };
 
   const handleNewMessage = ({ conversationId, message }) => {
-    if (!conversationId || !message.id || !message.text) {
+    if (!conversationId || !message?.id || !message?.text) {
       return;
     }
 
@@ -359,9 +462,9 @@ export const registerMessagingHandlers = ({ socket, client }) => {
     });
   };
 
-  socket.on("new-message", handleNewMessage);
   socket.on("new-message-summary", handleNewMessageSummary);
   socket.on("new-message-detailed", handleNewMessageDetailed);
+  socket.on("new-message", handleNewMessage);
   socket.on("message-changed", handleMessageChanged);
   socket.on("conversation-changed", handleConversationChanged);
 };

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

@@ -19,12 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
 });
 
-function ChatConversationListComponent({
-  conversationList,
-  selectedConversation,
-  setSelectedConversation,
-  loadMoreConversations
-}) {
+function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
   const renderConversation = (index) => {
     const item = conversationList[index];
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
@@ -69,13 +64,15 @@ function ChatConversationListComponent({
     );
   };
 
+  // TODO: Can go back into virtuoso for additional fetch
+  // endReached={loadMoreConversations} // Calls loadMoreConversations when scrolled to the bottom
+
   return (
     <div className="chat-list-container">
       <Virtuoso
         data={conversationList}
         itemContent={(index) => renderConversation(index)}
         style={{ height: "100%", width: "100%" }}
-        endReached={loadMoreConversations} // Calls loadMoreConversations when scrolled to the bottom
       />
     </div>
   );

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

@@ -77,17 +77,6 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
       });
   }, [chatVisible, getConversations]);
 
-  const loadMoreConversations = useCallback(() => {
-    if (data)
-      fetchMore({
-        variables: {
-          offset: data.conversations.length
-        }
-      }).catch((err) => {
-        console.error(`Error fetching more conversations: ${(err, err.message || "")}`);
-      });
-  }, [data, fetchMore]);
-
   const unreadCount = unreadData?.messages_aggregate?.aggregate?.count || 0;
 
   return (
@@ -114,10 +103,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
                 {loading ? (
                   <LoadingSpinner />
                 ) : (
-                  <ChatConversationListComponent
-                    conversationList={data ? data.conversations : []}
-                    loadMoreConversations={loadMoreConversations}
-                  />
+                  <ChatConversationListComponent conversationList={data ? data.conversations : []} />
                 )}
               </Col>
               <Col span={16}>{selectedConversation ? <ChatConversationContainer /> : null}</Col>