feature/IO-3000-Migrate-MSG-to-Sockets - Progress Checkpoint

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

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

@@ -4,15 +4,19 @@ import { createStructuredSelector } from "reselect";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
-import axios from "axios";
 import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { updateUnreadCount } from "../../redux/messaging/messaging.actions.js";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
   bodyshop: selectBodyshop
 });
 
-export function ChatConversationContainer({ bodyshop, selectedConversation }) {
+const mapDispatchToProps = (dispatch) => ({
+  updateUnreadCounts: (data) => dispatch(updateUnreadCount(data.conversationId, data.unreadcnt))
+});
+
+export function ChatConversationContainer({ bodyshop, selectedConversation, updateUnreadCounts }) {
   const { socket } = useContext(SocketContext);
   const [conversationDetails, setConversationDetails] = useState({});
   const [messages, setMessages] = useState([]);
@@ -36,26 +40,34 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
         setMessages((prevMessages) => [...prevMessages, message]);
       });
 
+      socket.on("unread-count-updated", (data) => {
+        updateUnreadCounts(data);
+      });
+
+      socket.on("conversation-list-updated", (data) => {
+        setConversationDetails(data.conversation);
+        setMessages(data.messages);
+      });
+
       return () => {
         socket.emit("leave-conversation", selectedConversation);
         socket.off("conversation-details");
         socket.off("new-message");
+        socket.off("unread-count-updated");
+        socket.off("conversation-list-updated");
       };
     }
-  }, [socket, selectedConversation]);
+  }, [socket, selectedConversation, updateUnreadCounts]);
 
   // Mark messages as read
   const handleMarkConversationAsRead = async () => {
     if (messages.some((msg) => !msg.read) && !markingAsReadInProgress) {
       setMarkingAsReadInProgress(true);
-
       // Emit a WebSocket event to mark messages as read
-      socket.emit("mark-as-read", { conversationId: selectedConversation });
-
-      // Fallback to an API call to update the read status in the database
-      await axios.post("/sms/markConversationRead", {
-        conversationid: selectedConversation,
-        imexshopid: bodyshop.imexshopid
+      socket.emit("mark-as-read", {
+        conversationId: selectedConversation,
+        imexshopid: bodyshop.imexshopid,
+        bodyshopId: bodyshop.id
       });
 
       setMarkingAsReadInProgress(false);
@@ -76,4 +88,4 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
   );
 }
 
-export default connect(mapStateToProps, null)(ChatConversationContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationContainer);

client/src/contexts/SocketIO/useSocket.js

@@ -81,13 +81,13 @@ const useSocket = (bodyshop) => {
             dispatch({ type: "ADD_MESSAGE", payload: data.message });
           };
 
-          const handleReadUpdated = ({ conversationId }) => {
-            dispatch({ type: "UPDATE_UNREAD_COUNT", payload: conversationId });
-          };
+          // const handleReadUpdated = ({ conversationId }) => {
+          //   dispatch({ type: "UPDATE_UNREAD_COUNT", payload: conversationId });
+          // };
 
           socketInstance.on("messaging-list", handleMessagingList);
           socketInstance.on("new-message", handleNewMessage);
-          socketInstance.on("read-updated", handleReadUpdated);
+          // socketInstance.on("mark-as-read", handleReadUpdated);
           socketInstance.on("connect", handleConnect);
           socketInstance.on("reconnect", handleReconnect);
           socketInstance.on("connect_error", handleConnectionError);

client/src/pages/manage/manage.page.component.jsx

@@ -145,7 +145,7 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
     };
 
     fetchAlerts();
-  }, []);
+  }, [setAlerts]);
 
   // Use useEffect to watch for new alerts
   useEffect(() => {

client/src/redux/messaging/messaging.actions.js

@@ -52,12 +52,12 @@ export const addMessage = (message) => ({
 
 // Add a Conversation to the list of conversations
 export const addConversation = (conversation) => ({
-  type: "ADD_CONVERSATION",
+  type: MessagingActionTypes.ADD_CONVERSATION,
   payload: conversation
 });
 
 // Update unread count for a conversation (e.g., after marking messages as read)
-export const updateUnreadCount = (conversationId) => ({
+export const updateUnreadCount = (conversationId, unreadCount) => ({
   type: MessagingActionTypes.UPDATE_UNREAD_COUNT,
-  payload: conversationId
+  payload: { conversationId, unreadCount }
 });

client/src/redux/messaging/messaging.reducer.js

@@ -8,7 +8,7 @@ const INITIAL_STATE = {
   message: null,
   conversations: [], // Holds the list of conversations
   messages: [], // Holds the list of messages for the selected conversation
-  unreadCount: 0,
+  unreadcnt: 0,
   searchingForConversation: false
 };
 
@@ -83,12 +83,21 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
         conversations: {
           ...state.conversations,
           conversations: state.conversations.conversations.map((conversation) =>
-            conversation.id === action.payload
-              ? { ...conversation, unreadcnt: 0 } // Reset unread count for the selected conversation
+            conversation.id === action.payload.conversationId
+              ? { ...conversation, unreadcnt: action.payload.unreadcnt } // Update unread count to the value in the payload
               : conversation
           )
         },
-        unreadCount: Math.max(state.unreadCount - 1, 0) // Ensure unreadCount does not go below zero
+        unreadcnt: Math.max(
+          state.conversations.conversations.reduce(
+            (total, conversation) =>
+              conversation.id === action.payload.conversationId
+                ? total + action.payload.unreadcnt
+                : total + conversation.unreadcnt,
+            0
+          ),
+          0
+        ) // Recalculate the global unreadcnt based on all conversations
       };
 
     default: