console: Update items after status chnage

Author: ryaplots

pkg/webui/console/containers/notifications/notification-list/index.js

@@ -67,18 +67,25 @@ const NotificationList = ({
   const handleClick = useCallback(
     async (_, id) => {
       const clickedNotification = items.find(notification => notification.id === id)
+      const index = items.findIndex(notification => notification.id === id)
       if (!isArchive && !('status' in clickedNotification) && totalUnseenCount > 0) {
         await dispatch(attachPromise(updateNotificationStatus([id], 'NOTIFICATION_STATUS_SEEN')))
+        loadNextPage(index, index + 1)
       }
     },
-    [items, dispatch, isArchive, totalUnseenCount],
+    [items, dispatch, isArchive, totalUnseenCount, loadNextPage],
   )
 
   const handleMarkAllAsSeen = useCallback(async () => {
     if (totalUnseenCount > 0) {
-      await dispatch(attachPromise(markAllAsSeen()))
+      const result = await dispatch(attachPromise(markAllAsSeen()))
+      const firstIndex = items.findIndex(notification => notification.id === result[0])
+      const lastIndex = items.findIndex(
+        notification => notification.id === result[result.length - 1],
+      )
+      loadNextPage(firstIndex, lastIndex)
     }
-  }, [dispatch, totalUnseenCount])
+  }, [dispatch, totalUnseenCount, loadNextPage, items])
 
   const classes = classNames(styles.notificationHeaderIcon)
 

pkg/webui/console/store/middleware/logics/notifications.js

@@ -32,7 +32,7 @@ const m = defineMessage({
 const updateThroughPagination = async (totalCount, userId) => {
   let page = 1
   const limit = 100
-  let result
+  let result = []
 
   while ((page - 1) * limit < totalCount) {
     // Get the next page of notifications.
@@ -47,13 +47,13 @@ const updateThroughPagination = async (totalCount, userId) => {
     const notificationIds = notifications.notifications.map(notification => notification.id)
     // Make the update request.
     // eslint-disable-next-line no-await-in-loop
-    const updatedNotifications = await tts.Notifications.updateNotificationStatus(
+    await tts.Notifications.updateNotificationStatus(
       userId,
       notificationIds,
       'NOTIFICATION_STATUS_SEEN',
     )
 
-    result = { ...result, ...updatedNotifications }
+    result = [...result, ...notificationIds]
     page += 1
   }
 
@@ -133,9 +133,8 @@ const markAllAsSeenLogic = createRequestLogic({
   process: async ({ getState }) => {
     const id = selectUserId(getState())
     const totalUnseenCount = selectTotalUnseenCount(getState())
-    const result = updateThroughPagination(totalUnseenCount, id)
 
-    return { ...result, ids: [] }
+    return updateThroughPagination(totalUnseenCount, id)
   },
 })