l-min-components 1.0.656 → 1.0.660

package/package.json

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

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

@@ -24,7 +24,11 @@ const AccountDropdown = (props) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {}, [pathname]);
-  const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
+  const {
+    setDefaultAccount,
+    handleSetDefaultAccount,
+  } = useHeader();
+
   const { envType } = useContext(OutletContext);
 
   useEffect(() => {
@@ -145,7 +149,9 @@ const AccountDropdown = (props) => {
                       {developerItem?.metadata?.organization_name ||
                         props.accountName}
                     </h1>
-                    {/* <span>{props.notificationCount} </span> */}
+                    {developerItem?.notification_count > 0 && (
+                      <span>{developerItem?.notification_count}</span>
+                    )}
                   </div>
                 </div>
               ))}
@@ -186,7 +192,9 @@ const AccountDropdown = (props) => {
                       {" "}
                       {instructorItem?.display_name || props.accountName}
                     </h1>
-                    <span>{props.notificationCount} </span>
+                    {instructorItem?.notification_count > 0 && (
+                      <span>{instructorItem?.notification_count} </span>
+                    )}
                   </div>
                 </div>
               ))}
@@ -222,7 +230,9 @@ const AccountDropdown = (props) => {
                       {" "}
                       {enterpriseItem?.display_name || props.accountName}
                     </h1>
-                    <span>{props.notificationCount} </span>
+                    {enterpriseItem?.notification_count > 0 && (
+                      <span>{enterpriseItem?.notification_count} </span>
+                    )}
                   </div>
                 </div>
               ))}
@@ -259,7 +269,9 @@ const AccountDropdown = (props) => {
                       {" "}
                       {personalItem?.display_name || props.accountName}
                     </h1>
-                    <span>{props.notificationCount} </span>
+                    {personalItem?.notification_count > 0 && (
+                      <span>{personalItem?.notification_count} </span>
+                    )}
                   </div>
                 </div>
               ))}

package/src/components/header/getHeaderDetails.js

@@ -90,6 +90,27 @@ const useHeader = () => {
     }
   };
 
+  
+  // general notification count
+const [{ ...generalNotificationCountData }, generalNotificationCount] = useAxios(
+  {
+    method: "GET",
+  },
+  {
+    manual: true,
+  }
+);
+
+const handleGeneralNotificationCount= async () => {
+  try {
+    await generalNotificationCount({
+      url: `/notify/v1/notifications/general_notification_count/`,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
   return {
     handleGetUserDetails,
     userDetails,
@@ -100,7 +121,9 @@ const useHeader = () => {
     handleSetDefaultAccount,
     setDefaultAccount,
     unreadNotificationData,
-    handleGetUnreadNotification
+    handleGetUnreadNotification,
+    generalNotificationCountData,
+    handleGeneralNotificationCount
   };
 };
 export default useHeader;

package/src/components/header/index.jsx

@@ -25,6 +25,7 @@ import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import LanguageDropdown from "./languageDropdown";
 import { getCookie } from "./getCookies";
+import { data } from "../GraphMap/data";
 /**
  * @param {{
  *  type: string,
@@ -50,7 +51,9 @@ const HeaderComponent = (props) => {
     getDefaultAccount,
     handleGetDefaultAccount,
     unreadNotificationData,
-    handleGetUnreadNotification
+    handleGetUnreadNotification,
+    generalNotificationCountData,
+    handleGeneralNotificationCount,
   } = useHeader();
   const { pathname } = useLocation();
   const { setGeneralData, generalData } = useContext(OutletContext);
@@ -63,6 +66,21 @@ const HeaderComponent = (props) => {
     handleGetDefaultAccount();
     handleGetUnreadNotification();
   }, []);
+
+  // Merge the notification_count into the results data using find
+
+  const allUserAccountsDetail = userAccountsDetail?.data?.results.map(item => {
+    const detail = generalNotificationCountData?.data?.detail?.find(detailItem => detailItem?.account_id === item?.id);
+    return {
+      ...item,
+      notification_count: detail ? detail?.notification_count : 0
+    };
+  });
+
+  useEffect(() => {
+    handleGeneralNotificationCount(); 
+  }, [])
+
   useEffect(() => {
     if (userAccountsDetail?.data) {
       setGeneralData((generalData) => ({
@@ -90,7 +108,7 @@ const HeaderComponent = (props) => {
       let instructorArray = [];
       let enterpriseArray = [];
 
-      userAccountsDetail?.data?.results?.map((accountItem, idx) => {
+      allUserAccountsDetail?.map((accountItem, idx) => {
         if (
           accountItem?.type === "PERSONAL" &&
           !personalAccountData?.includes(accountItem)
@@ -139,7 +157,7 @@ const HeaderComponent = (props) => {
         setSelectedAccount(enterpriseArray[0]);
       }
     }
-  }, [userAccountsDetail?.data]);
+  }, [userAccountsDetail?.data, generalNotificationCountData?.response]);
 
   // update general data when selected acct changes
 
@@ -246,6 +264,7 @@ const HeaderComponent = (props) => {
     "dev-117782726-api.learngual.com/notify/v1/ws/connect/"
   );
   const socket = useRef()
+  const generalSocket = useRef()
   const token = getCookie("access");
   const account_id = generalData?.defaultAccount?.id || "";
  
@@ -275,6 +294,35 @@ const HeaderComponent = (props) => {
    
   }, [socket]);
 
+
+  // websocket for all notification account
+  useEffect(() => {
+    if(!generalSocket?.current){
+      generalSocket.current = new WebSocket(
+        `wss://${socketUrl}?authorization=${token}`
+      )
+
+      generalSocket.current.onopen = () => {
+        console.log("General websocket connection established");
+      };
+      generalSocket.current.onmessage = (event) => {
+        const response = JSON?.parse(event?.data);
+        console.log(response)
+        if(response?.data){
+          handleGeneralNotificationCount();
+        }
+        
+      };
+
+    }
+
+    return () => {
+      console.log("General websocket closed");
+    };
+   
+  }, [generalSocket]);
+
+
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />