Notification list is coming from the backend. On the homepage, there is a notification icon. I print notifications when I click this icon.

On the returned response; Seen information --> not seen if its value is 0, it will be seen if its value is 1.

I am trying to do; All notifications should be set as 'seen' when the notifications page is opened after pressing the notifications button on the main page.

service

const seen = (inAppNotificationRequestDto) => {
  return new Observable((observer) => {
    axiosInstance
      .put(SERVICE_PATH + '/markAsSeen', inAppNotificationRequestDto)
      .then((response) => {
        observer.next(response.data);
        observer.complete();
      })
      .catch((err) => {
        console.log(err);
      });
  });
};

home page

Notification icon is here. A popup will open listing the notifications you clicked on the icon.

const handleNotificationClick = (event) => {
  console.log(isIconDisabled);
  if (!isIconDisabled) {
    setAnchorEl(event.currentTarget);
  }
};

<div className="header__notification">
 {notificationData?.newNotification === true
   ? (
     <AS.Badge
       color="primary"
       variant="dot"
       onClick={handleNotificationClick}
     />
   )
   : null}
 <AS.NotificationsOutlinedIcon
   className="header__notification_icon"
   onClick={handleNotificationClick}
 />
 <NotificationList notification={notificationData} />
</div>