Merge pull request #5126 from novuhq/nv-3414-bulk-delete-notification…

…s-in-notification-center-hooks

feat(notification-center): add use remove notifications hook

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,