notification count in progress

Author: Kshitij Raj

package.json

@@ -30,7 +30,7 @@
     "styled-components": "^5.3.9",
     "react-timeago": "^7.2.0",
     "socket.io-client": "^4.7.2",
-    "@kshitijraj09/sharedlib_mf": "1.0.6"
+    "@kshitijraj09/sharedlib_mf": "1.0.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",

src/components/AuthRoute/SocketInit.tsx renamed to src/Socket/SocketInit.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect } from "react";
 import { Socket, io } from "socket.io-client";
-import { getUserInfoFromStorage } from "../../util";
+import { getUserInfoFromStorage } from "../util";
+import { WindowEvents } from "Sharedlib/eventservice";
 
 declare global {
    interface Window {
@@ -12,7 +13,7 @@ const SOCKETIOENDPOINT = process.env.APIBASEURL;
 let socket: Socket = io(SOCKETIOENDPOINT, {
    autoConnect: false
 });
-
+const eventName = 'messageNotification' as typeof WindowEvents.messageNotification;
 const SocketInit = () => {
    const handleSocketConnection = () => {
       console.log('socket init called');
@@ -31,6 +32,15 @@ const SocketInit = () => {
 
    useEffect(() => {
       handleSocketConnection();
+      socket.on('message-notification', (notification) => {
+         console.log('hello notification', notification)
+         import("Sharedlib/eventservice").
+         then((event) => {
+            setTimeout(() => event.default.fire(eventName, { detail: notification }), 100);     
+         }).catch(error => {
+            console.error('Error occured in event', error);
+         })
+      })
       return () => {
          socket.disconnect();
       }
@@ -39,4 +49,4 @@ const SocketInit = () => {
    return (<></>)
 }
 
-export const MemosizedSocketInit = memo(SocketInit);
+export const MemoizedSocketInit = memo(SocketInit);

src/components/AuthRoute/AuthRoute.tsx

@@ -3,7 +3,7 @@ import {SideMenuBar} from "../Homepage/SideMenuBar";
 import {useLocation, useNavigate} from "react-router-dom";
 import { getAccessToken } from "../../util";
 import Loader from "../Loaders";
-import { MemosizedSocketInit as SocketInit } from "./SocketInit";
+import { MemoizedSocketInit as SocketInit } from "../../Socket/SocketInit";
 import { getUserDetailsApi } from "../../apis/getUserDetails";
 import { WindowEvents } from "Sharedlib/eventservice";
 

src/components/Homepage/SideMenuBar.tsx

@@ -29,6 +29,8 @@ const LogoutModalLazy = lazy(() => import("../Login/LogoutModal"));
 import { styled } from "@mui/material/styles";
 import { getUserInfoFromStorage } from "../../util";
 import { PageEnum } from "../../typesdeclarations/type";
+import useNotificationProvider from "../../customHook/useNotificationProvider";
+import { NotificationType, WindowEvents } from "@kshitijraj09/sharedlib_mf";
 
 const drawerWidth = 200;
 type SideMenuBarPropsType = {
@@ -82,7 +84,9 @@ export const SideMenuBar = ({
    const classes = styles();
 
    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
+   const messageNotification = 'messageNotification' as WindowEvents.messageNotification;
+   const { outputStack: notificationStack } = useNotificationProvider<NotificationType>(messageNotification);
+   
    const menuItems = [
       {
          text: PageEnum.Posts,
@@ -102,7 +106,7 @@ export const SideMenuBar = ({
       {
          text: PageEnum.Messenger,
          icon: (
-            <Badge color="primary" variant="dot">
+            <Badge color="primary" badgeContent={notificationStack.length}>
                <TextsmsOutlinedIcon />
             </Badge>
          ),

src/customHook/useNotificationProvider.tsx

@@ -0,0 +1,33 @@
+import { WindowEvents } from "@kshitijraj09/sharedlib_mf";
+import WindowEventService from "Sharedlib/eventservice";
+import { useEffect, useState } from "react";
+
+const useNotificationProvider = <Type,>(eventName: WindowEvents) => {
+
+   const [detail, setDetail] = useState<Type>();
+   const [loading, setLoading] = useState(true);
+   const [outputStack, setOutputStack] = useState<Type[]>([]);
+
+   useEffect(() => {
+      import("Sharedlib/eventservice").
+         then((event) => {
+            event.default.subscribe(eventName, updateHandler)
+         }).catch(error => {
+            console.error('Error occured in event', error);
+         })
+      return () => {
+         WindowEventService.unsubscribe(eventName, updateHandler)
+      }
+   }, []);
+
+   const updateHandler = (event: Event) => {
+      const { detail } = event as CustomEvent;
+      setDetail(detail);
+      setOutputStack((prev) => ([detail, ...prev]));
+      setLoading(false);
+   }
+
+   return {detail, loading, outputStack}
+}
+
+export default useNotificationProvider;

yarn.lock

@@ -1196,10 +1196,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@kshitijraj09/sharedlib_mf@1.0.6":
-  version "1.0.6"
-  resolved "https://npm.pkg.github.com/download/@kshitijraj09/sharedlib_mf/1.0.6/de9ee004fb698c71396f4a5dcbaf932e0f003f06#de9ee004fb698c71396f4a5dcbaf932e0f003f06"
-  integrity sha512-7I6o9bBjYcbZ9BuVS3kY0cGo7La/S7Sxe+nbfFqEygvarArH8KQAKrxjktScY9cl2adns+dx5Up861ZhANvZ2Q==
+"@kshitijraj09/sharedlib_mf@1.0.7":
+  version "1.0.7"
+  resolved "https://npm.pkg.github.com/download/@kshitijraj09/sharedlib_mf/1.0.7/1ee8985920271945693d73b5c44f96d2e389e0b5#1ee8985920271945693d73b5c44f96d2e389e0b5"
+  integrity sha512-3K/rsSDEVvjEb50nItE/Azwn2zT9RzqjJaJHCaJaJpsnSJ6NVvra9/pN/f/rYNOGMK7YI7JMMD1SHsbUQrhMXQ==
   dependencies:
     "@emotion/react" "^11.10.6"
     "@emotion/styled" "^11.10.6"