mark as read on click (#867)

Author: ameer2468

apps/web/actions/notifications/mark-all-as-read.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import { getCurrentUser } from "@cap/database/auth/session";
+import { notifications } from "@cap/database/schema";
+import { db } from "@cap/database";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+export const markAsRead = async (notificationId?: string) => {
+  const currentUser = await getCurrentUser();
+  if (!currentUser) {
+    throw new Error("User not found");
+  }
+
+  try {
+    const now = new Date();
+    if (notificationId) {
+      await db()
+        .update(notifications)
+        .set({ readAt: now })
+        .where(eq(notifications.id, notificationId));
+    } else {
+      await db()
+        .update(notifications)
+        .set({ readAt: now })
+        .where(eq(notifications.recipientId, currentUser.id));
+    }
+  } catch (error) {
+    console.log(error);
+    throw new Error("Error marking notification(s) as read");
+  }
+
+  revalidatePath("/dashboard");
+};

apps/web/actions/notifications/mark-as-read.ts

@@ -2,7 +2,7 @@ import { faCheckDouble } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { toast } from "sonner";
 import clsx from "clsx";
-import { markAllAsRead } from "@/actions/notifications/mark-all-as-read";
+import { markAsRead } from "@/actions/notifications/mark-as-read";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 
@@ -11,10 +11,10 @@ export const NotificationHeader = () => {
   const [loading, setLoading] = useState(false);
   const queryClient = useQueryClient();
 
-  const markAllAsReadHandler = async () => {
+  const markAsReadHandler = async () => {
     try {
       setLoading(true);
-      await markAllAsRead();
+      await markAsRead();
       toast.success("Notifications marked as read");
       queryClient.invalidateQueries({
         queryKey: ["notifications"],
@@ -31,7 +31,7 @@ export const NotificationHeader = () => {
     <div className="flex justify-between items-center px-6 py-3 rounded-t-xl border bg-gray-3 border-gray-4">
       <p className="text-md text-gray-12">Notifications</p>
       <div
-        onClick={markAllAsReadHandler}
+        onClick={markAsReadHandler}
         className={clsx("flex gap-1 items-center transition-opacity duration-200 cursor-pointer hover:opacity-70", loading ? "opacity-50 cursor-not-allowed" : "")}
       >
         <FontAwesomeIcon

apps/web/app/(org)/dashboard/_components/Notifications/NotificationHeader.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import moment from "moment";
 import { NotificationType } from "@/lib/Notification";
+import { markAsRead } from "@/actions/notifications/mark-as-read";
 import { Notification as APINotification } from "@cap/web-api-contract";
 
 type NotificationItemProps = {
@@ -25,9 +26,18 @@ export const NotificationItem = ({
 }: NotificationItemProps) => {
   const link = getLink(notification);
 
+  const markAsReadHandler = async () => {
+    try {
+      await markAsRead(notification.id);
+    } catch (error) {
+      console.error("Error marking notification as read:", error);
+    }
+  };
+
   return (
     <Link
       href={link}
+      onClick={markAsReadHandler}
       className={clsx(
         "flex gap-3 p-4 transition-colors cursor-pointer min-h-fit border-gray-3 hover:bg-gray-2",
         className