Optimized rtk usage when deleting notifications

assets/js/src/core/app/api/pimcore/tags.ts

@@ -111,7 +111,7 @@ export const providingTags = {
   ELEMENT_VERSIONS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), getElementSpecificTag(tagNames.VERSIONS, elementType, id)],
   NOTES_AND_EVENTS_DETAIL: (id: number) => [{ type: tagNames.NOTES_AND_EVENTS, id }],
   ELEMENT_NOTES_AND_EVENTS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), getElementSpecificTag(tagNames.NOTES_AND_EVENTS, elementType, id)],
-  NOTIFICATION: (id: number) => [{ type: tagNames.NOTIFICATIONS, id }],
+  NOTIFICATIONS: () => [tagNames.NOTIFICATIONS],
   NOTIFICATION_DETAIL: (id: number) => [{ type: tagNames.NOTIFICATION_DETAILS, id }],
   AVAILABLE_TAGS: () => [tagNames.AVAILABLE_TAGS],
   ELEMENT_TAGS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), getElementSpecificTag(tagNames.ELEMENT_TAGS, elementType, id)],
@@ -170,7 +170,7 @@ export const invalidatingTags = {
   VERSIONS_DETAIL: (id: number) => [{ type: tagNames.VERSIONS, id }],
   ELEMENT_VERSIONS: (elementType: ElementType, id: number) => [getElementSpecificTag(tagNames.VERSIONS, elementType, id)],
   NOTES_AND_EVENTS_DETAIL: (id: number) => [{ type: tagNames.NOTES_AND_EVENTS, id }],
-  NOTIFICATION: (id: number) => [{ type: tagNames.NOTIFICATIONS, id }],
+  NOTIFICATION_DETAIL: (id: number) => [{ type: tagNames.NOTIFICATION_DETAILS, id }],
   NOTIFICATIONS: () => [tagNames.NOTIFICATIONS],
   ELEMENT_NOTES_AND_EVENTS: (elementType: ElementType, id: number) => [getElementSpecificTag(tagNames.NOTES_AND_EVENTS, elementType, id)],
   AVAILABLE_TAGS: () => [tagNames.AVAILABLE_TAGS],

assets/js/src/core/modules/notifications/hooks/use-notification-detail.tsx

@@ -10,7 +10,7 @@
 
 import { useEffect, useState } from 'react'
 import { type Notification, useNotificationDeleteByIdMutation, useNotificationGetByIdQuery } from '../notifications-slice-enhanced'
-import trackError, { ApiError } from '@Pimcore/modules/app/error-handler'
+import trackError, { ApiError, GeneralError } from '@Pimcore/modules/app/error-handler'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { useOptimisticUpdate } from './use-optimistic-update'
 import { isNil } from 'lodash'
@@ -30,15 +30,31 @@ interface UseNotificationsReturn {
 
 export const useNotificationDetail = ({ id }: UseNotificationDetailProps): UseNotificationsReturn => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false)
-  const { updateNotificationReadStateById } = useOptimisticUpdate()
+  const { updateNotificationReadStateById, removeNotificationFromCollectionById } = useOptimisticUpdate()
+  const [deleteNotificationMutation, { isLoading: deleteLoading }] = useNotificationDeleteByIdMutation()
 
-  const { data: notificationDetail, isLoading: detailLoading, isError: isDetailError, error: detailError } = useNotificationGetByIdQuery(
-    (isExpanded) ? { id } : skipToken)
+  const {
+    data: notificationDetail,
+    isLoading: detailLoading,
+    isError: isDetailError,
+    error: detailError
+  } = useNotificationGetByIdQuery((isExpanded) ? { id } : skipToken)
 
-  const [deleteNotification, { isError: isDeleteError, error: deleteError, isLoading: deleteLoading }] = useNotificationDeleteByIdMutation()
+  const deleteNotification = async (): Promise<void> => {
+    const deleteTask = deleteNotificationMutation({ id })
 
-  const deleteNotificationDetail = async (): Promise<void> => {
-    await deleteNotification({ id })
+    try {
+      const response = await deleteTask
+
+      if (response.error !== undefined) {
+        trackError(new ApiError(response.error))
+        return
+      }
+
+      removeNotificationFromCollectionById(id)
+    } catch {
+      trackError(new GeneralError('An error occurred while deleting the notification.'))
+    }
   }
 
   useEffect(() => {
@@ -53,18 +69,12 @@ export const useNotificationDetail = ({ id }: UseNotificationDetailProps): UseNo
     }
   }, [isDetailError])
 
-  useEffect(() => {
-    if (isDeleteError) {
-      trackError(new ApiError(deleteError))
-    }
-  }, [isDeleteError])
-
   return {
     notificationDetail,
     detailLoading,
     isExpanded,
     setIsExpanded,
-    deleteNotification: deleteNotificationDetail,
+    deleteNotification,
     deleteLoading
   }
 }

