improve notifications

webdevcody · Feb 8, 2024 · 5628e6d · 5628e6d
1 parent 8e0cd8e
commit 5628e6d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 32 deletions.
diff --git a/convex/notification.ts b/convex/notification.ts
@@ -1,22 +1,25 @@
+import { ConvexError, v } from "convex/values";
 import { getProfile } from "./users";
 import { authMutation, authQuery } from "./util";
 
-export const markAllRead = authMutation({
-  args: {},
-  handler: async (ctx) => {
-    const unreadNotifications = await ctx.db
-      .query("notifications")
-      .withIndex("by_userId", (q) => q.eq("userId", ctx.user._id))
-      .filter((q) => q.eq(q.field("isRead"), false))
-      .collect();
+export const markAsRead = authMutation({
+  args: { notificationId: v.id("notifications") },
+  handler: async (ctx, args) => {
+    const notification = await ctx.db.get(args.notificationId);
 
-    await Promise.all(
-      unreadNotifications.map(async (notification) => {
-        return await ctx.db.patch(notification._id, {
-          isRead: true,
-        });
-      })
-    );
+    if (!notification) {
+      throw new ConvexError("notification not found");
+    }
+
+    if (notification.userId !== ctx.user._id) {
+      throw new ConvexError("not access to read notification");
+    }
+
+    notification.isRead = true;
+
+    await ctx.db.patch(notification._id, {
+      isRead: true,
+    });
   },
 });
 

diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
@@ -11,26 +11,22 @@ import { PictureInPictureIcon, SpeechIcon } from "lucide-react";
 import { Id } from "../../../convex/_generated/dataModel";
 import { ReactNode, useEffect } from "react";
 import { timeFrom } from "@/util/time-from";
+import { useRouter } from "next/navigation";
 
 function Notification({
   notification,
   title,
   description,
   icon,
 }: {
-  notification: {
-    _creationTime: number;
-    _id: Id<"notifications">;
-    from: Id<"users">;
-    thumbnailId: Id<"thumbnails">;
-    profile: {
-      name: string | undefined;
-    };
-  };
+  notification: (typeof api.notification.getNotifications._returnType)[0];
   title: string;
   description: string;
   icon: ReactNode;
 }) {
+  const markAsRead = useMutation(api.notification.markAsRead);
+  const router = useRouter();
+
   return (
     <div
       className="flex items-center gap-4 border p-4 rounded"
@@ -49,8 +45,19 @@ function Notification({
         </div>
       </div>
 
-      <Button asChild className="ml-auto">
-        <Link href={`/thumbnails/${notification.thumbnailId}`}>View</Link>
+      <Button
+        variant={notification.isRead ? "outline" : "default"}
+        className="ml-auto"
+        onClick={async () => {
+          if (!notification.isRead) {
+            await markAsRead({
+              notificationId: notification._id,
+            });
+          }
+          router.push(`/thumbnails/${notification.thumbnailId}`);
+        }}
+      >
+        {notification.isRead ? "View" : "Read"}
       </Button>
     </div>
   );
@@ -64,12 +71,6 @@ export default function NotificationsPage() {
     !isAuthenticated ? "skip" : undefined
   );
 
-  const markAllRead = useMutation(api.notification.markAllRead);
-
-  useEffect(() => {
-    markAllRead();
-  }, [markAllRead]);
-
   return (
     <div className="">
       <h1 className="text-center text-4xl font-bold mb-12">Notifications</h1>