fix: notification read and snooze bugs (#2639)

* fix: marking notification as read doesn't remove it from un-read list

* refactor: arranged imports

* fix: past snooze notifications coming in snooze tab

web/components/notifications/notification-card.tsx

@@ -1,15 +1,13 @@
 import React from "react";
-
 import Image from "next/image";
 import { useRouter } from "next/router";
-
+import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-
 // icons
 import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
-import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
-
+// constants
+import { snoozeOptions } from "constants/notification";
 // helper
 import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
 import {
@@ -19,14 +17,12 @@ import {
   renderShortDate,
   renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
-
 // type
 import type { IUserNotification } from "types";
-// constants
-import { snoozeOptions } from "constants/notification";
 
 type NotificationCardProps = {
   notification: IUserNotification;
+  isSnoozedTabOpen: boolean;
   markNotificationReadStatus: (notificationId: string) => Promise<void>;
   markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
   markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
@@ -37,6 +33,7 @@ type NotificationCardProps = {
 export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const {
     notification,
+    isSnoozedTabOpen,
     markNotificationReadStatus,
     markNotificationReadStatusToggle,
     markNotificationArchivedStatus,
@@ -49,6 +46,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
 
   const { setToastAlert } = useToast();
 
+  if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
+
   return (
     <div
       onClick={() => {
@@ -92,52 +91,54 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         )}
       </div>
       <div className="space-y-2.5 w-full overflow-hidden">
-        { !notification.message ? <div className="text-sm w-full break-words">
-          <span className="font-semibold">
-            {notification.triggered_by_details.is_bot
-              ? notification.triggered_by_details.first_name
-              : notification.triggered_by_details.display_name}{" "}
-          </span>
-          {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
-          {notification.data.issue_activity.field === "comment"
-            ? "commented"
-            : notification.data.issue_activity.field === "None"
-            ? null
-            : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
-          {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
-            ? "to"
-            : ""}
-          <span className="font-semibold">
-            {" "}
-            {notification.data.issue_activity.field !== "None" ? (
-              notification.data.issue_activity.field !== "comment" ? (
-                notification.data.issue_activity.field === "target_date" ? (
-                  renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
-                ) : notification.data.issue_activity.field === "attachment" ? (
-                  "the issue"
-                ) : notification.data.issue_activity.field === "description" ? (
-                  stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
+        {!notification.message ? (
+          <div className="text-sm w-full break-words">
+            <span className="font-semibold">
+              {notification.triggered_by_details.is_bot
+                ? notification.triggered_by_details.first_name
+                : notification.triggered_by_details.display_name}{" "}
+            </span>
+            {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
+            {notification.data.issue_activity.field === "comment"
+              ? "commented"
+              : notification.data.issue_activity.field === "None"
+              ? null
+              : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
+            {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
+              ? "to"
+              : ""}
+            <span className="font-semibold">
+              {" "}
+              {notification.data.issue_activity.field !== "None" ? (
+                notification.data.issue_activity.field !== "comment" ? (
+                  notification.data.issue_activity.field === "target_date" ? (
+                    renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
+                  ) : notification.data.issue_activity.field === "attachment" ? (
+                    "the issue"
+                  ) : notification.data.issue_activity.field === "description" ? (
+                    stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
+                  ) : (
+                    notification.data.issue_activity.new_value
+                  )
                 ) : (
-                  notification.data.issue_activity.new_value
+                  <span>
+                    {`"`}
+                    {notification.data.issue_activity.new_value.length > 55
+                      ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
+                      : notification.data.issue_activity.issue_comment}
+                    {`"`}
+                  </span>
                 )
               ) : (
-                <span>
-                  {`"`}
-                  {notification.data.issue_activity.new_value.length > 55
-                    ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
-                    : notification.data.issue_activity.issue_comment}
-                  {`"`}
-                </span>
-              )
-            ) : (
-              "the issue and assigned it to you."
-            )}
-          </span>
-        </div> : <div className="text-sm w-full break-words">
-           <span className="semi-bold">
-               { notification.message }
-           </span>
-         </div> }
+                "the issue and assigned it to you."
+              )}
+            </span>
+          </div>
+        ) : (
+          <div className="text-sm w-full break-words">
+            <span className="semi-bold">{notification.message}</span>
+          </div>
+        )}
 
         <div className="flex justify-between gap-2 text-xs">
           <p className="text-custom-text-300">

web/components/notifications/notification-header.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-
-// components
-import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
-
-//icon
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
-
+// ui
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
-
 // type
 import type { NotificationType, NotificationCount } from "types";
 

web/components/notifications/notification-popover.tsx

@@ -1,13 +1,13 @@
 import React, { Fragment } from "react";
 import { Popover, Transition } from "@headlessui/react";
+import { Bell } from "lucide-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import useUserNotification from "hooks/use-user-notifications";
 // components
 import { EmptyState } from "components/common";
 import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
 import { Loader, Tooltip } from "@plane/ui";
-// icons
-import { Bell } from "lucide-react";
 // images
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
@@ -15,7 +15,7 @@ import { getNumberCount } from "helpers/string.helper";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
-export const NotificationPopover = () => {
+export const NotificationPopover = observer(() => {
   const store: any = useMobxStore();
 
   const {
@@ -121,6 +121,7 @@ export const NotificationPopover = () => {
                           {notifications.map((notification) => (
                             <NotificationCard
                               key={notification.id}
+                              isSnoozedTabOpen={snoozed}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
                               markNotificationReadStatus={markNotificationAsRead}
@@ -193,4 +194,4 @@ export const NotificationPopover = () => {
       </Popover>
     </>
   );
-};
+});

web/components/notifications/select-snooze-till-modal.tsx

@@ -2,14 +2,14 @@ import { Fragment, FC } from "react";
 import { useRouter } from "next/router";
 import { useForm, Controller } from "react-hook-form";
 import { Transition, Dialog } from "@headlessui/react";
+import { X } from "lucide-react";
 // date helper
 import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
 // hooks
 import useToast from "hooks/use-toast";
-// components
+// ui
 import { Button, CustomSelect } from "@plane/ui";
 import { CustomDatePicker } from "components/ui";
-import { X } from "lucide-react";
 // types
 import type { IUserNotification } from "types";
 
@@ -172,6 +172,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                               onChange(val);
                             }}
                             className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 focus:outline-none !text-sm"
+                            wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}
                           />

web/hooks/use-user-notifications.tsx

@@ -148,6 +148,8 @@ const useUserNotification = () => {
     handleReadMutation(isRead ? "unread" : "read");
     mutateNotification(notificationId, { read_at: isRead ? null : new Date() });
 
+    if (readNotification) removeNotification(notificationId);
+
     if (isRead) {
       await userNotificationServices
         .markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)