l-min-components 1.0.650 → 1.0.655

package/package.json

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

package/src/components/header/assets/svg/notification.jsx

@@ -30,3 +30,33 @@ export const NotificationIcon = ({ width, height, fill }) => (
     <circle cx="17.1797" cy="5" r="4.5" fill="#F39B33" stroke="white" />
   </svg>
 );
+export const NotificationEmptyIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "23"}
+    height={height || "23"}
+    viewBox="0 0 23 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.891 3.59375C7.94042 3.59375 5.54254 5.99163 5.54254 8.94218V11.5183C5.54254 12.0621 5.31077 12.8911 5.03444 13.3546L4.00932 15.0572C3.37642 16.1091 3.81321 17.2768 4.97204 17.669C8.814 18.9527 12.959 18.9527 16.801 17.669C17.8796 17.3125 18.352 16.0378 17.7637 15.0572L16.7386 13.3546C16.4712 12.8911 16.2394 12.0621 16.2394 11.5183V8.94218C16.2394 6.00055 13.8326 3.59375 10.891 3.59375Z"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12.5404 3.85266C12.2641 3.77244 11.9788 3.71004 11.6846 3.67438C10.8289 3.56741 10.0088 3.62981 9.24219 3.85266C9.5007 3.19302 10.1425 2.72949 10.8913 2.72949C11.6401 2.72949 12.2819 3.19302 12.5404 3.85266Z"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.5672 17.9902C13.5672 19.4611 12.3638 20.6645 10.893 20.6645C10.162 20.6645 9.48455 20.3614 9.00319 19.88C8.52183 19.3987 8.21875 18.7212 8.21875 17.9902"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+    />
+  </svg>
+);

package/src/components/header/getCookies.js

@@ -0,0 +1,19 @@
+export function getCookie(name) {
+    // Split cookie string and get all individual name=value pairs in an array
+    var cookieArr = document.cookie.split(";");
+  
+    // Loop through the array elements
+    for (var i = 0; i < cookieArr.length; i++) {
+      var cookiePair = cookieArr[i].split("=");
+  
+      /* Removing whitespace at the beginning of the cookie name
+          and compare it with the given string */
+      if (name == cookiePair[0].trim()) {
+        // Decode the cookie value and return
+        return decodeURIComponent(cookiePair[1]);
+      }
+    }
+  
+    // Return null if not found
+    return null;
+  }

package/src/components/header/getHeaderDetails.js

@@ -68,6 +68,27 @@ const useHeader = () => {
       console.log(err);
     }
   };
+  const [{ ...unreadNotificationData }, getUnreadNotification] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetUnreadNotification = async (read = false) => {
+    try {
+      await getUnreadNotification({
+        url: `/notify/v1/notifications/`,
+        params: {
+          read: read,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
   return {
     handleGetUserDetails,
@@ -78,6 +99,8 @@ const useHeader = () => {
     getDefaultAccount,
     handleSetDefaultAccount,
     setDefaultAccount,
+    unreadNotificationData,
+    handleGetUnreadNotification
   };
 };
 export default useHeader;

package/src/components/header/index.jsx

@@ -6,7 +6,7 @@ import { PeopleIcon } from "./assets/svg/people";
 import { MessageIcon } from "./assets/svg/message";
 import { SettingIcon } from "./assets/svg/setting";
 import { SearchIcon } from "./assets/svg/search";
-import { NotificationIcon } from "./assets/svg/notification";
+import { NotificationEmptyIcon, NotificationIcon } from "./assets/svg/notification";
 import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import AccountDropdown from "./account-dropdown";
 import avatar from "./assets/images/avatar.png";
@@ -24,6 +24,7 @@ import { OutletContext } from "..";
 import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import LanguageDropdown from "./languageDropdown";
+import { getCookie } from "./getCookies";
 /**
  * @param {{
  *  type: string,
@@ -48,6 +49,8 @@ const HeaderComponent = (props) => {
     userDetails,
     getDefaultAccount,
     handleGetDefaultAccount,
+    unreadNotificationData,
+    handleGetUnreadNotification
   } = useHeader();
   const { pathname } = useLocation();
   const { setGeneralData, generalData } = useContext(OutletContext);
@@ -58,6 +61,7 @@ const HeaderComponent = (props) => {
     handleGetUserAccountsDetail();
     handleGetUserDetails();
     handleGetDefaultAccount();
+    handleGetUnreadNotification();
   }, []);
   useEffect(() => {
     if (userAccountsDetail?.data) {
@@ -237,6 +241,40 @@ const HeaderComponent = (props) => {
     return "Learning";
   };
 
+  // websocket for notifications initialization
+  const [socketUrl, setSocketUrl] = useState(
+    "dev-117782726-api.learngual.com/notify/v1/ws/connect/"
+  );
+  const socket = useRef()
+  const token = getCookie("access");
+  const account_id = generalData?.defaultAccount?.id || "";
+ 
+  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();
+        }
+        
+      };
+
+    }
+
+    return () => {
+      console.log("websocket closed");
+    };
+   
+  }, [socket]);
+
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />
@@ -273,11 +311,22 @@ const HeaderComponent = (props) => {
             <SettingIcon /> Settings
           </a>
         </li>
-        {/* <li>
-          <a href="#">
-            <NotificationIcon /> Notifications
+        <li>
+          <a
+            href="https://developer-staging-01.learngual.com/notifications/"
+            className={
+              window.location.pathname.includes("notifications") ? "active" : ""
+            }
+            style={{ cursor: "pointer" }}
+          >
+            {unreadNotificationData?.data?.count > 0 ? (
+              <NotificationIcon />
+            ) : (
+              <NotificationEmptyIcon />
+            )}
+            Notifications
           </a>
-        </li> */}
+        </li>
       </Nav>
 
       <NavGroup