fix: mark a notification as read as soon as it is viewed (MetaMask#24765

)

ui/pages/notification-details/notification-details.tsx

@@ -43,41 +43,38 @@ export default function NotificationDetails() {
     notificationData,
   );
 
+  const { markNotificationAsRead } = useMarkNotificationAsRead();
+
   useEffect(() => {
     if (!id || !notificationData) {
       redirectToNotifications();
     }
     if (notificationData) {
       setNotification(notificationData);
+      // Mark the notification as read when the page is viewed
+      markNotificationAsRead([
+        {
+          id: notificationData.id,
+          type: notificationData.type,
+          isRead: notificationData.isRead,
+        },
+      ]);
     }
-  }, [id, notificationData]);
+  }, [id, notificationData, markNotificationAsRead]);
 
   if (!notification) {
     redirectToNotifications();
     return null;
   }
 
-  const { markNotificationAsRead } = useMarkNotificationAsRead();
-
-  const onClickBack = () => {
-    markNotificationAsRead([
-      {
-        id: notification.id,
-        type: notification.type,
-        isRead: notification.isRead,
-      },
-    ]);
-    history.push(NOTIFICATIONS_ROUTE);
-  };
-
   if (!hasNotificationComponents(notification.type)) {
     return null;
   }
   const ncs = NotificationComponents[notification.type];
 
   return (
     <NotificationsPage>
-      <NotificationDetailsHeader onClickBack={onClickBack}>
+      <NotificationDetailsHeader onClickBack={redirectToNotifications}>
         <ncs.details.title notification={notification} />
       </NotificationDetailsHeader>
       <Content padding={0}>