l-min-components 1.6.1265 → 1.6.1266

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext } from "react";
+import React, { useState, useEffect, createContext, useMemo } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -42,13 +42,11 @@ const AppMainLayout = ({ children }) => {
   const [sideMenuLayout, setSideMenuLayout] = useState(true);
   const [defaultAcct, setDefaultAcct] = useState("");
   const [centerLayoutStyle, setCenterLayoutStyle] = useState({});
-  const [hideAffilicates, setHideAffilicates] = useState(false);
   const [affiliatesActive, setAffiliatesActive] = useState(false);
   const [accessToken, setAccessToken] = useState("");
   const [envType, setEnvType] = useState("");
   const [newNotifications, setNewNotifications] = useState([]);
   const [affiliateAccount, setAffiliateAccount] = useState(null);
-  const [deactivated, setDeactivated] = useState(true); // testing, until we get account setup
   const [gracePeriod, setGracePeriod] = useState(true); // test
   const [deviceWidth, setDeviceWidth] = useState(window.innerWidth);
   const [newLoadingForPostDefaultAccount, setNewLoadingForPostDefaultAccount] =
@@ -69,6 +67,34 @@ const AppMainLayout = ({ children }) => {
       );
   }, []);
 
+  // getting account name
+  // active account type
+  const activeAccountType = useMemo(
+    () => String(generalData?.selectedAccount?.type).toLowerCase(),
+    [generalData]
+  );
+  const accountName = useMemo(() => {
+    const { user: User, selectedAccount } = generalData;
+    if (!User || !selectedAccount) return "..."; // or an empty string
+    const defaultAccountName = String(User.first_name).concat(
+      " ",
+      User.last_name
+    );
+
+    switch (activeAccountType) {
+      case "enterprise":
+        return selectedAccount.metadata.organization_name ?? defaultAccountName;
+      case "developer":
+        return (
+          selectedAccount.metadata.organization_name ??
+          selectedAccount.metadata.org_name ??
+          defaultAccountName
+        );
+      default:
+        return defaultAccountName;
+    }
+  }, [generalData]);
+  console.log(activeAccountType, "activeAccountType");
   const {
     setDefaultAccount,
     handleSetDefaultAccount,
@@ -119,8 +145,8 @@ const AppMainLayout = ({ children }) => {
     if (setDefaultAccount?.data) {
       if (
         setDefaultAccount?.response?.status === 207 &&
-        (!window.location.host.includes("staging") &&
-          !window.location.host.includes("local"))
+        !window.location.host.includes("staging") &&
+        !window.location.host.includes("local")
       ) {
         window.location.href = "/auth/account-type";
       } else {
@@ -253,6 +279,7 @@ const AppMainLayout = ({ children }) => {
       value={{
         messageKit,
         affiliateAccount,
+        accountName,
         setRightComponent,
         setRightLayout,
         generalData,
@@ -271,8 +298,6 @@ const AppMainLayout = ({ children }) => {
         setSelectedCourseId,
         centerLayoutStyle,
         setCenterLayoutStyle,
-        // return true if instructor affiliates is Active
-        setHideAffilicates,
         affiliatesActive,
         accessToken,
         envType,
@@ -280,8 +305,7 @@ const AppMainLayout = ({ children }) => {
         setNewNotifications,
         notificationMarkReadData,
         handleGetNotificationMarkRead,
-      }}
-    >
+      }}>
       {/* display mobile layout on device width*/}
       {deviceWidth < 1200 ? (
         <MobileLayout findText={findText} />
@@ -293,8 +317,7 @@ const AppMainLayout = ({ children }) => {
           ) : (
             <Layout
               coming={coming}
-              hasLayoutBackgroundImage={hasLayoutBackgroundImage}
-            >
+              hasLayoutBackgroundImage={hasLayoutBackgroundImage}>
               <HeaderComponent
                 setNewNotifications={setNewNotifications}
                 findText={findText}

package/src/components/header/account-dropdown.jsx

@@ -132,8 +132,7 @@ const AccountDropdown = (props) => {
                             handleRedirectFunc(developerItem);
                           }, 1000);
                         }}
-                        key={idx}
-                      >
+                        key={idx}>
                         <div className="avatar-container">
                           <img
                             src={
@@ -179,8 +178,7 @@ const AccountDropdown = (props) => {
                             handleRedirectFunc(instructorItem);
                           }, 1000);
                         }}
-                        key={idx}
-                      >
+                        key={idx}>
                         <div className="avatar-container">
                           <img
                             src={
@@ -221,8 +219,7 @@ const AccountDropdown = (props) => {
                               handleRedirectFunc(enterpriseItem);
                             }, 1000);
                           }}
-                          key={idx}
-                        >
+                          key={idx}>
                           <div className="avatar-container">
                             <img
                               src={
@@ -266,8 +263,7 @@ const AccountDropdown = (props) => {
                             handleRedirectFunc(personalItem);
                           }, 1000);
                         }}
