l-min-components 1.0.1215 → 1.0.1216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1215",
+  "version": "1.0.1216",
   "type": "module",
   "files": [
     "src/assets",

package/src/hooks/messaging-kit/index.jsx

@@ -1,6 +1,5 @@
 import useAxios from "axios-hooks";
 import { useCallback, useEffect, useState } from "react";
-import useWebSocket from "react-use-websocket";
 
 /**
  * Represents the details of the last message in a chat room overview.
@@ -233,13 +232,13 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
   }, [selectedAccount?.id]);
 
   // handle socket connection
-  const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(
-    buildSocketUrl(),
-    {
-      share: false,
-      shouldReconnect: () => true,
-    }
-  );
+  // const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(
+  //   buildSocketUrl(),
+  //   {
+  //     share: false,
+  //     shouldReconnect: () => true,
+  //   }
+  // );
 
   // get account type
   const [, request] = useAxios(
@@ -609,149 +608,152 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
     })();
   }, [selectedAccount?.id]); // Rerun when selectedAccount changes
 
-  // Effect to log incoming WebSocket messages (for debugging)
-  useEffect(() => {
-    console.log(`Got a new message: ${JSON.stringify(lastJsonMessage)}`);
-  }, [lastJsonMessage]);
-
   // --- Handle Incoming WebSocket Messages ---
   useEffect(() => {
-    if (lastJsonMessage && lastJsonMessage.event === "new.message.result") {
-      /** @type {WebSocketMessageData} */
-      const webSocketData = lastJsonMessage.data;
-      const roomId = webSocketData.room;
-
-      // Helper to get YYYY-MM-DD from ISO string (duplicate from sendMessage, consider extracting)
-      const getLocalDateString = (isoTimestamp) => {
-        if (!isoTimestamp) return new Date().toISOString().split("T")[0];
-        try {
-          return new Date(isoTimestamp).toISOString().split("T")[0];
-        } catch (e) {
-          console.error("Error parsing date:", e);
-          return new Date().toISOString().split("T")[0];
-        }
-      };
+    if (!selectedAccount) return;
+    const socket = new WebSocket(buildSocketUrl());
+    socket.addEventListener("message", (event) => {
+      const lastJsonMessage = JSON.parse(event.data);
+      if (lastJsonMessage && lastJsonMessage.event === "new.message.result") {
+        /** @type {WebSocketMessageData} */
+        const webSocketData = lastJsonMessage.data;
+        const roomId = webSocketData.room;
+
+        // Helper to get YYYY-MM-DD from ISO string (duplicate from sendMessage, consider extracting)
+        const getLocalDateString = (isoTimestamp) => {
+          if (!isoTimestamp) return new Date().toISOString().split("T")[0];
+          try {
+            return new Date(isoTimestamp).toISOString().split("T")[0];
+          } catch (e) {
+            console.error("Error parsing date:", e);
+            return new Date().toISOString().split("T")[0];
+          }
+        };
 
-      // --- Check if room exists in current state ---
-      let roomExists = false;
-      for (const courseGroup of state.roomsByCourses) {
-        if (courseGroup.rooms.some((room) => room.id === roomId)) {
-          roomExists = true;
-          break;
+        // --- Check if room exists in current state ---
+        let roomExists = false;
+        for (const courseGroup of state.roomsByCourses) {
+          if (courseGroup.rooms.some((room) => room.id === roomId)) {
+            roomExists = true;
+            break;
+          }
         }
-      }
 
-      // --- If room doesn't exist, refetch room list and skip state update for this message ---
-      if (!roomExists) {
-        console.log(`Room ${roomId} not found in state, refetching room list.`);
-        getMessageRoomsByCourses(null, true); // Refetch rooms once
-        return; // Stop processing this message until room list is updated
-      }
+        // --- If room doesn't exist, refetch room list and skip state update for this message ---
+        if (!roomExists) {
+          console.log(
+            `Room ${roomId} not found in state, refetching room list.`
+          );
+          getMessageRoomsByCourses(null, true); // Refetch rooms once
+          return; // Stop processing this message until room list is updated
+        }
 
-      // --- Format WebSocket data into ChatMessage ---
-      /** @type {ChatMessage} */
-      const newChatMessage = {
-        id: webSocketData.id,
-        text: webSocketData.text,
-        // Map media - assuming WebSocketMedia is compatible enough
-        media: webSocketData.media,
-        sender: {
-          id: webSocketData.sender.id,
-          first_name:
-            webSocketData.sender.full_name || webSocketData.sender.name,
-        },
-        is_read: webSocketData.is_read,
-        is_delivered: webSocketData.is_delivered,
-        created_at: webSocketData.created_at,
-        user_message: webSocketData.user_message, // Crucial for unread count
-        date: getLocalDateString(webSocketData.created_at),
-      };
+        // --- Format WebSocket data into ChatMessage ---
+        /** @type {ChatMessage} */
+        const newChatMessage = {
+          id: webSocketData.id,
+          text: webSocketData.text,
+          // Map media - assuming WebSocketMedia is compatible enough
+          media: webSocketData.media,
+          sender: {
+            id: webSocketData.sender.id,
+            first_name:
+              webSocketData.sender.full_name || webSocketData.sender.name,
+          },
+          is_read: webSocketData.is_read,
+          is_delivered: webSocketData.is_delivered,
+          created_at: webSocketData.created_at,
+          user_message: webSocketData.user_message, // Crucial for unread count
+          date: getLocalDateString(webSocketData.created_at),
+        };
 
-      // --- Update State ---
-      setState((prevState) => {
-        // --- Update chats state ---
-        const currentChatHistory = prevState.chats[roomId] || [];
-        let updatedChatHistory = [...currentChatHistory];
-        const todayDateString = "today"; // Or derive actual date string
+        // --- Update State ---
+        setState((prevState) => {
+          // --- Update chats state ---
+          const currentChatHistory = prevState.chats[roomId] || [];
+          let updatedChatHistory = [...currentChatHistory];
+          const todayDateString = "today"; // Or derive actual date string
 
-        const todayGroupIndex = updatedChatHistory.findIndex(
-          (group) => group.date === todayDateString
-        );
+          const todayGroupIndex = updatedChatHistory.findIndex(
+            (group) => group.date === todayDateString
+          );
 
-        if (todayGroupIndex !== -1) {
-          const todayGroup = updatedChatHistory[todayGroupIndex];
-          // Avoid adding duplicate messages if WS sends what we already added via sendMessage response
-          if (
-            !todayGroup.messages.some((msg) => msg.id === newChatMessage.id)
-          ) {
-            const updatedTodayGroup = {
-              ...todayGroup,
-              messages: [...todayGroup.messages, newChatMessage],
+          if (todayGroupIndex !== -1) {
+            const todayGroup = updatedChatHistory[todayGroupIndex];
+            // Avoid adding duplicate messages if WS sends what we already added via sendMessage response
+            if (
+              !todayGroup.messages.some((msg) => msg.id === newChatMessage.id)
+            ) {
+              const updatedTodayGroup = {
+                ...todayGroup,
+                messages: [...todayGroup.messages, newChatMessage],
+              };
+              updatedChatHistory.splice(todayGroupIndex, 1, updatedTodayGroup);
+            }
+          } else {
+            const newTodayGroup = {
+              date: todayDateString,
+              messages: [newChatMessage],
             };
-            updatedChatHistory.splice(todayGroupIndex, 1, updatedTodayGroup);
+            updatedChatHistory = [newTodayGroup, ...updatedChatHistory];
           }
-        } else {
-          const newTodayGroup = {
-            date: todayDateString,
-            messages: [newChatMessage],
-          };
-          updatedChatHistory = [newTodayGroup, ...updatedChatHistory];
-        }
 
-        const updatedChats = {
-          ...prevState.chats,
-          [roomId]: updatedChatHistory,
-        };
+          const updatedChats = {
+            ...prevState.chats,
+            [roomId]: updatedChatHistory,
+          };
 
-        // --- Update roomsByCourses state ---
-        const isIncomingMessage = !newChatMessage.user_message;
-        const updatedRoomsByCourses = prevState.roomsByCourses.map(
-          (courseGroup) => {
-            let courseUnreadIncrement = 0;
-            const roomIndex = courseGroup.rooms.findIndex(
-              (room) => room.id === roomId
-            );
-
-            if (roomIndex !== -1) {
-              const updatedRooms = [...courseGroup.rooms];
-              const currentRoom = updatedRooms[roomIndex];
-              const roomUnreadIncrement = isIncomingMessage ? 1 : 0;
-              courseUnreadIncrement = roomUnreadIncrement; // Track increment for the course total
-
-              updatedRooms[roomIndex] = {
-                ...currentRoom,
-                last_message: {
-                  id: newChatMessage.id,
-                  text: newChatMessage.text,
-                  media: newChatMessage.media,
-                  created_at: newChatMessage.created_at,
-                },
-                // Increment unread count only for incoming messages
-                unread_count: currentRoom.unread_count + roomUnreadIncrement,
-              };
-              return {
-                ...courseGroup,
-                rooms: updatedRooms,
-                // Increment total unread count for the course group
-                total_unread_count:
-                  courseGroup.total_unread_count + courseUnreadIncrement,
-              };
+          // --- Update roomsByCourses state ---
+          const isIncomingMessage = !newChatMessage.user_message;
+          const updatedRoomsByCourses = prevState.roomsByCourses.map(
+            (courseGroup) => {
+              let courseUnreadIncrement = 0;
+              const roomIndex = courseGroup.rooms.findIndex(
+                (room) => room.id === roomId
+              );
+
+              if (roomIndex !== -1) {
+                const updatedRooms = [...courseGroup.rooms];
+                const currentRoom = updatedRooms[roomIndex];
+                const roomUnreadIncrement = isIncomingMessage ? 1 : 0;
+                courseUnreadIncrement = roomUnreadIncrement; // Track increment for the course total
+
+                updatedRooms[roomIndex] = {
+                  ...currentRoom,
+                  last_message: {
+                    id: newChatMessage.id,
+                    text: newChatMessage.text,
+                    media: newChatMessage.media,
+                    created_at: newChatMessage.created_at,
+                  },
+                  // Increment unread count only for incoming messages
+                  unread_count: currentRoom.unread_count + roomUnreadIncrement,
+                };
+                return {
+                  ...courseGroup,
+                  rooms: updatedRooms,
+                  // Increment total unread count for the course group
+                  total_unread_count:
+                    courseGroup.total_unread_count + courseUnreadIncrement,
+                };
+              }
+              return courseGroup; // Return unchanged if room not in this group
             }
-            return courseGroup; // Return unchanged if room not in this group
-          }
-        );
+          );
 
-        // --- Return combined state update ---
-        return {
-          ...prevState,
-          chats: updatedChats,
-          roomsByCourses: updatedRoomsByCourses,
-        };
-      });
-    }
-  }, [lastJsonMessage]); // Also depend on roomsByCourses to re-check existence after refetch
+          // --- Return combined state update ---
+          return {
+            ...prevState,
+            chats: updatedChats,
+            roomsByCourses: updatedRoomsByCourses,
+          };
+        });
+      }
+    });
+    return () => socket.close();
+  }, [selectedAccount?.id]);
 
-  // console.log(state, "messages"); // Keep console log for debugging if needed
+  console.log(state, "messages"); // Keep console log for debugging if needed
   // send messages to account based on account type
 
   // Return the state and potentially the functions if they need to be called externally