l-min-components 1.0.656 → 1.0.664

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.656",
+  "version": "1.0.664",
   "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,34 +264,47 @@ 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 || "";
- 
+
+  // websocket for all notification account
+  const websocket = new WebSocket(
+    `wss://${socketUrl}?account=${account_id}&authorization=${token}`
+  );
+
   useEffect(() => {
-    if(!socket?.current){
-      socket.current = new WebSocket(
-        `wss://${socketUrl}?account=${account_id}&authorization=${token}`
-      )
-
-      socket.current.onopen = () => {
-        console.log("websocket connection established");
-      };
-      socket.current.onmessage = (event) => {
-        const response = JSON?.parse(event?.data);
-        console.log(response)
-        if(response?.data){
-          handleGetUnreadNotification();
+    websocket.onopen = () => {
+      //check if socket is connected
+      console.log("websocket connection established");
+    };
+
+    websocket.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      console.log("websocket data", data);
+    };
+
+    const handler = (event) => {
+      if (event?.data) {
+        const data = JSON.parse(event?.data); //check for incoming message from socket
+        if (data.event === "new.notification.result") {
+          if (data.data) {
+            console.log(data)
+            handleGetUnreadNotification();
+            handleGeneralNotificationCount();
+          }
         }
-        
-      };
 
-    }
+      }
+    };
+    websocket.addEventListener("message", handler, { passive: true });
 
     return () => {
+      websocket.removeEventListener("message", handler);
       console.log("websocket closed");
     };
-   
-  }, [socket]);
+  }, [websocket]);
+
 
   return (
     <Navbar>