-                        key={idx}
-                      >
+                        key={idx}>
                         <div className="avatar-container">
                           <img
                             src={
@@ -301,8 +297,7 @@ const AccountDropdown = (props) => {
             onClick={() => {
               window.location.href = "/auth/account-type";
             }}
-            style={{ cursor: "pointer" }}
-          >
+            style={{ cursor: "pointer" }}>
             <AddIcon /> {props.findText("Add account")}
           </button>
         </AccountDropdownFooter>

package/src/components/header/getHeaderDetails.js

@@ -1,4 +1,5 @@
 import useAxios from "axios-hooks";
+import { useEffect } from "react";
 
 const useHeader = () => {
   // get user details
@@ -332,7 +333,6 @@ const useHeader = () => {
     }
   };
 
-
   const [{ ...getTotalMessagesCountData }, getTotalMessagesCount] = useAxios(
     {
       method: "GET",
@@ -369,6 +369,11 @@ const useHeader = () => {
     }
   };
 
+  //defaults
+  // get user info
+  useEffect(() => {
+    handleGetUserDetails();
+  }, []);
 
   return {
     handleGetUserDetails,

package/src/components/header/index.jsx

@@ -53,6 +53,7 @@ const HeaderComponent = (props) => {
   const [languageDropdown, setLanguageDropdown] = useState();
   const [isOpen, setIsOpen] = useState(false);
   // const [searchResultOpen, setSearchResultOpen] = useState(false);
+  // in general data find user info and replace where user details is being used
   const {
     handleGetUserAccountsDetail,
     handleGetUserDetails,
@@ -74,7 +75,7 @@ const HeaderComponent = (props) => {
     handleSetDefaultAccount,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData, generalData, notificationMarkReadData } =
+  const { setGeneralData, generalData, notificationMarkReadData, accountName } =
     useContext(OutletContext);
   const [accountType, setAccountType] = useState("");
   const currentAccountType = props?.selectedAccount?.type
@@ -420,8 +421,7 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}
-      >
+        }}>
         <li>
           <a className={isHomePage() ? "active" : ""}>
             {getNavLinkIcon()} {props.findText(getNavLinkLabel())}
@@ -440,8 +440,7 @@ const HeaderComponent = (props) => {
               className={
                 window.location.pathname.includes("settings") ? "active" : ""
               }
-              style={{ cursor: "pointer" }}
-            >
+              style={{ cursor: "pointer" }}>
               <SettingIcon /> {props.findText("Settings")}
             </a>
           </li>
@@ -474,8 +473,7 @@ const HeaderComponent = (props) => {
                   ? "disabled"
                   : ""
               }
-              style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}
-            >
+              style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}>
               {unreadNotificationData?.data?.count > 0 ? (
                 <NotificationIcon />
               ) : (
@@ -509,8 +507,7 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}
-      >
+        }}>
         {/* {(!isDeveloper || !window.location.hostname.includes("coming")) && ( // when developer and on staging, don't show
           <SearchInputGroup>
             <SearchIcon />
@@ -539,8 +536,7 @@ const HeaderComponent = (props) => {
             onClick={() => {
               setLanguageDropdown(!languageDropdown);
               setIsOpen();
-            }}
-          >
+            }}>
             <img src={selectedLanguageData[value] || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
@@ -562,8 +558,7 @@ const HeaderComponent = (props) => {
               setIsOpen(!isOpen);
               setLanguageDropdown();
             }}
-            ref={secondContainerRef}
-          >
+            ref={secondContainerRef}>
             <div className="user-img-container">
               <img
                 src={props?.selectedAccount?.profile_photo?.url || avatar}
@@ -571,10 +566,7 @@ const HeaderComponent = (props) => {
               />
             </div>
             <div className="user-info-container">
-              <h5 style={{ textTransform: "capitalize" }}>
-                {props?.selectedAccount?.metadata?.organization_name ||
-                  props?.selectedAccount?.display_name}
-              </h5>
+              <h5 style={{ textTransform: "capitalize" }}>{accountName}</h5>
               <h6 style={{ textTransform: "capitalize" }}>
                 {props?.selectedAccount?.type?.toLowerCase()}
               </h6>

package/src/components/instructorAccountSwitcher/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 // import ExpiryModal from "./components/expiry modal";
 import Search from "../searchBar";
@@ -9,6 +9,7 @@ import useHeader from "../header/getHeaderDetails";
 import OutsideAlerter from "../outsideEventChecker";
 import FullPageLoader from "../fullPageLoader";
 import deleteCookies from "./deleteCookies";
+import { OutletContext } from "..";
 
 const InstructorAccountSwitcher = ({ generalData, onChange }) => {
   // const [expiryFlow, setExpiryFlow] = useState();
@@ -32,12 +33,14 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
   }, [generalData?.selectedAccount, search]);
 
   const dropdownList = getAllAffiliateData?.data?.results?.map((item) => {
-    const image = item?.profile_photo?.url || item?.profile_photo[1][1];
-    return { name: item?.display_name, image, id: item?.id };
+    const image = item?.profile_photo?.url;
+    return {
+      name: item?.metadata.organization_name ?? "...",
+      image,
+      id: item?.id,
+    };
   });
 
-  console.log(dropdownList, getAllAffiliateData);
-
   const [dropdown, setDropdown] = useState(false);
 
   const getCookie = () => {
@@ -111,7 +114,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
           const value = res?.data;
           const image = value?.profile_photo?.url;
           setSelectedValue(() => ({
-            name: value?.display_name,
+            name: value?.metadata.organization_name,
             image,
             id: value?.id,
           }));
@@ -130,6 +133,8 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
     }
   };
 
+  const { accountName } = useContext(OutletContext);
+  console.log(selectedValue, "selected..");
   return getAllAffiliateData?.data?.results?.length > 0 && !search ? (
     <>
       {(setDefaultAffiliateData?.loading ||
@@ -160,24 +165,20 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
       )} */}
       <Container className="instructor_account_switcher">
         <div className="left">
-          {switchValue !== "affiliates" && (
-            <p>{generalData?.selectedAccount?.display_name}</p>
-          )}
+          {switchValue !== "affiliates" && <p>{accountName}</p>}
           {switchValue === "affiliates" && (
             <AffiliatesDropDown>
               {!selectedValue ? (
                 <div
                   className="placeholder"
-                  onClick={() => setDropdown(!dropdown)}
-                >
+                  onClick={() => setDropdown(!dropdown)}>
                   <p>Select affiliate</p>
                   <ArrowDown />
                 </div>
               ) : (
                 <div
                   className="selected"
-                  onClick={() => setDropdown(!dropdown)}
-                >
+                  onClick={() => setDropdown(!dropdown)}>
                   <div>
                     <img src={selectedValue?.image} alt="" />
                     <p>{selectedValue?.name}</p>
@@ -201,8 +202,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
                           key={item?.id}
                           onClick={() => {
                             handleSelection(item);
-                          }}
-                        >
+                          }}>
                           <div className="left">
                             <img src={item?.image} alt="" />
                             <p>{item?.name}</p>
@@ -220,15 +220,13 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
         <div className="btn__wrapper">
           <button
             className={switchValue !== "affiliates" ? "active" : ""}
-            onClick={() => handleSwitch(1)}
-          >
+            onClick={() => handleSwitch(1)}>
             <span>My Account</span>
             <span className="circle"></span>
           </button>
           <button
             className={switchValue === "affiliates" ? "active" : ""}
-            onClick={() => handleSwitch(2)}
-          >
+            onClick={() => handleSwitch(2)}>
             <span>Affiliates</span>
             <span className="circle"></span>
           </button>

package/src/components/sideBar/userCard/index.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import {
   UserCardContainer,
@@ -16,7 +16,7 @@ const UserCard = ({ user, isOpen, findText }) => {
   const { handleGetUserDetails, userDetails, handleSetDefaultAccount } =
     useHeader();
   const [organizationName, setOrganizationName] = useState();
-  const { generalData } = useContext(OutletContext);
+  const { generalData, accountName } = useContext(OutletContext);
 
   useEffect(() => {
     handleGetUserDetails();
@@ -59,7 +59,7 @@ const UserCard = ({ user, isOpen, findText }) => {
       }
     }
   }, [generalData]);
-  // console.log(generalData, "data");
+  console.log(generalData, "data...");
 
   return (
     <UserCardContainer isOpen={isOpen}>
@@ -94,20 +94,16 @@ const UserCard = ({ user, isOpen, findText }) => {
               if (window.location.pathname.includes("instructor")) {
                 window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor/profile`;
               }
-            }}
-          >
+            }}>
             <UserName>{findText("Hello")}</UserName>
             <Handle
               style={{
                 textTransform: "capitalize",
                 fontWeight: 700,
                 fontSize: 15,
-              }}
-            >{`${
-              organizationName
-                ? organizationName
-                : generalData?.selectedAccount?.display_name ?? ""
-            }.`}</Handle>
+              }}>
+              {accountName}
+            </Handle>
           </UserDetail>
         </>
       )}

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

@@ -326,6 +326,9 @@ const useMessageKit = (/*affiliatesActive*/) => {
     isProcessingQueue: false,
   });
 
+  // Ref for synchronous queue processing lock
+  const isCurrentlyProcessingRef = useRef(false);
+
   // State for rooms that should be automatically marked as read
   const [autoReadRoomIds, setAutoReadRoomIds] = useState(() => new Set());
 
@@ -828,28 +831,45 @@ const useMessageKit = (/*affiliatesActive*/) => {
     [setState]
   ); // Dependency: setState
 
-  // Effect to process the message queue sequentially
+  // Effect to process the message queue sequentially using a Ref lock
   useEffect(() => {
-    // Exit if already processing or queue is empty
-    if (state.isProcessingQueue || state.messageQueue.length === 0) {
+    // **Synchronous Check + Claim:**
+    // Use the ref for an immediate check. If already processing, bail out.
+    // Also check if the queue has items.
+    if (isCurrentlyProcessingRef.current || state.messageQueue.length === 0) {
       return;
     }
 
-    // --- Start Processing ---
+    // **Claim the processing slot synchronously**
+    isCurrentlyProcessingRef.current = true;
+
+    // Set the state flag as well (useful for potential UI indicators or triggering re-renders upon completion)
+    // Note: This state update is still async, but the ref prevents the race condition.
     setState((prevState) => ({ ...prevState, isProcessingQueue: true }));
 
-    // Get the next message from the front of the queue
+    // Get the next message details from the front of the queue.
+    // Reading state here is fine, as we've already claimed the slot.
     const messageToSend = state.messageQueue[0];
+
+    // Safety check: Ensure messageToSend exists (queue might have emptied)
+    if (!messageToSend) {
+      isCurrentlyProcessingRef.current = false; // Release the claim
+      setState((prevState) => ({ ...prevState, isProcessingQueue: false }));
+      console.warn(
+        "Queue Processor: Attempted to process but queue was empty."
+      );
+      return; // Nothing to process
+    }
+
     const { tempId, courseId, accountId, text, media } = messageToSend;
-    const pendingKey = `pending_${courseId}_${accountId}`; // Reconstruct key
+    const pendingKey = `pending_${courseId}_${accountId}`;
 
-    // Define the async task for sending this message
+    // Define the async task for sending this specific message.
     const processMessage = async () => {
       try {
         // --- Make API Call ---
         let response;
         // TODO: Handle media preparation (e.g., check if 'media' is File, create FormData)
-        // This example assumes 'media' is directly usable or requires minimal processing
         const requestData = { text, media };
         const requestParams = {
           account_id: accountId,
@@ -857,7 +877,6 @@ const useMessageKit = (/*affiliatesActive*/) => {
           _account: selectedAccount.id,
         };
 
-        // (Use the same API call logic as before)
         if (selectedAccount.type.toLowerCase() === "enterprise") {
           response = await request({
             url: "/notify/v1/enterprise/chats/",
@@ -916,11 +935,23 @@ const useMessageKit = (/*affiliatesActive*/) => {
           is_delivered: sentMessageData.is_delivered,
           created_at: sentMessageData.created_at,
           user_message: sentMessageData.user_message,
-          date: getLocalDateString(sentMessageData.created_at), // Still useful for basic date info if needed
+          date: getLocalDateString(sentMessageData.created_at), // Use existing helper
         };
 
         // Update state atomically after success
         setState((prevState) => {
+          // Safety check: Ensure the message we processed is still the first one
+          if (
+            prevState.messageQueue.length === 0 ||
+            prevState.messageQueue[0].tempId !== tempId
+          ) {
+            console.warn(
+              `Queue Processor: Mismatch processing successful message ${tempId}. Queue changed unexpectedly.`
+            );
+            // Don't modify state if the queue front doesn't match
+            return prevState;
+          }
+
           // 1. Remove optimistic message
           let updatedOptimisticMessages = { ...prevState.optimisticMessages };
           if (updatedOptimisticMessages[pendingKey]) {
@@ -965,12 +996,11 @@ const useMessageKit = (/*affiliatesActive*/) => {
               date: messageDateLabel,
               messages: [newChatMessage],
             });
-            // Sort groups using helper function
             updatedChatHistory.sort(
               (a, b) =>
                 getSortableTimestampForGroup(b) -
                 getSortableTimestampForGroup(a)
-            );
+            ); // Use helper
           }
           updatedChats[confirmedRoomId] = updatedChatHistory;
 
@@ -982,7 +1012,6 @@ const useMessageKit = (/*affiliatesActive*/) => {
             const roomIdx = cg.rooms.findIndex((r) => r.id === confirmedRoomId);
             if (roomIdx !== -1) {
               roomExists = true;
-              // Create a new room object to ensure immutability
               const updatedRoom = {
                 ...cg.rooms[roomIdx],
                 last_message: {
@@ -992,22 +1021,22 @@ const useMessageKit = (/*affiliatesActive*/) => {
                   created_at: newChatMessage.created_at,
                 },
               };
-              // Create a new rooms array for the course group
               const updatedRooms = [...cg.rooms];
               updatedRooms[roomIdx] = updatedRoom;
-              // Return a new course group object
               return { ...cg, rooms: updatedRooms };
             }
             return cg;
           });
-          // Trigger refetch if room metadata wasn't found (handled outside setState)
-          if (!roomExists) {
-            setTimeout(() => getMessageRoomsByCourses(null, true), 0);
-          }
 
           // 4. Remove processed item from queue (immutable update)
           const updatedQueue = prevState.messageQueue.slice(1);
 
+          // Trigger refetch if room metadata wasn't found (handled outside setState)
+          if (!roomExists && typeof getMessageRoomsByCourses === "function") {
+            // Check if function exists
+            setTimeout(() => getMessageRoomsByCourses(null, true), 0);
+          }
+
           // Return the combined state updates
           return {
             ...prevState,
@@ -1015,7 +1044,7 @@ const useMessageKit = (/*affiliatesActive*/) => {
             chats: updatedChats,
             roomsByCourses: updatedRoomsByCourses,
             messageQueue: updatedQueue,
-            // isProcessingQueue reset happens in 'finally' block
+            isProcessingQueue: true, // Keep true until finally block resets it below
           };
         });
       } catch (error) {
@@ -1025,25 +1054,33 @@ const useMessageKit = (/*affiliatesActive*/) => {
           error
         );
         setState((prevState) => {
+          // Safety check for queue consistency
+          if (
+            prevState.messageQueue.length === 0 ||
+            prevState.messageQueue[0].tempId !== tempId
+          ) {
+            console.warn(
+              `Queue Processor: Mismatch processing failed message ${tempId}. Queue changed unexpectedly.`
+            );
+            return prevState;
+          }
+
           // 1. Update optimistic message status to 'failed'
           let updatedOptimisticMessages = { ...prevState.optimisticMessages };
           if (updatedOptimisticMessages[pendingKey]) {
             const messageIndex = updatedOptimisticMessages[
               pendingKey
             ].findIndex((msg) => msg.tempId === tempId);
-            // Only update if found and still pending (might have been handled differently elsewhere?)
             if (
               messageIndex !== -1 &&
               updatedOptimisticMessages[pendingKey][messageIndex].status ===
                 "pending"
             ) {
-              // Create new message object for immutability
               const failedMessage = {
                 ...updatedOptimisticMessages[pendingKey][messageIndex],
                 status: "failed",
                 error: error?.message || "Unknown error",
               };
-              // Create new array for the pending key
               const updatedPendingList = [
                 ...updatedOptimisticMessages[pendingKey],
               ];
@@ -1062,33 +1099,39 @@ const useMessageKit = (/*affiliatesActive*/) => {
 
           // 2. Remove failed item from queue (immutable update)
           const updatedQueue = prevState.messageQueue.slice(1);
-
+          // Return the combined state updates
           return {
             ...prevState,
             optimisticMessages: updatedOptimisticMessages,
             messageQueue: updatedQueue,
-            // isProcessingQueue reset happens in 'finally' block
+            isProcessingQueue: true, // Keep true until finally block resets it below
           };
         });
       } finally {
         // --- Finish Processing ---
-        // Always ensure processing flag is reset, even on error
+        // **Crucial:** Release the synchronous lock first.
+        isCurrentlyProcessingRef.current = false;
+        // Then update the state flag. This state update will trigger a re-render.
+        // If the queue still has items, the effect will run again, see the ref is false,
+        // claim the lock, and start processing the next item.
         setState((prevState) => ({ ...prevState, isProcessingQueue: false }));
       }
     };
 
-    // Execute the async sending logic
+    // Execute the async sending logic for the current item.
     processMessage();
 
-    // Dependencies for the effect: react when queue or processing status changes
-    // Also depend on selectedAccount and affiliateAccount for API calls within the processor
+    // Dependencies:
+    // - `state.isProcessingQueue`: Triggers check when processing finishes.
+    // - `state.messageQueue`: Triggers check when queue content changes.
+    // - `request`, `selectedAccount`, `affiliateAccount`, `getMessageRoomsByCourses`:
+    //   Required by exhaustive-deps for use within the effect's scope.
   }, [
     state.isProcessingQueue,
     state.messageQueue,
     // request,
     selectedAccount,
     affiliateAccount,
-    // getMessageRoomsByCourses,
   ]);
 
   /**