l-min-components 1.0.1205 → 1.0.1207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1205",
+  "version": "1.0.1207",
   "type": "module",
   "files": [
     "src/assets",
@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.6.1",
     "@slate-serializers/html": "^2.1.2",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
@@ -56,6 +57,7 @@
     "react-modal": "^3.16.1",
     "react-multi-carousel": "^2.8.5",
     "react-player": "^2.15.1",
+    "react-redux": "^9.2.0",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.8.2",
     "react-slick": "0.30.2",

package/src/components/AppMainLayout/index.jsx

@@ -25,6 +25,7 @@ import useHeader from "../header/getHeaderDetails";
 import GracePeriod from "../deactivated";
 import MobileLayout from "../mobileLayout";
 import useTranslation from "../../hooks/useTranslation";
+import useMessageKit from "../../hooks/messaging-kit";
 
 const AppMainLayout = ({ children }) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -241,6 +242,8 @@ const AppMainLayout = ({ children }) => {
     setIsTranslationsLoading,
   } = useTranslation(wordBank);
 
+  useMessageKit(affiliatesActive, selectedAccount, affiliateAccount); // useMessageKit
+
   return (
     <OutletContext.Provider
       value={{
@@ -272,8 +275,7 @@ const AppMainLayout = ({ children }) => {
         setNewNotifications,
         notificationMarkReadData,
         handleGetNotificationMarkRead,
-      }}
-    >
+      }}>
       {/* display mobile layout on device width*/}
       {deviceWidth < 1200 ? (
         <MobileLayout findText={findText} />
@@ -285,8 +287,7 @@ const AppMainLayout = ({ children }) => {
           ) : (
             <Layout
               coming={coming}
-              hasLayoutBackgroundImage={hasLayoutBackgroundImage}
-            >
+              hasLayoutBackgroundImage={hasLayoutBackgroundImage}>
               <HeaderComponent
                 setNewNotifications={setNewNotifications}
                 findText={findText}

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

@@ -0,0 +1,328 @@
+import useAxios from "axios-hooks";
+import { useEffect, useState } from "react";
+
+/**
+ * Represents the details of the last message in a chat room overview.
+ * @typedef {object} LastMessage
+ * @property {string} id - The unique identifier of the message.
+ * @property {string} text - The text content of the message.
+ * @property {object} media - Media attachments associated with the message (structure might vary based on actual usage).
+ * @property {string} created_at - ISO 8601 timestamp string of when the message was created.
+ */
+
+/**
+ * Represents the profile picture details associated with a chat room overview.
+ * @typedef {object} ProfilePicture
+ * @property {string} url - The URL of the profile picture.
+ * @property {string} mimetype - The MIME type of the picture (e.g., 'image/png').
+ */
+
+/**
+ * Represents an individual chat room within a course grouping (overview).
+ * @typedef {object} ChatRoom
+ * @property {string} id - The unique identifier for the chat room (UUID string).
+ * @property {string} account_id - The ID of the associated account (likely user or instructor).
+ * @property {string} profile_name - The display name for the chat room or the other participant.
+ * @property {string} account_type - The type of the associated account (e.g., 'INSTRUCTOR', 'STUDENT').
+ * @property {boolean} is_private - Indicates if the chat room is private (e.g., a direct message).
+ * @property {boolean} is_online - Indicates the online status associated with the room/participant.
+ * @property {boolean} pin_status - Indicates if this specific chat room is pinned by the current user.
+ * @property {string} created_at - ISO 8601 timestamp string of when the room was created.
+ * @property {number} unread_count - The number of unread messages in this specific room for the current user.
+ * @property {LastMessage | null} last_message - The last message object sent in the room, or null if no messages exist.
+ * @property {ProfilePicture | null} profile_picture - The profile picture object associated with the room/participant, or null if none exists.
+ */
+
+/**
+ * Represents a grouping of chat rooms associated with a specific course.
+ * Corresponds to an element in the 'results' array from the API for room lists.
+ * @typedef {object} CourseChatGrouping
+ * @property {number} id - The unique identifier for the course grouping (likely the course ID).
+ * @property {string} name - The name of the course.
+ * @property {boolean} pin_status - Indicates if the overall course grouping is pinned by the current user.
+ * @property {number} total_unread_count - The aggregated total number of unread messages across all rooms listed in this grouping for the current user.
+ * @property {ChatRoom[]} rooms - An array of individual chat rooms associated with this course.
+ */
+
+/**
+ * Information about the sender of a message within chat history.
+ * @typedef {object} SenderInfo
+ * @property {string} id - The unique identifier of the sender.
+ * @property {string} first_name - The first name of the sender.
+ */
+
+/**
+ * Detailed information about a media attachment within chat history.
+ * @typedef {object} MediaDetails
+ * @property {string} id - Unique identifier for the media file.
+ * @property {string} url - URL to access the media file stream.
+ * @property {string} name - The original filename of the media.
+ * @property {number} size - The size of the media file in bytes.
+ * @property {string} duration - The duration of the media (e.g., "HH:MM:SS" format).
+ * @property {string} mimetype - The MIME type of the media file (e.g., 'audio/x-wav').
+ * @property {string | null} last_used - ISO 8601 timestamp indicating the last usage, or null.
+ * @property {string} created_at - ISO 8601 timestamp string of when the media was uploaded/created.
+ * @property {string} updated_at - ISO 8601 timestamp string of the last update to the media record.
+ * @property {number} course_count - Count related to course usage.
+ * @property {string | null} thumbnail_url - URL for a thumbnail image, or null.
+ * @property {string} convertion_status - Status of any media conversion process.
+ */
+
+/**
+ * Represents a single chat message within chat history.
+ * @typedef {object} ChatMessage
+ * @property {string} id - The unique identifier for the message (UUID string).
+ * @property {string | null} text - The text content of the message. Null if only media.
+ * @property {MediaDetails | object | null} media - Media details, an empty object, or null.
+ * @property {SenderInfo} sender - Information about the message sender.
+ * @property {boolean} is_read - Read status flag.
+ * @property {boolean} is_delivered - Delivery status flag.
+ * @property {string} created_at - ISO 8601 timestamp string when the message was created.
+ * @property {boolean} user_message - True if sent by the current user, false otherwise.
+ * @property {string} date - Specific date (YYYY-MM-DD format) message was sent.
+ */
+
+/**
+ * Represents a grouping of messages sent on a specific date within chat history.
+ * @typedef {object} MessagesByDate
+ * @property {string} date - Display string for the date group (e.g., "today", "Apr 04").
+ * @property {ChatMessage[]} messages - Array of message objects for this date group.
+ */
+
+/**
+ * Represents the chat history structure for a single room, used as values in the state.chats object.
+ * @typedef {object} RoomChatHistory
+ * @property {MessagesByDate[]} results - An array containing messages grouped by date for the specific room.
+ */
+
+/**
+ * Represents the expected structure of the API response data payload
+ * containing messages grouped by date.
+ * @typedef {object} MessageApiResponseData
+ * @property {number} count - Total number of items available across all pages (if pagination applies to items, not groups).
+ * @property {string | null} next - URL for the next page of results (date groups), or null.
+ * @property {string | null} previous - URL for the previous page of results (date groups), or null.
+ * @property {MessagesByDate[]} results - Array containing messages grouped by date.
+ */
+const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
+  // get account type
+  const [, request] = useAxios(
+    {
+      method: "GET",
+      params: {
+        _account: selectedAccount && selectedAccount.id,
+      },
+    },
+    {
+      manual: true,
+    }
+  );
+
+  //get account type
+
+  // initialize message store
+
+  /**
+   * React state hook managing application chat data.
+   *
+   * The `state` object holds chat rooms grouped by courses (`roomsByCourses`)
+   * and the detailed message history for individual chat rooms (`chats`).
+   * The `setState` function is used to update this state.
+   *
+   * @type {[
+   * { roomsByCourses: CourseChatGrouping[], chats: Record<string, RoomChatHistory> },
+   * React.Dispatch<React.SetStateAction<{ roomsByCourses: CourseChatGrouping[], chats: Record<string, RoomChatHistory> }>>
+   * ]} stateTuple - A tuple containing the state object and the dispatcher function. Note the type for `chats`.
+   * @property {CourseChatGrouping[]} stateTuple[0].roomsByCourses - Chat rooms grouped by their associated course. Initialized as empty array.
+   * @property {Record<string, RoomChatHistory>} stateTuple[0].chats - An object mapping Room IDs (string keys) to their respective chat history (`RoomChatHistory` objects).
+   * Example structure: { "roomId123": { results: [...] }, "roomId456": { results: [...] } }
+   */
+  const [state, setState] = useState({
+    roomsByCourses: [],
+    chats: {},
+  });
+
+  // get room grouped by course list
+  const getMessageRoomsByCourses = async (nextPage) => {
+    if (!selectedAccount) return;
+    // selected account exists
+    let response;
+    if (String(selectedAccount.type).toLowerCase() === "enterprise") {
+      response = await request({
+        url: nextPage || "/notify/v1/enterprise/rooms/",
+      });
+    }
+    if (
+      String(selectedAccount.type).toLowerCase() === "instructor" &&
+      affiliateAccount
+    ) {
+      response = await request({
+        url: nextPage || "/notify/v1/instructor/:enterprise_id/rooms/",
+      });
+    } // incomplete
+    if (String(selectedAccount.type).toLowerCase() === "personal") {
+      response = await request({
+        url: nextPage || "/notify/v1/rooms/",
+      });
+    } // incomplete
+    if (!response.data) return;
+    //found data
+
+    const { results: newCourseGroupings, next } = response.data;
+    setState((prevState) => {
+      const combined = [...prevState.roomsByCourses, ...newCourseGroupings];
+      // Use a Map to filter out duplicates based on the course grouping 'id'
+      const uniqueMap = new Map(combined.map((item) => [item.id, item]));
+      const uniqueCourseGroupings = Array.from(uniqueMap.values());
+
+      return {
+        ...prevState,
+        roomsByCourses: uniqueCourseGroupings,
+      };
+    });
+    if (next) {
+      // Ensure the correct function name is called recursively
+      getMessageRoomsByCourses(next);
+    }
+  };
+
+  // get individual chats
+  const getIndividualChats = async (nextPage, roomId) => {
+    if (!selectedAccount) return;
+
+    let response;
+    if (String(selectedAccount.type).toLowerCase() === "enterprise") {
+      response = await request({
+        url: nextPage || "/notify/v1/enterprise/chats/",
+        params: {
+          _account: selectedAccount.id,
+          room_id: roomId,
+        },
+      });
+    }
+
+    if (!response.data) return;
+
+    /** @type {MessageApiResponseData} */
+    const responseData = response.data;
+    const { results: newDateGroups } = responseData;
+
+    setState((prevState) => {
+      let unreadCountToSubtract = 0;
+
+      // --- Update roomsByCourses ---
+      const updatedRoomsByCourses = prevState.roomsByCourses.map(
+        (courseGroup) => {
+          // Find the room within this course group
+          const roomIndex = courseGroup.rooms.findIndex(
+            (room) => room.id === roomId
+          );
+
+          if (roomIndex !== -1) {
+            // Found the room in this course group
+            const targetRoom = courseGroup.rooms[roomIndex];
+            unreadCountToSubtract = targetRoom.unread_count; // Store the count before resetting
+
+            // Create a new rooms array with the updated room
+            const updatedRooms = [
+              ...courseGroup.rooms.slice(0, roomIndex),
+              { ...targetRoom, unread_count: 0 }, // Reset unread count for the specific room
+              ...courseGroup.rooms.slice(roomIndex + 1),
+            ];
+
+            // Return a new course group object with updated total count and rooms
+            return {
+              ...courseGroup,
+              // Ensure total_unread_count doesn't go below zero
+              total_unread_count: Math.max(
+                0,
+                courseGroup.total_unread_count - unreadCountToSubtract
+              ),
+              rooms: updatedRooms,
+            };
+          }
+
+          // If the room wasn't in this group, return the group unchanged
+          return courseGroup;
+        }
+      );
+      // --- End Update roomsByCourses ---
+
+      // --- Update chats (existing logic) ---
+      const existingDateGroups = prevState.chats[roomId]?.results || [];
+      const allDateGroups = [...existingDateGroups, ...newDateGroups];
+
+      // Group messages by date and de-duplicate messages within each date using their ID
+      const messagesGroupedByDate = {};
+      allDateGroups.forEach((dateGroup) => {
+        if (!messagesGroupedByDate[dateGroup.date]) {
+          // Use a Map for efficient de-duplication by message ID
+          messagesGroupedByDate[dateGroup.date] = {
+            date: dateGroup.date, // Store the date string
+            messagesMap: new Map(),
+          };
+        }
+        dateGroup.messages.forEach((message) => {
+          messagesGroupedByDate[dateGroup.date].messagesMap.set(
+            message.id,
+            message
+          );
+        });
+      });
+
+      // Reconstruct the final array of date groups with unique messages
+      const finalDateGroups = Object.values(messagesGroupedByDate).map(
+        (group) => ({
+          date: group.date,
+          // Convert Map values back to an array and sort messages by creation time
+          messages: Array.from(group.messagesMap.values()).sort(
+            (a, b) => new Date(a.created_at) - new Date(b.created_at)
+          ),
+        })
+      );
+
+      // Optional: Sort the date groups themselves if needed (e.g., chronologically)
+      // finalDateGroups.sort((a, b) => /* comparison logic based on date */);
+
+      // --- Return combined state update ---
+      return {
+        ...prevState,
+        roomsByCourses: updatedRoomsByCourses, // Include the updated course/room list
+        chats: {
+          ...prevState.chats,
+          // Update the structure to match RoomChatHistory: { results: [...] }
+          [roomId]: {
+            // Preserve potential other properties if RoomChatHistory expands later
+            ...(prevState.chats[roomId] || {}),
+            results: finalDateGroups,
+          },
+        },
+      };
+    });
+    !nextPage && (await readRoomMessages(roomId));
+    // Pass roomId correctly in the recursive call
+    if (responseData.next) getIndividualChats(responseData.next, roomId);
+  };
+
+  // read messages
+  const readRoomMessages = async (roomId) => {
+    return await request({
+      url: `/notify/v1/enterprise/chats/${roomId}/read_message/`,
+      account_id: selectedAccount.id,
+    });
+  };
+  useEffect(() => {
+    (async () => {
+      await getMessageRoomsByCourses();
+      await getIndividualChats(null, "5be9b48281ac4c2885d3b719654ed59d"); // only call to get individual chat
+    })();
+  }, [selectedAccount]);
+
+  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 };
+};
+
+export default useMessageKit;

package/src/hooks/messaging-kit/messageSlice.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  messageList: [],
+  chats: [],
+};
+
+const messageSlice = createSlice({
+  name: "message",
+  initialState,
+  reducers: {
+    setMessage: (state, action) => {
+      state.message = action.payload;
+    },
+  },
+});
+
+export const { setMessage } = messageSlice.actions;
+
+export default messageSlice.reducer;