diff --git a/packages/client/src/api/api.service.ts b/packages/client/src/api/api.service.ts index dbdb9611ac4..c87580e56cc 100644 --- a/packages/client/src/api/api.service.ts +++ b/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 { + return await this.httpClient.post(`/widgets/messages/bulk/delete`, { + messageId: messageId, + }); + } + async removeAllMessages(feedId?: string): Promise { const url = feedId ? `/widgets/messages?feedId=${feedId}` diff --git a/packages/headless/src/lib/headless.service.ts b/packages/headless/src/lib/headless.service.ts index dac65a05733..7e61bba69c6 100644 --- a/packages/headless/src/lib/headless.service.ts +++ b/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; + 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, diff --git a/packages/notification-center/src/hooks/useRemoveNotifications.ts b/packages/notification-center/src/hooks/useRemoveNotifications.ts new file mode 100644 index 00000000000..e80a36cd115 --- /dev/null +++ b/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; + +export const useRemoveNotifications = ({ + onSuccess, + ...options +}: { + onSuccess?: () => void; +} & UseMutationOptions = {}) => { + const queryClient = useQueryClient(); + const { apiService } = useNovuContext(); + const fetchNotificationsQueryKey = useFetchNotificationsQueryKey(); + + const { mutate, ...result } = useMutation( + ({ messageIds }) => apiService.removeMessages(messageIds), + { + ...options, + onSuccess: (data, variables, context) => { + queryClient.refetchQueries(fetchNotificationsQueryKey, { exact: false }); + onSuccess?.(data, variables, context); + }, + } + ); + + return { ...result, removeNotifications: mutate }; +}; diff --git a/packages/notification-center/src/store/notifications-provider.context.tsx b/packages/notification-center/src/store/notifications-provider.context.tsx index 15130545ffe..6b09ab25e47 100644 --- a/packages/notification-center/src/store/notifications-provider.context.tsx +++ b/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,