fix: notification read status being toggled when click on link (#1769)

apps/app/components/notifications/notification-card.tsx

@@ -27,6 +27,7 @@ import { snoozeOptions } from "constants/notification";
 type NotificationCardProps = {
   notification: IUserNotification;
   markNotificationReadStatus: (notificationId: string) => Promise<void>;
+  markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
   markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
   setSelectedNotificationForSnooze: (notificationId: string) => void;
   markSnoozeNotification: (notificationId: string, dateTime?: Date | undefined) => Promise<void>;
@@ -36,6 +37,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const {
     notification,
     markNotificationReadStatus,
+    markNotificationReadStatusToggle,
     markNotificationArchivedStatus,
     setSelectedNotificationForSnooze,
     markSnoozeNotification,
@@ -159,7 +161,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             name: notification.read_at ? "Mark as unread" : "Mark as read",
             icon: "chat_bubble",
             onClick: () => {
-              markNotificationReadStatus(notification.id).then(() => {
+              markNotificationReadStatusToggle(notification.id).then(() => {
                 setToastAlert({
                   title: notification.read_at
                     ? "Notification marked as unread"

apps/app/components/notifications/notification-popover.tsx

@@ -38,6 +38,7 @@ export const NotificationPopover = () => {
     notificationMutate,
     markNotificationArchivedStatus,
     markNotificationReadStatus,
+    markNotificationAsRead,
     markSnoozeNotification,
     notificationCount,
     totalNotificationCount,
@@ -128,7 +129,8 @@ export const NotificationPopover = () => {
                               key={notification.id}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
-                              markNotificationReadStatus={markNotificationReadStatus}
+                              markNotificationReadStatus={markNotificationAsRead}
+                              markNotificationReadStatusToggle={markNotificationReadStatus}
                               setSelectedNotificationForSnooze={setSelectedNotificationForSnooze}
                               markSnoozeNotification={markSnoozeNotification}
                             />

apps/app/hooks/use-user-notifications.tsx

@@ -185,6 +185,26 @@ const useUserNotification = () => {
     }
   };
 
+  const markNotificationAsRead = async (notificationId: string) => {
+    if (!workspaceSlug) return;
+
+    const isRead =
+      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+
+    if (isRead) return;
+
+    mutateNotification(notificationId, { read_at: new Date() });
+    handleReadMutation("read");
+
+    await userNotificationServices
+      .markUserNotificationAsRead(workspaceSlug.toString(), notificationId)
+      .catch(() => {
+        throw new Error("Something went wrong");
+      });
+
+    mutateNotificationCount();
+  };
+
   const markNotificationArchivedStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
     const isArchived =
@@ -283,6 +303,7 @@ const useUserNotification = () => {
     hasMore,
     isRefreshing,
     setFetchNotifications,
+    markNotificationAsRead,
   };
 };