Merge pull request #3834 from iv-stpn/next

feat(headless): add listen to notification_received in headless service

docs/docs/notification-center/headless/api-reference.md

@@ -120,6 +120,27 @@ interface IFetchUnreadCount {
 }
 ```
 
+## listenNotificationReceive
+
+Listens to a new notification being added.
+Can be used to retrieve a new notification in real-time and trigger UI changes.
+
+```ts
+headlessService.listenNotificationReceive({
+  listener: (message: IMessage) => {
+    console.log(JSON.stringify(message));
+  },
+});
+```
+
+### method args interface
+
+```ts
+interface IListenNotificationReceive {
+  listener: (message: IMessage) => void;
+}
+```
+
 ## listenUnseenCountChange
 
 Listens to the changes of the unseen count.

packages/headless/src/lib/headless.service.test.ts

@@ -505,6 +505,90 @@ describe('headless.service', () => {
     });
   });
 
+  describe('listenNotificationReceive', () => {
+    test('calls listenNotificationReceive successfully', async () => {
+      // when
+      const mockedMessage = { test: 'hello' };
+      const headlessService = new HeadlessService(options);
+      const messageListener = jest.fn();
+      const notificationsListener = jest.fn();
+      const mockedSocket = {
+        on: jest.fn((type, callback) => {
+          if (type === 'notification_received') {
+            callback({ message: mockedMessage });
+          }
+        }),
+        off: jest.fn(),
+      };
+      (headlessService as any).session = mockSession;
+      (headlessService as any).socket = mockedSocket;
+      // fetch notifications before, the listenNotificationReceive will clear notifications cache
+      headlessService.fetchNotifications({
+        listener: notificationsListener,
+      });
+      await promiseResolveTimeout(0);
+
+      // then
+      headlessService.listenNotificationReceive({
+        listener: messageListener,
+      });
+      await promiseResolveTimeout(0);
+
+      // check results
+      expect(mockedSocket.on).toHaveBeenNthCalledWith(
+        1,
+        'notification_received',
+        expect.any(Function)
+      );
+      expect(messageListener).toHaveBeenCalledWith(mockedMessage);
+
+      // should fetch the notifications again, because the cache should be cleared
+      const onNotificationsListSuccess = jest.fn();
+      headlessService.fetchNotifications({
+        listener: notificationsListener,
+        onSuccess: onNotificationsListSuccess,
+        onError: (error) => {
+          console.log({ error });
+        },
+      });
+      await promiseResolveTimeout(0);
+
+      expect(mockServiceInstance.getNotificationsList).toBeCalledTimes(2);
+      expect(notificationsListener).toHaveBeenCalledTimes(4);
+      expect(notificationsListener).toHaveBeenNthCalledWith(
+        4,
+        expect.objectContaining({
+          isLoading: false,
+          data: mockNotificationsList,
+        })
+      );
+      expect(onNotificationsListSuccess).toHaveBeenNthCalledWith(
+        1,
+        mockNotificationsList
+      );
+    });
+
+    test('should unsubscribe', async () => {
+      // when
+      const headlessService = new HeadlessService(options);
+      const listener = jest.fn();
+      const mockedSocket = {
+        on: jest.fn(),
+        off: jest.fn(),
+      };
+      (headlessService as any).session = mockSession;
+      (headlessService as any).socket = mockedSocket;
+
+      // then
+      const unsubscribe = headlessService.listenUnseenCountChange({
+        listener,
+      });
+      unsubscribe();
+
+      expect(mockedSocket.off).toHaveBeenCalledWith('unseen_count_changed');
+    });
+  });
+
   describe('listenUnseenCountChange', () => {
     test('calls listenUnseenCountChange successfully', async () => {
       // when

packages/headless/src/lib/headless.service.ts

@@ -309,6 +309,34 @@ export class HeadlessService {
     return unsubscribe;
   }
 
+  public listenNotificationReceive({
+    listener,
+  }: {
+    listener: (message: IMessage) => void;
+  }) {
+    this.assertSessionInitialized();
+
+    if (this.socket) {
+      this.socket.on(
+        'notification_received',
+        (data?: { message: IMessage }) => {
+          if (data?.message) {
+            this.queryClient.removeQueries(NOTIFICATIONS_QUERY_KEY, {
+              exact: false,
+            });
+            listener(data.message);
+          }
+        }
+      );
+    }
+
+    return () => {
+      if (this.socket) {
+        this.socket.off('notification_received');
+      }
+    };
+  }
+
   public listenUnseenCountChange({
     listener,
   }: {