IO-3000 Adjusted first approach at messaging WS changes.

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

@@ -2,20 +2,26 @@ import { useApolloClient } from "@apollo/client";
 import { getToken, onMessage } from "@firebase/messaging";
 import { Button, notification, Space } from "antd";
 import axios from "axios";
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
+import SocketContext from "../../contexts/SocketIO/socketContext";
+import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
+  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
     if (!bodyshop || !bodyshop.messagingservicesid) return;
 
+    //Register WS handlers
+    registerMessagingHandlers({ socket, client });
+
     async function SubscribeToTopic() {
       try {
         const r = await axios.post("/notifications/subscribe", {
@@ -61,7 +67,11 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
 
     SubscribeToTopic();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bodyshop]);
+
+    return () => {
+      unregisterMessagingHandlers({ socket });
+    };
+  }, [bodyshop, socket, t, client]);
 
   useEffect(() => {
     function handleMessage(payload) {

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

@@ -0,0 +1,136 @@
+import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
+
+export function registerMessagingHandlers({ socket, client }) {
+  if (!(socket && client)) return;
+  function handleNewMessageSummary(message) {
+    console.log("🚀 ~ SUMMARY CONSOLE LOG:", message);
+
+    if (!message.isoutbound) {
+      //It's an inbound message.
+      if (!message.existingConversation) {
+        //Do a read query.
+        const queryResults = client.cache.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: {}
+        });
+        // Do a write query. Assume 0 unread messages to utilize code below.
+        client.cache.writeQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: {},
+          data: {
+            conversations: [
+              { ...message.newConversation, messages_aggregate: { aggregate: { count: 0 } } },
+              ...queryResults
+            ]
+          }
+        });
+      }
+      client.cache.modify({
+        id: client.cache.identify({
+          __typename: "conversations",
+          id: message.conversationId
+        }),
+        fields: {
+          updated_at: () => new Date(),
+          messages_aggregate(cached) {
+            return { aggregate: { count: cached.aggregate.count + 1 } };
+          }
+        }
+      });
+      client.cache.modify({
+        fields: {
+          conversations(existingConversations = [], { readField }) {
+            return [
+              { __ref: `conversations:${message.conversationId}` }, // TODO: This throws the cache merging error in apollo.
+              ...existingConversations.filter((c) => c.__ref !== `conversations:${message.conversationId}`)
+            ];
+          }
+        }
+      });
+
+      client.cache.modify({
+        fields: {
+          messages_aggregate(cached) {
+            return { aggregate: { count: cached.aggregate.count + 1 } };
+          }
+        }
+      });
+    } else {
+      //It's an outbound message
+      //Update the last updated for conversations in the list. If it's new, add it in.
+      // If it isn't just update the last updated at.
+      client.cache.modify({
+        id: client.cache.identify({
+          __typename: "conversations",
+          id: message.conversationId
+        }),
+        fields: {
+          updated_at: () => message.newMessage.updated_at
+        }
+      });
+    }
+  }
+
+  function handleNewMessageDetailed(message) {
+    console.log("🚀 ~ DETAIL CONSOLE LOG:", message);
+    //They're looking at the conversation right now. Need to merge into the list of messages i.e. append to the end.
+    //Add the message to the overall cache.
+
+    //Handle outbound messages
+    if (message.newMessage.isoutbound) {
+      const queryResults = client.cache.readQuery({
+        query: GET_CONVERSATION_DETAILS,
+        variables: { conversationId: message.newMessage.conversationid }
+      });
+      client.cache.writeQuery({
+        query: GET_CONVERSATION_DETAILS,
+        variables: { conversationId: message.newMessage.conversationid },
+        data: {
+          ...queryResults,
+          conversations_by_pk: {
+            ...queryResults.conversations_by_pk,
+            messages: [...queryResults.conversations_by_pk.messages, message.newMessage]
+          }
+        }
+      });
+    }
+    // We got this as a receive.
+    else {
+    }
+  }
+
+  function handleMessageChanged(message) {
+    //Find it in the cache, and just update it based on what was sent.
+    client.cache.modify({
+      id: client.cache.identify({
+        __typename: "messages",
+        id: message.id
+      }),
+      fields: {
+        //TODO: see if there is a way to have this update all fields e.g. only spread in updates rather than prescribing
+        updated_at: () => new Date(),
+        status(cached) {
+          return message.status;
+        }
+      }
+    });
+  }
+
+  function handleConversationChanged(conversation) {
+    //If it was archived, marked unread, etc.
+  }
+
+  socket.on("new-message-summary", handleNewMessageSummary);
+  socket.on("new-message-detailed", handleNewMessageDetailed);
+  socket.on("message-changed", handleMessageChanged);
+  socket.on("conversation-changed", handleConversationChanged); //TODO: Unread, mark as read, archived, unarchive, etc. 
+}
+
+export function unregisterMessagingHandlers({ socket }) {
+  if (!socket) return;
+  socket.off("new-message-summary");
+  socket.off("new-message-detailed");
+  socket.off("message-changed");
+  socket.off("message-changed");
+  socket.off("conversation-changed");
+}