l-min-components 1.7.1294 → 1.7.1296

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -133,8 +133,7 @@ const AppMainLayout = ({ children }) => {
     user,
     userDetails,
   } = useHeader({ default: true });
-  // get current default account and store in cookie (from api)
-
+  // get current default account and store in cookie (from api);
   useEffect(() => {
     if (getDefaultAccount?.data) {
       const date = new Date();
@@ -298,7 +297,7 @@ const AppMainLayout = ({ children }) => {
     setIsTranslationsLoading,
   } = useTranslation(wordBank);
 
-  const messageKit = useMessageKit({ affiliateAccount }); // useMessageKit
+  const messageKit = useMessageKit(); // useMessageKit
 
   return (
     <OutletContext.Provider

package/src/components/instructorAccountSwitcher/index.jsx

@@ -98,7 +98,6 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
   };
 
   const { accountName, planState } = useContext(OutletContext);
-
   // handle if account does not have subscription but is an affiliate
   const prioritizedAffiliateId = useMemo(() => {
     let prioritizedAffiliateId = null;
@@ -112,6 +111,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
     ) {
       // Priority 2: If no cookie, no subscription, and list exists...
       // Assign the ID of the *first* affiliate directly from the results array
+      setCookie(getAllAffiliateData.data.results[0]?.id);
       prioritizedAffiliateId = getAllAffiliateData.data.results[0]?.id; // Optional chaining on 'id'
     }
     return prioritizedAffiliateId;
@@ -240,7 +240,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
         </div>
         {
           <div className="btn__wrapper">
-            {!!!prioritizedAffiliateId && (
+            {(planState === "ACTIVE" || planState === "GRACE PERIOD") && (
               <button
                 className={switchValue !== "affiliates" ? "active" : ""}
                 onClick={() => handleSwitch(1)}>

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

@@ -1,6 +1,7 @@
 import useAxios from "axios-hooks";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import sound from "./new-notification-7-210334.mp3";
+import { cookieGrabber, useCookiePolling } from "../utils/cookiePolling";
 
 /**
  * Represents the details of the last message in a chat room overview.
@@ -236,38 +237,29 @@ import sound from "./new-notification-7-210334.mp3";
  * @property {any | null} media - The media data (e.g., File object, FormData details). Needs proper handling before API call.
  */
 
-const useMessageKit = ({ affiliateAccount: AffiliateAccount }) => {
-  const cookieGrabber = (key = "") => {
-    const cookies = document.cookie;
-    const string = cookies.split(";").find((cookie) => {
-      cookie = cookie.trim();
-      if (cookie.startsWith(key.trim() + "=")) return true;
-    });
-
-    if (!string) return "";
-    return string.split("=")[1].trim();
+const useMessageKit = () => {
+  const selectedAccountId = useCookiePolling("defaultAccountID");
+  const defaultAccountType = useCookiePolling("defaultAccountType");
+  const selectedAccount = {
+    id: selectedAccountId,
+    type: defaultAccountType,
   };
-  const selectedAccount = useMemo(
-    () => ({
-      id: cookieGrabber("defaultAccountID"),
-      type: cookieGrabber("defaultAccountType"),
-    }),
-    []
-  );
+  const token = useCookiePolling("access");
   const buildSocketUrl = useCallback(() => {
     const baseUrl =
       window.location.hostname.includes("staging") ||
       window.location.hostname.includes("localhost")
         ? "https://dev-117782726-api.learngual.com"
         : "https://api.learngual.com";
-    const token = cookieGrabber("access");
+
     return (
       baseUrl.replace("http", "ws") +
       `/notify/v1/ws/connect/?authorization=${token}&_account=${selectedAccount.id}`
     );
   }, []);
 
-  const affiliateAccount = cookieGrabber("affiliateAccount");
+  const affiliateAccount = useCookiePolling("affiliateAccount", 1000);
+  console.log("changed", affiliateAccount);
   // console.log(affiliateAccount, affiliatesActive, "affiliate");
   // get account type
   const [, request] = useAxios(
@@ -1441,6 +1433,7 @@ const useMessageKit = ({ affiliateAccount: AffiliateAccount }) => {
   // Initial data fetch effect
   useEffect(() => {
     (async () => {
+      if (!selectedAccountId || !defaultAccountType || !token) return;
       await getMessageRoomsByCourses();
       // reportChat({
       //   reasons: ["Verbal harassment"],
@@ -1462,7 +1455,7 @@ const useMessageKit = ({ affiliateAccount: AffiliateAccount }) => {
       //   accountId: "24dbaeede1",
       // });
     })();
-  }, [AffiliateAccount]); // Rerun when selectedAccount changes
+  }, [affiliateAccount, token, defaultAccountType, selectedAccountId]); // Rerun when selectedAccount changes
   // console.log(
   //   getMessagesForRoom("5be9b48281ac4c2885d3b719654ed59d", "878", "24dbaeede1"),
   //   "hold versions"

package/src/hooks/utils/cookiePolling.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+
+//helper function to get cookie
+export const cookieGrabber = (key = "") => {
+  const cookies = document.cookie;
+  const string = cookies.split(";").find((cookie) => {
+    cookie = cookie.trim();
+    if (cookie.startsWith(key.trim() + "=")) return true;
+  });
+
+  if (!string) return "";
+  return string.split("=")[1].trim();
+};
+
+/**
+ * Custom hook to poll a specific cookie and update state on change.
+ *
+ * @param {string} cookieName The name of the cookie to monitor.
+ * @param {number} intervalMs The polling interval in milliseconds (e.g., 1000 for 1 second).
+ * @returns {string | null} The current value of the cookie.
+ */
+export function useCookiePolling(cookieName, intervalMs = 500) {
+  const [cookieValue, setCookieValue] = useState(() =>
+    cookieGrabber(cookieName)
+  );
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const currentValue = cookieGrabber(cookieName);
+      // Update state only if the value has actually changed
+      if (currentValue !== cookieValue) {
+        console.log(
+          `Cookie '${cookieName}' changed from '${cookieValue}' to '${currentValue}'`
+        );
+        setCookieValue(currentValue);
+      }
+    }, intervalMs);
+
+    // Cleanup: clear the interval when the component unmounts or dependencies change
+    return () => clearInterval(intervalId);
+  }, [cookieName, intervalMs, cookieValue]); // Re-run effect if cookieName or interval changes, or if cookieValue was updated
+
+  return cookieValue;
+}