assets/js/src/core/modules/notifications/hooks/use-optimistic-update.tsx

@@ -14,6 +14,7 @@ import { isNil } from 'lodash'
 
 interface UseOptimisticUpdateProps {
   updateNotificationReadStateById: (id: number, read: boolean) => void
+  removeNotificationFromCollectionById: (id: number) => void
 }
 
 export const useOptimisticUpdate = (): UseOptimisticUpdateProps => {
@@ -54,7 +55,41 @@ export const useOptimisticUpdate = (): UseOptimisticUpdateProps => {
     })
   }
 
+  const removeNotificationFromCollectionById = (id: number): void => {
+    // Access the store to get all cached queries for this endpoint
+    dispatch((dispatch, getState) => {
+      const state = getState()
+      const queries = state.api?.queries ?? {}
+
+      // Find all notificationGetCollection queries in the cache
+      for (const [queryKey, queryState] of Object.entries(queries as Record<string, unknown>)) {
+        if (
+          queryKey.startsWith('notificationGetCollection(') &&
+          !isNil(queryState) &&
+          typeof queryState === 'object' &&
+          'originalArgs' in queryState &&
+          !isNil(queryState.originalArgs)
+        ) {
+          try {
+            dispatch(
+              api.util.updateQueryData(
+                'notificationGetCollection',
+                queryState.originalArgs as NotificationGetCollectionApiArg,
+                (draft): NotificationGetCollectionApiResponse => {
+                  draft.items = draft.items?.filter((note) => note.id !== id) ?? []
+                  draft.totalItems = (draft.totalItems ?? 1) - 1
+                  return draft
+                }
+              )
+            )
+          } catch { }
+        }
+      }
+    })
+  }
+
   return {
-    updateNotificationReadStateById
+    updateNotificationReadStateById,
+    removeNotificationFromCollectionById
   }
 }

assets/js/src/core/modules/notifications/notification-detail.tsx

@@ -29,6 +29,8 @@ export interface NotificationDetailProps {
 }
 
 export const NotificationDetail = ({ notification }: NotificationDetailProps): React.JSX.Element => {
+  const { styles } = useStyles()
+  const [notificationRead, setNotificationRead] = useState<boolean>(notification.read)
   const {
     isExpanded,
     setIsExpanded,
@@ -38,10 +40,6 @@ export const NotificationDetail = ({ notification }: NotificationDetailProps): R
     deleteLoading
   } = useNotificationDetail({ id: notification.id })
 
-  const { styles } = useStyles()
-
-  const [notificationRead, setNotificationRead] = useState<boolean>(notification.read)
-
   useEffect(() => {
     if (notificationDetail !== undefined) {
       setNotificationRead(notificationDetail?.read)
@@ -140,10 +138,10 @@ export const NotificationDetail = ({ notification }: NotificationDetailProps): R
   return (
     <Collapse
       activeKeys={
-      isExpanded
-        ? [notification.id.toString()]
-        : []
-    }
+        isExpanded
+          ? [notification.id.toString()]
+          : []
+      }
       items={ [item] }
       onChange={ (expandedKeys) => {
         if (expandedKeys.length > 0) {

assets/js/src/core/modules/notifications/notifications-slice-enhanced.ts

@@ -19,18 +19,17 @@ export const api = baseApi.enhanceEndpoints({
         const tags: Tag[] = []
 
         result?.items.forEach((note) => {
-          tags.push(...providingTags.NOTIFICATION(note.id))
+          tags.push(...providingTags.NOTIFICATION_DETAIL(note.id))
         })
 
+        tags.push(...providingTags.NOTIFICATIONS())
+
         return tags
       }
     },
     notificationGetById: {
       providesTags: (result, error, args) => providingTags.NOTIFICATION_DETAIL(args.id)
     },
-    notificationDeleteById: {
-      invalidatesTags: (result, error, args) => invalidatingTags.NOTIFICATION(args.id)
-    },
     notificationDeleteAll: {
       invalidatesTags: (result, error, args) => invalidatingTags.NOTIFICATIONS()
     }