improvement: mark as read on click #867
Conversation
WalkthroughThe changes remove the previous bulk notification marking action and replace it with a unified Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NotificationHeader
participant NotificationItem
participant markAsRead (Server)
participant Database
participant Cache
User->>NotificationHeader: Click "Mark all as read"
NotificationHeader->>markAsRead: markAsRead()
markAsRead->>Database: Update all notifications (readAt)
markAsRead->>Cache: Revalidate "/dashboard"
markAsRead-->>NotificationHeader: Success/Error
User->>NotificationItem: Click notification
NotificationItem->>markAsRead: markAsRead(notificationId)
markAsRead->>Database: Update notification (readAt)
markAsRead->>Cache: Revalidate "/dashboard"
markAsRead-->>NotificationItem: Success/Error
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
apps/web/app/(org)/dashboard/_components/Notifications/NotificationItem.tsx (1)
1-1: Missing "use client" directiveThis component attaches event handlers; it must be a Client Component.
+"use client"; + import { faComment, faEye, faReply } from "@fortawesome/free-solid-svg-icons";apps/web/app/(org)/dashboard/_components/Notifications/NotificationHeader.tsx (1)
1-1: Missing "use client" directiveHooks (useState, useQueryClient) require this to be a Client Component.
+"use client"; + import { faCheckDouble } from "@fortawesome/free-solid-svg-icons";
🧹 Nitpick comments (4)
apps/web/actions/notifications/mark-as-read.ts (2)
28-31: Use console.error for errors (and keep the generic message for clients)Log as an error for better observability. Keeping a generic thrown message is fine.
- } catch (error) { - console.log(error); - throw new Error("Error marking notification(s) as read"); - } + } catch (error) { + console.error("Error marking notification(s) as read", error); + throw new Error("Error marking notification(s) as read"); + }
33-34: Consider revalidating an additional path or tag if notifications render outside /dashboardIf notifications are shown elsewhere (e.g., a global drawer or a different route), also revalidate that path or switch to revalidateTag with route segment-level caching.
apps/web/app/(org)/dashboard/_components/Notifications/NotificationItem.tsx (1)
29-35: Fire-and-forget the mark-as-read call to avoid delaying navigation (and handle middle-click)Awaiting inside onClick is unnecessary and may slightly impact perceived navigation. Fire-and-forget with a catch, and optionally handle auxiliary clicks (middle-click) to mark as read when opening in a new tab.
- const markAsReadHandler = async () => { - try { - await markAsRead(notification.id); - } catch (error) { - console.error("Error marking notification as read:", error); - } - }; + const markAsReadHandler = () => { + // Fire-and-forget; do not block navigation. + markAsRead(notification.id).catch((error) => { + console.error("Error marking notification as read:", error); + }); + };<Link href={link} - onClick={markAsReadHandler} + onClick={markAsReadHandler} + onAuxClick={markAsReadHandler} className={clsx(Also applies to: 38-41
apps/web/app/(org)/dashboard/_components/Notifications/NotificationHeader.tsx (1)
14-18: Guard against double invocations while loadingPrevent re-entrancy if a user double-clicks.
- const markAsReadHandler = async () => { + const markAsReadHandler = async () => { + if (loading) return; try { setLoading(true); await markAsRead();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/actions/notifications/mark-all-as-read.ts(0 hunks)apps/web/actions/notifications/mark-as-read.ts(1 hunks)apps/web/app/(org)/dashboard/_components/Notifications/NotificationHeader.tsx(3 hunks)apps/web/app/(org)/dashboard/_components/Notifications/NotificationItem.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/web/actions/notifications/mark-all-as-read.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
- GitHub Check: Clippy
- GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
| import { getCurrentUser } from "@cap/database/auth/session"; | ||
| import { notifications } from "@cap/database/schema"; | ||
| import { db } from "@cap/database"; | ||
| import { eq } from "drizzle-orm"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Scope single-item update to the current user and update only unread notifications
Currently, the single-item branch updates by ID only, allowing any authenticated user to mark any notification as read if they know its ID. Also, both branches overwrite readAt for already read notifications. Tighten authorization and update only unread rows.
Apply:
-import { eq } from "drizzle-orm";
+import { and, eq, isNull } from "drizzle-orm";- 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));
- }
+ if (notificationId) {
+ await db()
+ .update(notifications)
+ .set({ readAt: now })
+ .where(
+ and(
+ eq(notifications.id, notificationId),
+ eq(notifications.recipientId, currentUser.id),
+ isNull(notifications.readAt)
+ )
+ );
+ } else {
+ await db()
+ .update(notifications)
+ .set({ readAt: now })
+ .where(
+ and(
+ eq(notifications.recipientId, currentUser.id),
+ isNull(notifications.readAt)
+ )
+ );
+ }Also applies to: 17-27
🤖 Prompt for AI Agents
In apps/web/actions/notifications/mark-as-read.ts around lines 6 and 17 to 27,
the update operation currently allows any authenticated user to mark any
notification as read by ID alone and overwrites the readAt timestamp even for
already read notifications. To fix this, modify the update queries to include a
condition that the notification belongs to the current user and that readAt is
null (unread). This will restrict updates to only unread notifications owned by
the user, tightening authorization and preventing unnecessary overwrites.
This PR:
Summary by CodeRabbit
New Features
Refactor