Notification

src/redux/actions/api/Notification/Notifications_unseen.js

@@ -0,0 +1,42 @@
+/**
+ * GetOragnizationUsers API
+ */
+ import API from "../../../api";
+ import ENDPOINTS from "../../../../config/apiendpoint";
+ import constants from "../../../constants";
+
+ export default class FetchunreadcountAPI extends API {
+    constructor( timeout = 2000) {
+      super("GET", timeout, false);
+      this.type = constants.NOTIFICATION;
+      this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.notification}unread/`;
+    }
+
+    processResponse(res) {
+      super.processResponse(res);
+      if (res) {
+          this.notification = res;
+      }
+  }
+
+    apiEndPoint() {
+      return this.endpoint;
+    }
+
+    getBody() {}
+
+    getHeaders() {
+      this.headers = {
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization":`JWT ${localStorage.getItem('shoonya_access_token')}`
+        },
+      };
+      return this.headers;
+    }
+
+    getPayload() {
+      return this.notification;
+    }
+  }
+

src/ui/pages/component/common/Header.jsx

@@ -44,9 +44,12 @@ import Transliteration from "../../container/Transliteration/Transliteration";
 import CustomizedSnackbars from "../common/Snackbar";
 import userRole from "../../../../utils/UserMappedByRole/Roles";
 import NotificationAPI from "../../../../redux/actions/api/Notification/Notification";
+import FetchunreadcountAPI from "../../../../redux/actions/api/Notification/Notifications_unseen";
 import UpdateUIPrefsAPI from "../../../../redux/actions/api/UserManagement/UpdateUIPrefs";
 
 const Header = () => {
+  const [isNotifOpen, setIsNotifOpen] = useState(false); // ✅ control fetching
+  const [unreadCount, setUnreadCount] = useState(0);
   const [anchorElUser, setAnchorElUser] = useState(null);
   const [anchorElSettings, setAnchorElSettings] = useState(null);
   const [anchorElNotification, setAnchorElNotification] = useState(null);
@@ -131,6 +134,52 @@ const Header = () => {
         console.error("Error fetching notifications:", error);
       });
   };
+  // useEffect(() => {
+  //   fetchNotifications();
+  // }, [unread]);
+  // ✅ only call when notif is opened + unread changes
+  useEffect(() => {
+    if (isNotifOpen) {
+      fetchNotifications();
+    }
+  }, [unread, isNotifOpen]);
+
+
+  const FetchUnreadcount = () => {
+    let apiObj = new FetchunreadcountAPI();
+    const endpoint = apiObj.apiEndPoint();
+
+    fetch(endpoint, {
+      method: "GET",
+      headers: apiObj.getHeaders().headers,
+    })
+      .then(async (response) => {
+        if (response.ok) {
+          const data = await response.json();
+
+          // API directly returns a number (85)
+          setUnreadCount(Number(data));
+        } else {
+          console.error("Error fetching unread count:", response.status, response.statusText);
+          setUnreadCount(0);
+        }
+      })
+      .catch((error) => {
+        console.error("Error fetching unread count:", error);
+        setUnreadCount(0);
+      });
+  };
+
+  useEffect(() => {
+    FetchUnreadcount();
+    const interval = setInterval(() => {
+      FetchUnreadcount();
+    }, 30000); // every 30 seconds
+
+    return () => clearInterval(interval); // cleanup on unmount
+
+  }, []);
+
   const markAsRead = (notificationId) => {
     const task = new NotificationPatchAPI(notificationId);
     setSelectedNotificationId(notificationId);
@@ -154,9 +203,9 @@ const Header = () => {
     markAsRead(notificationId);
   };
 
-  useEffect(() => {
-    fetchNotifications();
-  }, [unread, selectedNotificationId]);
+  // useEffect(() => {
+  //   fetchNotifications();
+  // }, [unread, selectedNotificationId]);
 
   useEffect(() => {
     getLoggedInUserData();
@@ -223,13 +272,23 @@ const Header = () => {
   const handleCloseSettingsMenu = () => {
     setAnchorElSettings(null);
   };
+  // const handleOpenNotification = (event) => {
+  //   event.stopPropagation(); // prevent event bubbling
+  //   setAnchorElNotification(event.currentTarget);
+  // };
+
+  // const handleCloseNotification = () => {
+  //   setAnchorElNotification(null);
+  // };
   const handleOpenNotification = (event) => {
-    event.stopPropagation(); // prevent event bubbling
+    event.stopPropagation();
     setAnchorElNotification(event.currentTarget);
+    setIsNotifOpen(true); // ✅ enable fetching
   };
 
   const handleCloseNotification = () => {
     setAnchorElNotification(null);
+    setIsNotifOpen(false); // optional: stop fetching when closed
   };
 
   const handleRTLChange = (event) => {
@@ -778,10 +837,7 @@ const Header = () => {
                     <Tooltip title="Notifications">
                       <IconButton onClick={handleOpenNotification}>
                         <Badge
-                          badgeContent={
-                            unseenNotifications?.length > 0
-                              ? unseenNotifications?.length
-                              : null
+                          badgeContent={unreadCount > 0 ? unreadCount : null
                           }
                           color="primary"
                         >
@@ -862,7 +918,7 @@ const Header = () => {
                   </Grid>
                 </Grid>
                 <Menu
-                  sx={{ 
+                  sx={{
                     mt: "45px",
                   }}
                   id="menu-appbar"
@@ -959,8 +1015,8 @@ const Header = () => {
                 </Menu>
 
                 <Menu
-                  sx={{ 
-                    mt: "45px", 
+                  sx={{
+                    mt: "45px",
                     display: "flex",
                     "& .MuiPaper-root": {
                       maxHeight: "750px", // Fixed height
@@ -992,17 +1048,17 @@ const Header = () => {
                   >
                     <Typography variant="h4">Notifications</Typography>
                     {(Notification &&
-                    Notification?.length > 0 &&
-                    unseenNotifications?.length > 0) && (
-                      <Tooltip title="Mark all as read">
-                        <IconButton
-                          aria-label="More"
-                          onClick={handleMarkAllAsReadClick}
-                        >
-                          <GradingSharpIcon color="primary" />
-                        </IconButton>{" "}
-                      </Tooltip>
-                    )}
+                      Notification?.length > 0 &&
+                      unseenNotifications?.length > 0) && (
+                        <Tooltip title="Mark all as read">
+                          <IconButton
+                            aria-label="More"
+                            onClick={handleMarkAllAsReadClick}
+                          >
+                            <GradingSharpIcon color="primary" />
+                          </IconButton>{" "}
+                        </Tooltip>
+                      )}
                   </Stack>
                   <Stack
                     direction="row"