Merge pull request #5125 from novuhq/nv-3413-bulk-delete-notification…

…s-in-headless-library

feat(headless): add remove notifications method

packages/client/src/api/api.service.ts

@@ -71,6 +71,12 @@ export class ApiService {
     return await this.httpClient.delete(`/widgets/messages/${messageId}`, {});
   }
 
+  async removeMessages(messageId: string[]): Promise<any> {
+    return await this.httpClient.post(`/widgets/messages/bulk/delete`, {
+      messageId: messageId,
+    });
+  }
+
   async removeAllMessages(feedId?: string): Promise<any> {
     const url = feedId
       ? `/widgets/messages?feedId=${feedId}`

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

@@ -806,6 +806,53 @@ export class HeadlessService {
       });
   }
 
+  public async removeNotifications({
+    messageIds,
+    listener,
+    onSuccess,
+    onError,
+  }: {
+    messageIds: string[];
+    listener: (
+      result: UpdateResult<void, unknown, { messageIds: string[] }>
+    ) => void;
+    onSuccess?: (obj: void) => void;
+    onError?: (error: unknown) => void;
+  }) {
+    this.assertSessionInitialized();
+
+    const { result, unsubscribe } = this.queryService.subscribeMutation<
+      void,
+      unknown,
+      { messageIds: string[] }
+    >({
+      options: {
+        mutationFn: (variables) =>
+          this.api.removeMessages(variables.messageIds),
+        onSuccess: (data) => {
+          this.queryClient.refetchQueries(NOTIFICATIONS_QUERY_KEY, {
+            exact: false,
+          });
+        },
+      },
+      listener: (res) => this.callUpdateListener(res, listener),
+    });
+
+    result
+      .mutate({ messageIds })
+      .then((data) => {
+        onSuccess?.(data);
+
+        return data;
+      })
+      .catch((error) => {
+        onError?.(error);
+      })
+      .finally(() => {
+        unsubscribe();
+      });
+  }
+
   public async updateAction({
     messageId,
     actionButtonType,

packages/notification-center/src/hooks/useRemoveNotifications.ts

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient, UseMutationOptions } from '@tanstack/react-query';
+
+import { useNovuContext } from './useNovuContext';
+import { useFetchNotificationsQueryKey } from './useFetchNotificationsQueryKey';
+
+interface IRemoveNotificationsVariables {
+  messageIds: string[];
+}
+
+export type ResponseDataType = Record<string, never>;
+
+export const useRemoveNotifications = ({
+  onSuccess,
+  ...options
+}: {
+  onSuccess?: () => void;
+} & UseMutationOptions<ResponseDataType, Error, IRemoveNotificationsVariables> = {}) => {
+  const queryClient = useQueryClient();
+  const { apiService } = useNovuContext();
+  const fetchNotificationsQueryKey = useFetchNotificationsQueryKey();
+
+  const { mutate, ...result } = useMutation<ResponseDataType, Error, IRemoveNotificationsVariables>(
+    ({ messageIds }) => apiService.removeMessages(messageIds),
+    {
+      ...options,
+      onSuccess: (data, variables, context) => {
+        queryClient.refetchQueries(fetchNotificationsQueryKey, { exact: false });
+        onSuccess?.(data, variables, context);
+      },
+    }
+  );
+
+  return { ...result, removeNotifications: mutate };
+};

packages/notification-center/src/store/notifications-provider.context.tsx

@@ -15,6 +15,7 @@ import { useMarkNotificationsAsRead } from '../hooks/useMarkNotificationAsRead';
 import { useMarkNotificationsAsSeen } from '../hooks/useMarkNotificationAsSeen';
 import { useStore } from '../hooks/useStore';
 import { StoreProvider } from './store-provider.context';
+import { useRemoveNotifications } from '../hooks/useRemoveNotifications';
 
 const DEFAULT_STORES = [{ storeId: 'default_store' }];
 
@@ -47,6 +48,7 @@ function NotificationsProviderInternal({ children }: { children: React.ReactNode
   const { data: unreadCountData } = useUnreadCount();
   const { markNotificationsAs } = useMarkNotificationsAs();
   const { removeNotification } = useRemoveNotification();
+  const { removeNotifications } = useRemoveNotifications();
   const { removeAllNotifications } = useRemoveAllNotifications();
   const { markNotificationsAsRead } = useMarkNotificationsAsRead();
   const { markNotificationsAsSeen } = useMarkNotificationsAsSeen();
@@ -61,6 +63,10 @@ function NotificationsProviderInternal({ children }: { children: React.ReactNode
     [markNotificationsAs]
   );
   const removeMessage = useCallback((messageId: string) => removeNotification({ messageId }), [removeNotification]);
+  const removeMessages = useCallback(
+    (messageIds: string[]) => removeNotifications({ messageIds }),
+    [removeNotifications]
+  );
   const removeAllMessages = useCallback(
     (feedId?: string) => removeAllNotifications({ feedId }),
     [removeAllNotifications]
@@ -138,6 +144,7 @@ function NotificationsProviderInternal({ children }: { children: React.ReactNode
       markFetchedNotificationsAsRead,
       markFetchedNotificationsAsSeen,
       removeMessage,
+      removeMessages,
       removeAllMessages,
       markAllNotificationsAsRead,
       markAllNotificationsAsSeen,
@@ -162,6 +169,7 @@ function NotificationsProviderInternal({ children }: { children: React.ReactNode
       markFetchedNotificationsAsRead,
       markFetchedNotificationsAsSeen,
       removeMessage,
+      removeMessages,
       removeAllMessages,
       markAllNotificationsAsRead,
       markAllNotificationsAsSeen,