l-min-components 1.0.1208 → 1.0.1209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1208",
+  "version": "1.0.1209",
   "type": "module",
   "files": [
     "src/assets",
@@ -63,6 +63,7 @@
     "react-slick": "0.30.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",
+    "react-use-websocket": "^4.13.0",
     "screenfull": "^6.0.2",
     "slate": "^0.94.0",
     "slate-history": "^0.93.0",

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

@@ -1,5 +1,6 @@
 import useAxios from "axios-hooks";
 import { useEffect, useState } from "react";
+import useWebSocket, { ReadyState } from "react-use-websocket";
 
 /**
  * Represents the details of the last message in a chat room overview.
@@ -163,7 +164,83 @@ import { useEffect, useState } from "react";
  * @property {string} created_at - ISO 8601 timestamp string when the message was created on the server.
  */
 
+/**
+ * Represents the profile picture details within the sender object of a WebSocket message event.
+ * Note: This structure might be simpler than SenderProfilePicture.
+ * @typedef {object} WebSocketSenderProfilePicture
+ * @property {string} url - URL to access the profile picture.
+ * @property {string} mimetype - The MIME type of the picture file (e.g., 'image/png').
+ */
+
+/**
+ * Represents the sender details within a WebSocket message event data.
+ * @typedef {object} WebSocketSender
+ * @property {string} id - The unique identifier of the sender.
+ * @property {string} name - The name of the sender.
+ * @property {string} full_name - The full name of the sender.
+ * @property {object} cover_photo - Cover photo details (currently an empty object in the example).
+ * @property {WebSocketSenderProfilePicture} profile_picture - Profile picture information for the sender.
+ * @property {string | null} bio - The sender's biography text, or null.
+ */
+
+/**
+ * Represents the media attachment details within a WebSocket message event data.
+ * Note: This is an empty object in the example, structure might vary.
+ * @typedef {object | SentMessageMedia | null} WebSocketMedia - Can be an empty object, structured media details, or null.
+ */
+
+/**
+ * Represents the data payload of a WebSocket message event (e.g., 'new.message.result').
+ * @typedef {object} WebSocketMessageData
+ * @property {string} id - The unique identifier for the message (UUID string).
+ * @property {boolean} user_message - Indicates if the message was sent by the *currently authenticated* user.
+ * @property {WebSocketSender} sender - Detailed information about the message sender.
+ * @property {string} room - The unique identifier of the chat room the message belongs to.
+ * @property {string | null} text - The text content of the message, or null if only media.
+ * @property {WebSocketMedia} media - Details of the attached media (can be empty object or structured).
+ * @property {boolean} is_read - Read status flag.
+ * @property {boolean} is_delivered - Delivery status flag.
+ * @property {string} status - The status of the message (e.g., 'active').
+ * @property {string} created_at - ISO 8601 timestamp string when the message was created.
+ */
+
+/**
+ * Represents the overall structure of a WebSocket message event.
+ * @typedef {object} WebSocketMessageEvent
+ * @property {string} event - The type of the event (e.g., 'new.message.result').
+ * @property {WebSocketMessageData} data - The payload containing the message details.
+ */
+
 const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
+  const buildSocketUrl = () => {
+    if (!selectedAccount) return;
+    const baseUrl =
+      window.location.hostname.includes("staging") ||
+      window.location.hostname.includes("localhost")
+        ? "https://dev-117782726-api.learngual.com"
+        : "https://api.learngual.com";
+    const cookies = document.cookie;
+    const token = cookies.split(";").find((cookie) => {
+      cookie = cookie.trim();
+      if (cookie.startsWith("access=")) return true;
+    });
+    return (
+      baseUrl.replace("http", "ws") +
+      `/notify/v1/ws/connect/?authorization=${token.split("=")[1]}&_account=${
+        selectedAccount.id
+      }`
+    );
+  };
+
+  // handle socket connection
+  const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(
+    buildSocketUrl(),
+    {
+      share: false,
+      shouldReconnect: () => true,
+    }
+  );
+
   // get account type
   const [, request] = useAxios(
     {
@@ -373,10 +450,10 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
     // Call readRoomMessages only on the first page fetch, if a latest message ID was found and is its not read
     if (
       !nextPage &&
-      latestMessageIdFromFetch.id &&
-      !latestMessageIdFromFetch.is_read
+      latestMessageIdFromFetch?.id && // Optional chaining for safety
+      !latestMessageIdFromFetch?.is_read // Optional chaining for safety
     ) {
-      await readRoomMessages(latestMessageIdFromFetch);
+      await readRoomMessages(latestMessageIdFromFetch.id); // Pass only the ID
     }
 
     // Pass roomId correctly in the recursive call
@@ -412,7 +489,7 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
       });
     }
 
-    if (!response.data) return;
+    if (!response?.data) return; // Added optional chaining for safety
 
     /** @type {SentMessageResponse} */
     const sentMessageData = response.data;
@@ -470,7 +547,7 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
         // Replace the old group with the updated one
         updatedChatHistory.splice(todayGroupIndex, 1, updatedTodayGroup);
       } else {
-        // "today" group doesn't exist, create it and add to the end
+        // "today" group doesn't exist, create it and add to the beginning
         const newTodayGroup = {
           date: todayDateString,
           messages: [newChatMessage],
@@ -524,23 +601,163 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
     // await readRoomMessages(newChatMessage.id); // Depends on desired logic
   };
 
+  // Initial data fetch effect
   useEffect(() => {
+    if (!selectedAccount) return;
     (async () => {
       await getMessageRoomsByCourses();
-      // await getIndividualChats(null, "5be9b48281ac4c2885d3b719654ed59d"); // only call to get individual chat
-      await sendMessage({
-        text: "this is an automated message 3!",
-        courseId: "878",
-        accountId: "24dbaeede1",
-      });
+      // Example: Fetch initial chat for a specific room if needed on load
+      // await getIndividualChats(null, "some-initial-room-id");
     })();
-  }, [selectedAccount]);
+  }, [selectedAccount]); // 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];
+        }
+      };
+
+      // --- 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
+      }
+
+      // --- 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
+
+        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],
+            };
+            updatedChatHistory.splice(todayGroupIndex, 1, updatedTodayGroup);
+          }
+        } else {
+          const newTodayGroup = {
+            date: todayDateString,
+            messages: [newChatMessage],
+          };
+          updatedChatHistory = [newTodayGroup, ...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,
+              };
+            }
+            return courseGroup; // Return unchanged if room not in this group
+          }
+        );
+
+        // --- Return combined state update ---
+        return {
+          ...prevState,
+          chats: updatedChats,
+          roomsByCourses: updatedRoomsByCourses,
+        };
+      });
+    }
+  }, [lastJsonMessage, state.roomsByCourses]); // Also depend on roomsByCourses to re-check existence after refetch
 
   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
-  return { state, getIndividualChats, getMessageRoomsByCourses };
+  return { state, getIndividualChats, getMessageRoomsByCourses, sendMessage }; // Ensure sendMessage is returned
 };
 
 export default useMessageKit;