console: Use useEffect to update notification status

TheThingsNetwork · Feb 5, 2024 · dd66648 · dd66648
1 parent b5be1f7
commit dd66648
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/pkg/webui/console/containers/notifications/index.js b/pkg/webui/console/containers/notifications/index.js
@@ -36,6 +36,7 @@ import {
   selectArchivedNotificationsTotalCount,
   selectInboxNotifications,
   selectInboxNotificationsTotalCount,
+  selectTotalUnseenCount,
 } from '@console/store/selectors/notifications'
 
 import NotificationList from './notification-list'
@@ -66,6 +67,7 @@ const Notifications = React.memo(() => {
   const totalCount = useSelector(
     showArchived ? selectArchivedNotificationsTotalCount : selectInboxNotificationsTotalCount,
   )
+  const totalUnseenCount = useSelector(selectTotalUnseenCount)
   const hasNextPage = items.length < totalCount
   const [fetching, setFetching] = useState(false)
   const [selectionCache, setSelectionCache] = useState({ archived: undefined, inbox: undefined })
@@ -164,6 +166,24 @@ const Notifications = React.memo(() => {
     }
   }, [category, isSmallScreen, items, navigate, notificationId, selectionCache])
 
+  // Update the status of the selected notification to seen.
+  useEffect(() => {
+    const clickedNotification = items.find(notification => notification.id === notificationId)
+    const index = items.findIndex(notification => notification.id === notificationId)
+    const timer = setTimeout(() => {
+      if (category === 'inbox' && !('status' in clickedNotification) && totalUnseenCount > 0) {
+        dispatch(
+          attachPromise(
+            updateNotificationStatus([clickedNotification.id], 'NOTIFICATION_STATUS_SEEN'),
+          ),
+        )
+        loadNextPage(index, index + 1)
+      }
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [category, items, dispatch, loadNextPage, totalUnseenCount, notificationId])
+
   const selectedNotification = items?.find(item => item.id === notificationId)
 
   if (!items) {

diff --git a/pkg/webui/console/containers/notifications/notification-list/index.js b/pkg/webui/console/containers/notifications/notification-list/index.js
@@ -30,7 +30,7 @@ import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
 import PropTypes from '@ttn-lw/lib/prop-types'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
-import { markAllAsSeen, updateNotificationStatus } from '@console/store/actions/notifications'
+import { markAllAsSeen } from '@console/store/actions/notifications'
 
 import { selectTotalUnseenCount } from '@console/store/selectors/notifications'
 
@@ -64,18 +64,6 @@ const NotificationList = ({
   // Otherwise, if totalCount is 0, it means the list is empty and we should not have a total count.
   const itemCount = totalCount >= 0 ? totalCount : 100
 
-  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, loadNextPage],
-  )
-
   const handleMarkAllAsSeen = useCallback(async () => {
     if (totalUnseenCount > 0) {
       const result = await dispatch(attachPromise(markAllAsSeen()))
@@ -103,7 +91,6 @@ const NotificationList = ({
           notification={items[index]}
           isSelected={isSelected(items[index])}
           isNextSelected={isNextSelected(items[index])}
-          onClick={handleClick}
         />
       </div>
     ) : (

diff --git a/pkg/webui/console/containers/notifications/notification-list/list-item.js b/pkg/webui/console/containers/notifications/notification-list/list-item.js
@@ -31,7 +31,7 @@ import { selectTotalUnseenCount } from '@console/store/selectors/notifications'
 
 import style from '../notifications.styl'
 
-export const NotificationListItem = ({ notification, isSelected, isNextSelected, onClick }) => {
+export const NotificationListItem = ({ notification, isSelected, isNextSelected }) => {
   const { category } = useParams()
   const totalUnseenCount = useSelector(selectTotalUnseenCount)
   const showUnseenStatus = !notification.status && totalUnseenCount > 0
@@ -47,7 +47,6 @@ export const NotificationListItem = ({ notification, isSelected, isNextSelected,
       to={`/notifications/${category}/${notification.id}`}
       className={classes}
       data-test-id="notification-list-item"
-      onClick={onClick}
       value={notification.id}
     >
       {showUnseenStatus && <Status pulse={false} status="good" className={style.unseenMark} />}
@@ -92,7 +91,6 @@ NotificationListItem.propTypes = {
     notification_type: PropTypes.string,
     status: PropTypes.string,
   }).isRequired,
-  onClick: PropTypes.func.isRequired,
 }
 
 NotificationListItem.defaultProps = {

diff --git a/pkg/webui/console/containers/side-bar/navigation/general-side-navigation.js b/pkg/webui/console/containers/side-bar/navigation/general-side-navigation.js
@@ -55,7 +55,7 @@ const GeneralSideNavigation = () => {
         )}
         <SideNavigation.Item
           title={sharedMessages.notifications}
-          path="/notifications/inbox"
+          path="/notifications"
           icon="inbox"
         />
         {mayHandleApiKeys && (

diff --git a/pkg/webui/console/store/middleware/logics/notifications.js b/pkg/webui/console/store/middleware/logics/notifications.js
@@ -31,7 +31,7 @@ const m = defineMessage({
 
 const updateThroughPagination = async (totalCount, userId) => {
   let page = 1
-  const limit = 100
+  const limit = 1000
   let result = []
 
   while ((page - 1) * limit < totalCount) {